How to install React

How to install React and what is the requeirment

Pre-requisite for ReactJS

1. NodeJS and NPM
2. React and React DOM
3. Webpack
4. Babel

Ways to install ReactJS

Using the create-react-app command

Install NodeJS and NPM

NodeJS and NPM are the platforms need to develop any ReactJS application. You can install NodeJS and NPM package manager by the link given below.

https://nodejs.org/en/

After Installation check npm version and verify installed successfully or not.

npm -v

Create a root folder with the name reactprojects on the desktop or where you want. Here, we create it on the desktop. You can create the folder directly or using the command given below.

mkdir reactprojects
cd reactprojects

Create React App Using npm

npm install -g create-react-app

Create a new React project

After the installation of React, you can create a new react project using create-react-app command. Here, I choose reactfirstproject name for my project.

create-react-app reactfirstproject

NOTE: You can combine the above two steps in a single command using npx. The npx is a package runner tool that comes with npm 5.2 and above version.

npx create-react-app reactfirstproject

The above command will install the react and create a new project with the name reactfirstproject. This app contains the following sub-folders and files by default which can be shown in the below image.

Now, to get started, open the src folder and make changes in your desired file. By default, the src folder contain the following files shown in below image.

For example, I will open App.js and make changes in its code which are shown below.

App.js

import React from 'react';  
import logo from './logo.svg';  
import './App.css';  
  
function App() {  
  return (  
    <div App\View\Helper\ShortCodeHelper="App">  
      <header App\View\Helper\ShortCodeHelper="App-header">  
        <img src={logo} App\View\Helper\ShortCodeHelper="App-logo" alt="logo" />  
        <p>  
          Welcome To Easytolearning.  
  
      <p>To get started, edit src/App.js and save to reload.</p>  
        </p>  
        <a  
          App\View\Helper\ShortCodeHelper="App-link"  
          href="https://reactjs.org"  
          target="_blank"  
          rel="noopener noreferrer"  
        >  
          Learn React  
        </a>  
      </header>  
    </div>  
  );  
}  
  
export default App;  

After completing the installation process, you can start the server by running the following command.

cd reactfirstproject  
npm start

It will show the port number which we need to open in the browser. After we open it, you will see the following output.