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 + ’
- 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-npm
The above command will create a folder or project named “react-example” on the Desktop.
- From the sidebar, select the Explorer tab or press Ctrl + Shift + E. 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.
- You’ll notice a React project structure in the “Explorer” tab.
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
- When prompted with the “Network Access” message, click Allow Access.
- Your default browser will open the React program, as shown in the image below: