How To Run A React Project In Visual Studio Code

React is a JavaScript library for building user interfaces. A user interface is anything we put in front of users to have them interact with a machine.

Download 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 nodejs.org to download NodeJS.

Download Node
Download VS Code from the official website according to the version of your operating system.

Creating React app project

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

    Terminal
    From the View menu, choose the Terminal option.
  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 the Open Folder button.

    Open Folder
    Click on the Open Folder button.
  5. Select the folder which we just created in Step 3. In my case, it will be “react-example.” Then, click on the Select Folder button.

    Select the folder from your preferred directory.
  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.

Running the React app

The 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 following command: npm start
  2. When prompted with the “Network Access” message, click on the Allow Access button.

    Access Pop-up
    Click on the Allow Access button.
  3. The browser will open the React program, as shown in the image below:

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

Was this article helpful?

Leave a Comment