Pre-requisite for React

• NodeJS and NPM
• React and React DOM
• Webpack
• Babel

Ways to install ReactJS

There are two ways to set up an environment for successful ReactJS application. They are given below.

• Using the npm command
• Using the create-react-app command

Using the create-react-app command

If you do not want to install react by using webpack and babel, then you can choose create-react-app to install react. The 'create-react-app' is a tool maintained by Facebook itself. This is suitable for beginners without manually having to deal with transpiling tools like webpack and babel. In this section, I will be showing you how to install React using CRA tool.

Step-1:Install NodeJS and NPM

Step-2:Install React

D:\nodejs_mongodb_project\crudExpressProject> npm install -g create-react-app  

D:\nodejs_mongodb_project\crudExpressProject>create-react-app frontend_reactjs 

or instead above two

D:\nodejs_mongodb_project\crudExpressProject>npx create-react-app frontend_reactjs 

React Environment Setup

Now, open the src >> App.js file and make changes which you want to display on the screen. After making desired changes, save the file. As soon as we save the file, Webpack recompiles the code, and the page will refresh automatically, and changes are reflected on the browser screen. Now, we can create as many components as we want, import the newly created component inside the App.js file and that file will be included in our main index.html file after compiling by Webpack.

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 which are shown below.

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit src/App.js and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

make changes App.js in its code which are shown below.

    import React from 'react';  
    import logo from './logo.svg';  
    import './App.css';  
      
    function App() {  
      return (  
        <div className="App">  
          <header className="App-header">  
            <img src={logo} className="App-logo" alt="logo" />  
            <p>  
              Welcome To JavaTpoint.  
      
          <p>To get started, edit src/App.js and save to reload.
  
            </p>  
            <a  
              className="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.

D:\nodejs_mongodb_project\crudExpressProject\frontend_reactjs> cd frontend_reactjs 
D:\nodejs_mongodb_project\crudExpressProject\frontend_reactjs>npm start 

Next, if we want to make the project for the production mode, type the following command. This command will generate the production build, which is best optimized.

D:\nodejs_mongodb_project\crudExpressProject\frontend_reactjs>npm build  

Using the npm command

Step-1:Install NodeJS and NPM

To verify NodeJS and NPM, use the command shown in the below image.

c> node -v
c> nmp -v

Step-2:Install React and React DOM

D:\nodejs_mongodb_project\crudExpressProject>mkdir frontend_reactjs 
D:\nodejs_mongodb_project\crudExpressProject>cd frontend_reactjs 
D:\nodejs_mongodb_project\crudExpressProject\frontend_reactjs>npm init -y

After creating a package.json file, you need to install react and its DOM packages using the following npm command in the terminal window as shown in the below image.

D:\nodejs_mongodb_project\crudExpressProject\frontend_reactjs>npm install react react-dom --save 

Step-3:Install Webpack

Webpack is used for module packaging, development, and production pipeline automation. We will use webpack-dev-server during development, webpack to create production builds, and webpack CLI provides a set of commands. Webpack compiles these into a single file(bundle). To install webpack use the command shown in the below image.

D:\nodejs_mongodb_project\crudExpressProject\frontend_reactjs>npm install webpack webpack-dev-server webpack-cli --save 

Step-4:Install Babel

Babel is a JavaScript compiler and transpiler used to convert one source code to others. It compiles React JSX and ES6 to ES5 JavaScript which can be run on all browsers. We need babel-loader for JSX file types, babel-preset-react makes your browser update automatically when any changes occur to your code without losing the current state of the app. ES6 support requires babel-preset-env Babel preset. To install webpack use the following command shown in the below image.

D:\nodejs_mongodb_project\crudExpressProject\frontend_reactjs>npm install babel-core babel-loader babel-preset-env babel-preset-react babel-webpack-plugin --save-dev  

Step-5:Create Files

To complete the installation process, you need to add the following files in your project folder. These files are index.html, App.js, main.js, webpack.config.js and, .babelrc. You can create these files by manually, or by using the command prompt.

D:\nodejs_mongodb_project\crudExpressProject\frontend_reactjs>touch index.html  
D:\nodejs_mongodb_project\crudExpressProject\frontend_reactjs>touch App.js  
D:\nodejs_mongodb_project\crudExpressProject\frontend_reactjs>touch main.js  
D:\nodejs_mongodb_project\crudExpressProject\frontend_reactjs>touch webpack.config.js  
D:\nodejs_mongodb_project\crudExpressProject\frontend_reactjs>touch .babelrc  

follow link:ReactJs Installation

In React application, there are several files and folders in the root directory. Some of them are as follows:

• node_modules: It contains the React library and any other third party libraries needed.
• public: It holds the public assets of the application. It contains the index.html where React will mount the application by default on the
  element.
• src: It contains the App.css, App.js, App.test.js, index.css, index.js, and serviceWorker.js files. Here, the App.js file always responsible for displaying the output screen in React.
• package-lock.json: It is generated automatically for any operations where npm package modifies either the node_modules tree or package.json. It cannot be published. It will be ignored if it finds any other place rather than the top-level package.
• package.json: It holds various metadata required for the project. It gives information to npm, which allows to identify the project as well as handle the project?s dependencies.
• README.md: It provides the documentation to read about React topics.