Create React Application with all standard practices, with easy formats which is known to users, so that users can easily modify the various config files as needed.

npm i -g create-react-webpack

create-react-webpack demo-app

Once installed globally, above command i.e create-react-webpack for bootstraping new application will be available through out the system.

it will create a directory demo-app in the current folder, with below file footprint.

demo-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── .babelrc
├── .eslintrc.json
├── .eslintignore
├── .prettierrc
├── .prettierignore
├── docker
│   ├── dev.js
│   ├── docker-compose.yml
│   └── Dockerfile.dev
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
│   ├── App.css
│   ├── App.js
│   ├── App.spec.js
│   └── index.js
├── webpack.config.base.js
├── webpack.config.dev.js
└── webpack.config.prod.js

create-react-webpack demo-app -e

It includes the node server for deploying into production into your demo-app, with below file footprint.

demo-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── .babelrc
├── .eslintrc.json
├── .eslintignore
├── .prettierrc
├── .prettierignore
├── docker
│   ├── dev.js
│   ├── docker-compose.yml
│   └── Dockerfile.dev
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── server
│   └── index.js
├── src
│   ├── App.css
│   ├── App.js
│   ├── App.spec.js
│   └── index.js
├── webpack.config.base.js
├── webpack.config.dev.js
└── webpack.config.prod.js

After creating project directory you can run following scripts:-

builds the application for production to the dist folder inside directory.
Uses webpack prod config along with base config

Start the production server on default port 3000.
Read files from dist folder.
before running this first run npm run build.

Start the development server on default port 8080.
Starts server in hot mode but doesn't preserve state of component if any while reloading.

Start the development server inside the docker container.
Maps machines port 8080 to docker container port 8080.
Helpful in case you want to do development inside container keeping the environment same for everyone, removes the need for changing node version for different applications.

Start the development server on default port 8080.
Starts server in hot mode preserves state of component also if any while applying hot load patch.

Launches Test Runner in the intreactive manner.

Enforces the formatting rules defined in .prettierrc.
For inforcing your rules replace the file or content of prettierrc.

Enforces the linting rules defined in .eslintrc.
For inforcing your rules replace the file or content of eslintrc.
Here we are using prettier for formatting and eslint for enforcing rules related to best coding practices.