June 2, 2020
React Js Installation Guide for Windows

React Js Installation Guide for Windows

React Js Installation is pretty much like that of Angular, but you can directly add react js to your website as a library using js. Here, we would discuss creating react app from scratch with node.js as a server. If you want to use react js with dot net then, the dot net has a separate react js web application on it, but this post would be strictly for node.js at the server-side. Also, let’s not get confused with next.js which is react js framework, to build static and also server‑rendered web applications using react. But, here we would strictly use react js as front end build where there is no connection to the database. One, can’t begin with react js installation until you have installed npm and also git as they are kind of prerequisites.

React Js Installation Pre-requisites

1.Install Git

All the developers have Git installed already, but if you don’t so do install it as you can work with CMD, but git is always the priority. You can download git bash editor from below link, it won’t take much time:


2. Download NPM 

As discussed above, this article is for node.js as server-side so having npm and node is mandatory. Also, Node >= 8.10 and version npm >= 5.6 on your machine is the requirement, and if you have a lesser version than these then upgrade it. You can check versions using commands:

npm -v

node -v

React Js Installation Guide for Windows

And, just in case you have not installed node.js, then install using the link below. Always remember that if you install node.js, npm gets installed with it but not the vice-a-versa.


React Js Installation Steps

We have divided react js installation in 5 steps for better understanding where we create a react app using npm, then look at its folder structure, and finally edit it to get started with it.

Step 1: Create React js application

 React Js Installation Guide for Windows

npm is a package runner tool that comes with npm and would install all packages react js requires. my-app here is the name of the application, you can customize to what you like. This step would actually take time, depending on RAM but around usually 5 mins to set it up. After it is set up, the screen would show something like this:

React Js Installation Guide for Windows

Step 2: Move into the directory

React Js Installation Guide for Windows

cd is basic change directory command to get into the folder In windows you can do it directly with GUI too.

step 3:Open the folder using IDE

Now, IDE preference is a complete developer’s comfort. Sublime, Visual Studio Code, or any other you like. Here, we are using Visual Studio Code, so don’t get confused if it looks a tiny bit different at your end, and also color could defer!

React Js Installation Guide for Windows

step 4: Run the application

React Js Installation Guide for Windows

Type npm start in command prompt which would launch the web application on standard port. You can see how the application looks like after launch in the browser from below pic. Now, react js installation is successful, but we will also look at how to edit the launch page and configure it, to get wholesome idea of the application.

React Js Installation Guide for Windows

step 5: configure the starter page

Go to the src folder and edit the App.js file as the starter page stated! And, of course we are going to write Hello, World! And then save the changes, which would automatically be reflected in the browser window

React Js Installation Guide for Windows

React Js Installation Guide for Windows

This was a complete and short tutorial on react js installation. If you already have git and node.js installed then, the entire process will take 15 mins maximum. But, for a complete newbie, it could take more also, so don’t worry if you have completed this tutorial, congratulations as you are going to love react js!

Similar Posts:







Engineer Diaries started with the need to bridge the huge gap in what we are taught vs what the industry demands. We are based in Delhi, India but our blog is for everyone, in and outside tech industry❤ Feel free to reach out to us at engineerdiaries@gmail.com for any business/personal query.

View all posts by admin →

Leave a Reply