How to Setup create-react-app in Visual Studio Code

There are multiple ways you can write react.js code and execute it. But the convenient way is to use create-react-app. It comes with full packaging of inbuild server, Webpack, Babel, ESLint, Testing configuration and lot more.

You just need to focus on your code and not to worry about the basic configuration.

Let’s look at the steps to setup create-react-app.

Requirements:

  • Node.js
  • Visual Studio Code

Step 1: Install Node.js

Go to node.js website. In the LTS section, click on windows or mac.

Setup will get download according to your system requirements. Install the setup.

After installing node.js, open command prompt. Type node -v and npm -v commands one by one. If node and npm are installed correctly, then these commands will return you their respective version numbers.

Step 2: Install Visual Studio Code

Visual Studio Code is the free and open-sourced code editor. It is one of the top most editor used especially for JavaScript application development.

You can download Visual Studio Code according to your OS and system requirements. After download, install it. After opening, it will look like this.

Step 3: Install create-react-app

Create empty folder in any drive. Now, in the Visual Studio Code select File -> Open Folder and select the empty folder you have created and click on Select Folder.

We have created below empty folder.

Selected the same in Visual Studio Code.

Then, go to the Terminal in Visual Studio Code and click on New Terminal. Terminal window will get open below for your selected folder path.

Type command npx create-react-app my-app and hit enter. Installation will get start and it will take some time.

Note: You can give any name instead of my-app.

After installation is successfully completed, you will get below screen.

Step 4: Starting Application

To start application you have to change directory first. So Type command as given in the above screen.

Type cd my-app and hit enter.

After that type npm start and hit enter. Your my-app application will get open in the browser. It should be hosted at http://localhost:3000/ url.

Note: Sometimes you want to set default browser as per your choice. Here is the article to setup that.

That’s it.