mkdir ex-project cd ex-project npm init -y mkdir src touch webpack.config.js .babelrc

cd src touch index.html index.js cd .. npm i react react-dom --save npm i webpack webpack-cli @babel/core babel-loader @babel/preset-env @babel/preset-react html-webpack-plugin html-loader webpack-dev-server --save-dev

in package.json:

"scripts": {
  "start": "webpack-dev-server --open --mode development",
  "build": "webpack --mode production",
  "test": "echo \"Error: no test specified\" && exit 1"
},

in .babelrc:

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

in webpack.config.js:

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"
    })
  ]
};

make index.html have html code with a div in the body given an id name of "root" ensure package.json main is index.js

cd src touch App.js

in index.js is where we import our App component and where we inject it into our index.html through React DOM

in App.js create a App component that says HI in the render method