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
Please follow the below steps one by one in order to create React application.
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
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.
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.
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
Next type command
npm start on cmd prompt
Now if you see popup opens to allow as shown below, then allow it
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.
Final result on browser
Changing default 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
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.Tags: node.js • react js app