Create react app with babel and webpack 5

A short and quick demo

Step 1 — Create your project folder

$ mkdir my-react-app
$ cd my-react-app

Step 2 — Init your node project

# init your node project
$ yarn init

Step 3 — Install related package

# add react and react-dom to your project
$ yarn add react react-dom
# add babel to your development environment
$ yarn add @babel/core @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-properties --dev
# add webpack and necessary package to your development environment
$ yarn add webpack webpack-cli webpack-dev-server babel-loader css-loader style-loader html-webpack-plugin --dev

Step 4 — Create babel and webpack config files

# create your babel config file
$ touch .babelrc
# create webpack config file
$ touch webpack.config.js

Step 5 — Create your project files

# create src & public folder
$ mkdir src public
# create a template html and entry point
$ touch public/index.html
$ touch src/index.js
$ touch src/App.js

Step 6 — Set up configuration

.babelrc

webpack.config.js

Step 7 — Create some content

src/App.js

src/index.js

src/index.html

Step 8— Add script to package.json

# add scripts and change package.json
"scripts": {
   "dev": "webpack serve --mode development",                            
   "build": "webpack --mode production"
  },

Step 9— Run yarn dev

DONE