How to Run a React App in Visual Studio Code

React is a free and open-source JavaScript library for building user interfaces. VS Code is a great place to build and test your React projects and apps. This guide shows you how to get started.

Step 1: Install NodeJS

The first step is to have a Node running on your system. Specifically, we need the NPM package manager, which comes bundled with it. You can visit to download NodeJS.

Download Node
Download NodeJS for your operating system.

Step 2: Create a new React app project

  1. From the top-level “View” menu, select the Terminal option. Alternatively, you press Ctrl + ’

    From the View menu, select Terminal.

  2. Inside the terminal, use the “cd” command to set the directory where you want to save your React project. The “cd” command lets you jump from one folder to another. For example, to open the Desktop folder, I would type:
    "CD Desktop"
  3. Next, type and run the following command to create a react app project:
    npx create-react-app react-example --use-npm

    The above command will create a folder or project named “react-example” on the Desktop.

    Type and run the given command to create a React application.

  4. From the sidebar, select the Explorer tab or press Ctrl + Shift + E. Click on Open Folder.

    Open Folder
    Click on Open Folder.

  5. Select the React app folder we created in the terminal. In my case, it is “react-example.” Then, click on Select Folder.

    Select the folder from where you saved it.

  6. You’ll notice a React project structure in the “Explorer” tab.

    Project structure
    The project folder will open in the explorer panel of VS Code.

Step 3: Run the React app

The React project structure comes with default codes. You can write your own code inside the App.js file. For this guide, I will run the default code. Do the following to run the code:

  1. Inside the terminal, type and run the following code:
    npm start


    Run Command
    Type and run the command.

  2. When prompted with the “Network Access” message, click Allow Access.

    Access Pop-up
    Click Allow Access.

  3. Your default browser will open the React program, as shown in the image below:

    React App
    This is the output of the default React project.

Leave a Comment