How to do React JS Environment setup

ReactJS

In this post, we will learnHow to do React JS Environment setup for beginners.

These are the steps that include installing React environment

  • Visual studio code
  • Install NPM and NodeJS
  • Setting Up the ReactJS project

Install visual Studio code

Visual studio code is lightweight and cross-platform code editor.

  • To install visual studio code as per our operating system. Go to visual studio’s official website and download and install it.
  • Install two extensions to build React application in Visual code Editor.
    • Simple react snippets
    • prettier code formatter

Install NPM and Node JS

To install NodeJS first we have to go to the official website of NodeJS to download and install NodeJS. The package of NodeJS includes the NPM manager(Node Package manager).

  • Go to download and select the installer as per your operating system.
  • To verify the NodeJS and NPM installed on our system. Open the terminal and run the following commands on the command terminal of your system., Which show us the version of NODEJS and NPM

Commands To check NodeJS,NPM version

node -v  //for nodejs 
npm -v //for Node package Manager

The above command will show the version of NodeJS and NPM as shown below:

C:\Users\Administrator>node -v
v12.18.3
C:\Users\Administrator>npm -v
6.14.6

Setting Up the ReactJS project

1.Install the Create-React-App, open the command prompt, and enter this below command.

2. The Create-React-App is used to set up the ready-to-use initial app React setup and configuration.

npm install -g create-react-app

3. Switch to directory,where you want to initially setup React application by using this command

C:\Users\Administrator\cd Letlearn
C:\Users\Administrator\cd Letlearn>

After that use the Create-React-App to create a new React application. Run the below command in the terminal.

create-react-app my-first-app

The above command creates a new directory with the name my-first-app in the current directory with a set of files used to run the React application.

Output of above command will be as 

C:\Users\Administrator\Letlearn>create-react-app my-first-app

Creating a new React app in C:\Users\Administrator\Letlearn\my-first-app.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...

4.Now switch to the project directory, by using the command below command.

C:\Users\Administrator\Letlearn>cd my-first-app
C:\Users\Administrator\Letlearn>my-first-app>

5. Now run the following command to start the npm server.

C:\Users\Administrator\Letlearn\my-first-app>npm start                                                                                                                                                                                                                                                                                                                                                                                > my-first-app@0.1.0 start C:\Users\Administrator\Letlearn\my-first-app                                                                                                                                            > react-scripts start 
Starting the development server...
Compiled successfully!
You can now view my-first-app in the browser.                                                                                                                                                                                                                                                                                                                                                                                           Local:            http://localhost:3000                                                                                                                                                                            On Your Network:  http://192.168.25.130:3000

Now open the URL http://localhost:3000 in the browser, as we can see Our application up and running

If you see the the application running as above picture then it means you have sucessfully setup the development environment for React Development.

Hurray!! Start developing React apps now!!!

Related Posts