Create React JS Application on Windows

In this tutorial I am going to show you how you can create React JS application in Windows environment. Before reading this tutorial please make sure you have installed the node.js in your system. Please have a look at this here for node.js installation.

If you want to update the existing React version then you can use command npm update react or npm install --save react@<react version>. The first command will upgrade your existing React to the latest minor version. For example, if your existing React version is 16.1, so it will update to 16.6. Therefore it will not update to the major version. So if the React latest version is currently 17.0, it won’t update from 16.1 to 17.0. In this case you to use the second command with the version you want to upgrade.

Prerequisites

I’ll assume you do have some familiarity with HTML and JavaScript, but you should be able to follow along even if you haven’t used them before.

Please follow the below steps one by one in order to create React application.

Installation Instructions

1. Open command prompt and navigate to the desired directory where you want to create React application. In this example I am going to create React application under C:\workspace.

2. Type the below command in order to create the React application. The below command will run required configurations

npm install -g create-react-app

wait till it finishes its execution. It configures React application command to be used to create React JS application as used in below step.

create-react-app command

3. Now type command create-react-app react-rest in the command prompt and wait till it finishes its execution. It creates react-rest folder and all required modules inside the react-rest folder for the application.

create react js app

4. Finally we will test the application using command npm start. A browser with URL http://localhost:3000 gets opened automatically. The browser title is displayed as “React App”.

First move to the directory react-rest by using below command on cmd prompt:

>cd react-rest

Next type command npm start on cmd prompt

node.js npm start

Now if you see popup opens to allow as shown below, then allow it

npm start allow

Once you allow you would be able to see below texts on cmd prompt and a browser automatically opens with react app URL. The URL is displayed on the cmd prompt. If browser does not open then you need to open it and hit the URL you get to see on cmd prompt.

react application success

Final result on browser

react app

Changing Port

Port 3000 is the default port of node.js server. If you want to change the default port then you can update the line “start”: “react-scripts start” in package.json file as below:

Linux and MacOS: “start”: “export PORT=3006 react-scripts start”
Windows: “start”: “set PORT=3006 && react-scripts start”

Alternatively in Windows OS, you can create .env file under the project’s root directory and specify the port in this file:

PORT=3005

On every update to the js file or any file you don’t need to stop start the application. It automatically reflects the changes on the browser. So you can continue updating to your files.

That’s all about creating new React application or project in Windows system.

Leave a Comment