Hello, React! with NPM and Visual Studio Code on Windows 10

In the post Hello, React! with Notepad on Windows 10 I inserted all the JavaScript into a <script>-Element. In this post I’ll insert it into an own index.js file.

As you may can see in the picture above I use a local server to open the file. So to get started create a new folder called “React”, open Visual Studio Code, go into that folder with Visual Studio Code’s Terminal and create the following folder and file structure:

├── index.html
├── js
│   ├── index.js


    <meta charset="utf-8" />
    <title>Hello, React!</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
    <script src="" type="text/babel"></script>
    <div id="root"></div>


const Greeting = ({name}) => <h1>Hello, {name}!</h1>;
  <Greeting name="React" />,

Back in Visual Studio Code’s Terminal insert the following command from within the created “React”-folder:

npx http-server

This will download and start a local http server. While this http server is running open a browser and point that browser to

Leave a Reply

Your email address will not be published. Required fields are marked *