How to Install React in Windows and Linux Step By Step

React is a JavaScript library that is created by Facebook. It is a trending tool that is used to design and create the user interfaces of the Web Application. You can build more attractive SPA (Single Page Application) using React. Basically, React creates a virtual DOM (Document Object Model) instead of creating the JavaScript DOM. In this post, I will be showing you how you can install react js in Windows and Linux operating systems. Also, we will install node js in windows and Linux. But before moving to the installation process, let’s understand the overview of the React and JavaScript in.

What is React?

The first important point is the Javascript Library. It is about building javascript-driven apps. We already know that JavaScript is a client-side application. Hence, it applies to all the libraries. React apps run in the browser. They don’t run on the server. They run in the browser and this gives us a great advantage. Things happen instantly since they happen in the user’s browser. We don’t have to wait for a server response to get a new page or to render something new. The other important part is the user interface. User interfaces are basically what the user sees and React is all about using components for building these.

So, let’s proceed with the installation of React in Windows.

How to Install React Js in Windows

So before installing react, we’ll require to install Node js. Node js is a dependency manager that provides dependency. It is required to develop any React js application. For downloading, just go to the official website of Node.js and download the latest version from there.

So, currently, the latest version is 13.12.0. But, we will install the stable version that is 12.16.1 LTS. So, I recommend you to install the stable version. After downloading, let’s install it.

Install Node.js in Windows

The installation of the Node.js installer is the same as the other in Windows. Simply double click on the installer and proceed with the installation process. After completing the installation of Node.js we will install React js. So, let’s finish the installation.

After clicking on Run, a setup wizard will open. So, just follow the recommended options and click to next.

Accept the license agreement and move to the next step.

We will require installing Node.js to global so that we can access it globally.

Here the installation process is started. It will take a few seconds to complete the installation.

So, here the installation has finished.

You can check whether node.js has installed successfully or not. Just open the command prompt and simply enter the below command.

node -v

The Node.js contains the npm so with the current installation of Node.js, npm has been installed too. Similarly, you can check the npm version like the node.

npm -v

React Login and Registration App Using Laravel 7 API

Now, the Windows system is ready to install react js. Let’s create our first React js application.

Install React js in Windows

Open the terminal or command prompt or Windows PowerShell and just enter the below command.

npx create-react-app my-app

Here, my-app is the application name that will be going to create.

It will take a few minutes to install the required libraries with the react js application. So, just hold on while it completes the app setup.

my-app is the name of the application. The command npx create-react-app my-app creates a folder called my-app which is the project folder. To test if everything has been installed properly, go into the project folder and start the following command.

cd my-app
npm start

Now, go to your browser and open the URL localhost:3000

You should be able to see that your application is running. The application will look like this in your browser:

Install Node.js in Ubuntu

For installing Node.js, update the linux package first. So, it will update the new package.

sudo apt-get update 

After updating the latest package, we will install the Node.js.

We will install the latest stable version of Node.js. Open the terminal and run the below commands.

cd ~
curl -sL https://deb.nodesource.com/setup_10.x -o nodesource_setup.sh

Now, run the download script of node source.

sudo bash nodesource_setup.sh

In the next step, we will install the node.

sudo apt-get install nodejs -y

Now, we are ready with the Node and npm. To check whether the installation has completed or not we will check the node version.

node -v

Also, you can check the npm version.

npm -v

Create a new App in React

Open the terminal and create a new app in React by hitting the below command.

Install Create React App

Before starting to create the react application, we would require the development environment configuration. Hence, for the productive react development we will have to configure some tools like babel, webpack which are really a complex configuration for the newbie. 

So, next, we will install create-react-app using npm. Therefore, run the install command in the terminal as shown below.

npm install -g create-react-app

Once, it is done, you can check the version by hitting the below command.

create-react-app --version

Now, you are ready to go for creating any app in react.

Create React App in Ubuntu

For creating the react app, enter the below command on the terminal.

create-react-app hello-react

It will take a couple of minutes to finish the installation.

Basic Folder Structure

When you have created the project, you have noticed that it creates a bunch of files. Like this

Here, I will explain some of the important files and folders that you should be knowledgeable about.

1. package.json: This file contains a list of all node dependencies which are needed.
2. public/index.html: When the application starts this is the first page that has loaded. This is the only HTML file in the entire project since React is generally written using JSX. This file has a line of code <div id=”root”></div> . This line is very important because all the application components are loaded into this div.
3. src/index.js: This is a js file corresponding to index.html. This file contains the code ReactDOM.render(<App />,  document.getElementById(‘root’)); . This means the App component has to be loaded into an html element with id root. This means the div element is present in index.html.
4. src/index.css: This is the CSS file corresponding to the App component.
5. build: This folder contains the built files. You can create React apps be using either JSX, or normal javascript itself, but using JSX definitely makes things easier to code for the developer. But browsers don’t understand JSX. Therefore, JSX needs to be converted into javascript before deploying. These converted files are stored in the build folder after bundling and minification. In order to see the build folder Run the below command.

npm run build

After running the command npm run build you will see that build folder is created in your project.

Conclusion

So, in the very initial post of React, we learned how to install React in Windows as well as Ubuntu. Also, I have given you a short explanation of React and npm. That will help you out to understand the core structure of the React. I hope, you will be happy to learn here. In the upcoming post, I will try to post the real type of demo which can be implemented in your real projects. In the next post, we will grab the CRUD Application in React using the RESTful APIs. That will help you to learn the APIs implementation with the React application.