React Installation

(How to install React or React application setup)

We must have installed Node.js on our system and set a development

environment using npm package manager.

Install Node.js

You can download it from https://nodejs.org/en/

After downloading, you have to install it on your system.

Prepared by Shobha Rani, Dr. AIT Page 1

Once you have installed Node.js on your system, open node.js command
prompt.

o To check your version, run node -v in a terminal/console window.

o To check npm version, run npm -v in a terminal/console window.

Use npm to Install React

Set up React Environment

You can set up a React environment with create-react-app, which comes with boilerplate code
with everything set up to build your project. It creates a live development server
at localhost:3000 where 3000 is the port number, it uses webpack to automatically compile
React, ES6 and JSX.

To set up create-react-app, ensure you have Node and npm installed on your computer. Note
that npm is install automatically when you install Node

You can install create-react-app by running the following command in your terminal.

>npx create-react-app test

Prepared by Shobha Rani, Dr. AIT Page 2

OR

>npm install create-react-app -g

>create-react-app test

The test represents the name of your project. You can call it anything you want.

Prepared by Shobha Rani, Dr. AIT Page 3

The create-react-app will set up react environment with everything you need. When it is
completed, run the react application with the following commands.

>cd test
>npm start

A new browser window will pop up with your newly created React app hosted on
localhost:3000. If it does not, go to your browser and type localhost:3000.

Your react app will run on that portal, just as seen above.

The react environment from your create-react-app includes these files/folder

• node_modules — contains all the node dependencies.

• public — public files that are served.

• src — source code of your react app.

• gitignore — records which files git should ignore.

• package.json — contains various metadata relevant to the project.

• package-lock.json — contains an exact version dependency tree.

Prepared by Shobha Rani, Dr. AIT Page 4