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
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:
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
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:
Step 2: Move into the directory
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!
step 4: Run the application
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.
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
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!