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 nodejs.org to download NodeJS.
Step 2: Create a new React app project
- From the top-level “View” menu, select the Terminal option. Alternatively, you press Ctrl + ’
From the View menu, select Terminal. - 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" - Next, type and run the following command to create a react app project:
npx create-react-app react-example --use-npmThe 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. - From the sidebar, select the Explorer tab or press Ctrl + Shift + E. Click on Open Folder.
Click on Open Folder. - 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. - You’ll notice a React project structure in the “Explorer” tab.
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:
- Inside the terminal, type and run the following code:
npm start
Type and run the command. - When prompted with the “Network Access” message, click Allow Access.
Click Allow Access. - Your default browser will open the React program, as shown in the image below:
This is the output of the default React project.