How to Install ReactJS Using create-react-app on Windows. (A Step-by-Step Guide)

What is React?

React is also referred to as React.js and is an open-source JavaScript library created by Jordan Walke, a software engineer at Facebook. It was first deployed in 2011 on Facebook’s newsfeed. It is a tool that simplifies building user interfaces by creating a Virtual DOM in memory where all the necessary changes are made before being rendered in a browser DOM.

Setting up and Installing React.

React code can be directly written in HTML by including the necessary CDN’s in the HTML file. However, the most recommended way of using React is to set up a React Environment on your computer by first installing NPM and Node.js and then install the create-react-app.

create-react-app is an environment developed by Facebook that contains everything you need to build a React app. It will create a live development server, use Webpack to automatically compile React, JSX, and ES6, auto-prefix CSS files, and use ESLint to test and warn about mistakes in the code.

I’ll now take you through the step-by-step process of installing Node.js, NPM and the create-react-app and even run our first React App.

Download and Install Node.js and NPM

To run React.js we will require Node.js on our system.Node.js is a server which will help us to run the React.js code. You can download Node.js from here

The Node.js installer includes NPM (Node Package Manager) which enables us to easily install and update a vast number of third-party packages.

After downloading Node.js, you can run the installer to go through the installation procedure as described below.

First, the installer will open Node.js Setup Wizard. Click next.

The next screen will ask for the End-user License Agreement. Select the checkbox at the bottom right to provide your consent and click on Next to proceed with the installation.

The installer will ask for Destination folder and the default path set for installation is C:\Program Files\nodejs\. Click on Next button

Next you will get a prompt to allow installation of Chocolatey and required modules for C++ and Python. This requires 3 Gb of free disk space if you want to install these modules but most probably you don’t need them for now so just click Next and continue with the installation.

The installation will proceed and when complete click Finish.

You then need to verify that Node.js and NPM have been properly installed using command prompt.

In my case I used the Node.js command prompt which is accessed by clicking on the Windows start menu and located under the Node.js folder as illustrated below.

When the command prompt is opened, you can use node -v and npm -v commands to see the installed versions of Node.js and NPM respectively.

For example, I installed node version v14.17.3 and npm version 6.14.3 as shown below.

Then run the npm install -g create-react-app command to install create-react-app. This sets up everything you need to create a React application on your computer.

Creating your first React app.

Before creating the app, you need to have a project folder where the folder and files for your app are going to be stored. For example, I have created a project folder named “React Projects” in the D drive.

From the command prompt you can navigate to this project folder using cd D:\React Projects command.

We can now create our first React app inside this “React Projects” folder using the command create-react-app first_project.  Here “first_project” is the name of our app.

Do not include capital letters in the name of the app.

Depending on the speed of your internet connection, this will take some time in order to install all the necessary files for our new React app. When the creation of the app is done, you will observe the script below in command prompt.  

You can also check the path D:\React Projects to confirm whether the “first_project” React app folder has been created.

Navigate to the created app using the command cd first_project  

Use npm start command to start the development server where our application will be hosted.

The URL for accessing the React app from our local computer is given in the command prompt as http://localhost:3000

And if you are running Node.js for the first time using npm command, you need to grant permission to allow access in order to run the development server.

When this URL is accessed from a web browser you will observe the output below showing that you have then successfully run your first React app!