Create React JS Application on Windows

In this tutorial I am going to show you how we 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

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.

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 default 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.

Thanks for reading.

Soumitra Roy Sarkar

I am a professional Web developer, Enterprise Application developer, Software Engineer and Blogger. Connect me on JEE Tutorials Twitter Facebook  Google Plus Linkedin

Leave a Reply

Your email address will not be published. Required fields are marked *