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.
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 > firstname.lastname@example.org 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!!!