Create React JS Application In Windows

React Application

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

Please note that the versions of required libraries are shown here may be old but you can check the latest version online and accordingly you can setup the required libraries/frameworks in your system. The process to be followed to setup the required libraries or frameworks is same.

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.

Update/Upgrade React

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 17.0.1, so it will update to 17.0.2. Therefore it will not update to the major version. So if the React latest version is currently 18.0.2, it won’t update from 17.0.1 to 18.0.2. In this case you to use the second command with the version you want to upgrade.

For example, to update to major version 18.0.2, you can use command npm install --save react@18.0.2. The option –save is used to save the latest version on your system to avoid the need of every time update of the latest version whenever you are creating a new React project.

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:\React.

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.

At the beginning of the project creation you will see something similar to the following image:

create react js app

After tall required modules are installed, you will be able to see the following output as shown in the image:

create react js app

4. Finally I 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 (command line tool) prompt:

node.js npm start

Now if you see popup opens to allow as shown below, then allow it by clicking on Allow access button:

npm start allow access

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

Check React Version

To check the version of your react application or project, you can open the package.json file under C:\React\react-rest folder. And here you will find the react version (react, react-dom).

{
  "name": "react-rest",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.9",
    "@testing-library/react": "^11.2.5",
    "@testing-library/user-event": "^12.7.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.2",
    "web-vitals": "^1.1.0"
  },
  ...

Update for 4.0.3

Currently while creating react app using the command create-react-app <app-name>, I was getting the following error:

create react js application

Therefore you need to uninstall the global installation of the create-react-app command using the command npm uninstall -g create-react-app and it will uninstall globally:

create react js application

Finally you have to install using the command npx create-react-app <app name> as shown below:

create react js application

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

Leave a Reply

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