Set up a webpack environment for react JS

Set up a webpack environment for ReactJS:
I am writing an article that how to set up a web-pack environment for ReactJS with babel. Trying to cover all the steps those will help set up the development environment for the development of reactJS interface in webpack. Keep reading on. Let us understand what are all we need to run the reactJS with webpack development environment.

1. NPM
2. Webpack Configuration
3. Babel Configuration
4. ReactJS library 

The steps setup reactJS in webpack.
Step 1:
NPM: Let us start with NPM, its a node package manager and it is not compulsory that we need NPM to run the react. But it makes very easy to write the code and update. Download the NodeJS from NodeJS Once you install you can run the command in command prompt or terminal node -v if it gives the version that confirms you have NodeJS.

Run the below command

//Run the command
mkdir reactDemoApp

//Navigate to reactDemoApp
cd reactDemoApp

//Run the command
npm init -y

Npm has been set up successfully.
Step 2:
Webpack Configuration:

//Run the command
npm i webpack --save-dev

//once the installation is done you would see: found 0 vulnerabilities

//Run the command
npm i webpack-cli --save-dev

//once the installation is done you would see: found 0 vulnerabilities

//Run the command
mkdir -p src

//Now open the file package.json and the replace the below code

"scripts": {
"build": "webpack --mode production"
}

Step 3:
Babel Configuration

//Run the below command
npm i @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev
//once the installation is done you would see: found 0 vulnerabilities
Create a file with the name : .babelrc in the root directory and paste the below code
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}

Create a file with the name: webpack.config.js
Step 4:
ReactJS library

//Run the below command
npm i react react-dom

Create the following directory with a file.
src/js/component/userregistration.jsx and paste the below content

import React, { Component } from "react";
import ReactDOM from "react-dom";
class Userregistration extends Component {

  render() {
    return (
      <form id="user-form" className="form"> 
        <input
          className="form-group "
          text="User name"
          type="text"
          id="username"
          placeholder="User name"
        />
      </form>
    );
  }
}
export default Userregistration;

ReactDOM.render(<Userregistration />, document.getElementById('user-registration'));

Create the file:./src/index.js
Step 5:
Now install required plugins for webpack
HTML webpack plugin
npm i html-webpack-plugin html-loader –save-dev
Update the web pack Configuration file

const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader"
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/index.html",
      filename: "./index.html"
    })
  ]
}

webpack dev server
npm i webpack-dev-server –save-dev
Your final files content should be as below
.babelrc

{
    "presets": ["@babel/preset-env", "@babel/preset-react"]
}

package.json

{
  "name": "reactdemoapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --open --mode development",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/preset-env": "^7.5.5",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.6",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.39.3",
    "webpack-cli": "^3.3.7",
    "webpack-dev-server": "^3.8.0"
  },
  "dependencies": {
    "react": "^16.9.0",
    "react-dom": "^16.9.0"
  }
}

webpack.config.js

const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
    entry : "./src/index.js",
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader"
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/index.html",
      filename: "./index.html"
    })
  ]
};

src/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Webpack with react</title>
</head>
<body>
    <div class="container">
        <div class="row mt-5">
            <div class="col-md-4 offset-md-1">
                <p>User registration</p>
                <div id="user-registration">
                    <!-- form -->
                </div>
            </div>
        </div>
    </div>
</body>
</html>

src/index.js

import Userregistration from "./js/components/userregistration.jsx";

src/js/components/userregistration.jsx

import React, { Component } from "react";
import ReactDOM from "react-dom";
class Userregistration extends Component {

  render() {
    return (
      <form id="user-form" className="form"> 
        <input
          className="form-group "
          text="User name"
          type="text"
          id="username"
          placeholder="User name"
        />
      </form>
    );
  }
}
export default Userregistration;

ReactDOM.render(<Userregistration />, document.getElementById('user-registration'));

Now run : npm start
You should see the output

Also, Read : React vs angular