How To Install React JS Step By Step

WebSolutionStuff | Aug-08-2022 | Categories : React JS

In this article, we will see how to install React JS step by step. we will see how to set up an environment for successful React development. React JS is an open-source front-end JavaScript library for building user interfaces. React JS is maintained by Facebook and a community of individual developers and companies.

So, let's see install react js for beginners step by step or how to install react js using npm

For React JS we need  NodeJS and NPM. If you don't have it installed on your system, then you need to add the official Node.js website to download and install Node, which also includes NPM (Node Package Manager).

After you download and install Node, start your terminal/command prompt and run the below command and check the node version installed on your system.

node -v
npm -v

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

  1. Using the npm command
  2. Using the create-react-app command

1. Using the npm command

Step 1: Create the Root Folder

Create a root folder with the name reactAppInsatllExample on the specific folder or where you want. Here, we create it on the C:\ Drive. You can create the folder directly or using the command given below.

C:\Users\dell\Desktop>mkdir reactAppInsatllExample
C:\Users\dell\Desktop>cd reactAppInsatllExample

Now, you need to create a package.json file. To create any module, it is required to generate a package.json file in the project folder. You need to run the npm init command from the command prompt.

npm init
or
npm init -y

 

 

Step 2: Install React and React DOM

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

npm install react --save
npm install react-dom --save

 

Step 3: Install Webpack

Now, we will 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 to provide a set of commands.

npm install webpack --save
npm install webpack-dev-server --save
npm install webpack-cli --save
// or you can install all of them in single command
npm install webpack webpack-dev-server webpack-cli --save

 

Step 4: Install babel

Install babel, and its plugins babel-core, babel-loader, babel-preset-env, babel-preset-react and, html-webpack-plugin

npm install babel-core --save-dev
npm install babel-loader --save-dev
npm install babel-preset-env --save-dev
npm install babel-preset-react --save-dev
npm install html-webpack-plugin --save-dev

// or you can install all of them in single command

npm install babel-core babel-loader babel-preset-env babel-preset-react html-webpack-plugin --save-dev

 

 

Step 5: Create the Files

To complete the installation, we need to create certain files namely, index.html, App.js, main.js, webpack.config.js, and, .babelrc. You can create these files manually or, using the command prompt.

type nul > index.html
type nul > App.js
type nul > main.js
type nul > webpack.config.js
type nul > .babelrc

 

Step 6: Set Compiler, Server And Loaders

Open the webpack-config.js file and add the following code. We are setting webpack entry point to be main.js.

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
   entry: './main.js',
   output: {
      path: path.join(__dirname, '/bundle'),
      filename: 'index_bundle.js'
   },
   devServer: {
      inline: true,
      port: 8001
   },
   module: {
      rules: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
               presets: ['es2015', 'react']
            }
         }
      ]
   },
   plugins:[
      new HtmlWebpackPlugin({
         template: './index.html'
      })
   ]
}

 

 

Step 7: index.html

Now, we will create the index.html file.

<!DOCTYPE html>
<html lang = "en">
   <head>
      <meta charset = "UTF-8">
      <title>How To Install React JS Step By Step - Websolutionstuff</title>
   </head>
   <body>
      <div id="app"></div>
      <script src="index_bundle.js"></script>
   </body>
</html>

 

Step 8: App.jsx and main.js

This is the first React component.

App.js

import React, { Component } from 'react';
class App extends Component{
   render(){
      return(
         <div>
            <h1>Hello World</h1>
         </div>
      );
   }
}
export default App;

We need to import this component and render it to our root App element, so we can see it in the browser.

 

 

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';

ReactDOM.render(<App />, document.getElementById('app'));

Whenever you want to use something, you need to import it first.

Create a file with the name .babelrc and copy the following content to it.

{
"presets":["env", "react"]
}

 

Step 9: Running the Server

You can start the server using the below command.

npm start

 

Step 10: Generating the bundle

Generate the bundle you need to run the build command.

npm run build

 

2. Using the create-react-app command

Instead of using webpack and babel, you can install React JS more simply by installing create-react-app.

Step 1: Install create-react-app

If you have npx and Node.js installed, you can create a React application by using create-react-app.

Run this command to create a React application.

npx create-react-app reactJSInstallExample

 

 

Step 2: Run the React Application

Now you are ready to run your first React application.

cd reactJSInstallExample

 

Step 3: Run the project

Finally, run the project using the start command.

npm start

open your browser and type localhost:3000 in the address bar.

 


You might also like:

Recommended Post
Featured Post





Follow us
facebooklogo github instagram twitter