React Js Environment Setup with WebPack

React Js provides an inbuilt CLI environment setup, create-react-app. And setup with create-react-app is very simple and easy to start with.
Q. So why we need to know about setup react js environment with WebPack and babel ?
A. Because basically in the hood most of the things are getting setup with babel and WebPack, the only part is how much you can go deeper and get to know the basics of cli environment setup. To know the basics of work you are doing, will help you to blend things according to you. So let's get started.
Create a folder named react_setup and open this folder in your terminal.
We will setup webpack and webpack-cli as developer dependencies:-

npm install webpack webpack-cli -D

It will bring all the webpack and webpack-cli related node modules in the node-module folder.
Now we will bring our babel developer dependencies to node-modules:-

npm install babel-core babel-loader babel-preset-env babel-preset-react -D

there are few more babel and webpack dependencies which we will bring later in this setup process.
Now its time to bring react and react-dom to our project as dependencies. So back to the terminal and write command :-
npm install react react-dom - save
 - save will setup react as dependencies in our package.json
So lets look at our current package.json

{
 "name": "react_setup",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
 "test": "echo \"Error: no test specified\" && exit 1"
 },
 "keywords": [],
 "author": "",
 "license": "ISC",
 "devDependencies": {
 "babel-core": "⁶.26.3",
 "babel-loader": "⁷.1.4",
 "babel-preset-env": "¹.7.0",
 "babel-preset-react": "⁶.24.1",
 "webpack": "⁴.12.1",
 "webpack-cli": "³.0.8"
 },
 "dependencies": {
 "react": "¹⁶.4.1",
 "react-dom": "¹⁶.4.1"
 }
}

So now we got all the devDependencies and dependencies in our package.json and all dependencies are loaded in the node module. If you don't wanna do the upper setup the you can copy this package.json in your project folder and run command npm install will setup the project basics.
Now move to the webpack configuration for our project.
so create a file webpack.config.js from your favourite text editor or from terminal with command touch webpack.config.js (for mac)
Open webpack.config.js in your text editor and start the configuration setup :-

var webpack = require('webpack');
var path = require('path');
module.exports = {
 entry: path.resolve(__dirname, 'src') + '/index.js',
 output: {
 path: path.resolve(__dirname, 'public'),
 filename: 'bundle.js',
 publicPath: '/public/'
 },
 module: {
 rules : [
 {
 test: /\.js$/,
 exclude: /node_modules/,
 use: {
 loader: "babel-loader"
 }
 }
 ]
 },
 watch: true
};

As per this webpack configuration, our project entry path is index.js which lies in the folder named 'src' and our output path will be a folder named 'public' and our output file name is bundle.js and we are also defining a publicPath as public folder.
Now to setup rules of our bundle creation we will define module and rules as an array of objects which will use babel-loader to convert our es6 (ECMA Script 2015 or later) to es5, because of the majority of browsers still only understands es5 and we also want our project to be backward compatible to older browsers also.
now its time to setup babel presets:-
So create a file named .babelrc and paste the code :-

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

Now we are all done with the environment setup, time to start with our prime goal of writing React :-
So create a folder named 'src' (mkdir src)
and create a file index.js (important - because we told to webpack to start our bundle from index.js only). So our index.js will look like this.
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(<div>React starts</div>, document.getElementById('react-root'));
now we will wonder with index.html how we got this document.getElementById of react-root element. You are correct. We need an index.html which will lies in the public folder.
Create a folder named 'public' and create a file index.html in public folder.
index.html will look like:-

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>Page Title</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
 <div id="react-root"></div>
 <script src="bundle.js"></script>
</body>
</html>

its time to check everything is working properly :-
So we need to start webpack, but we havent setup and build or start command to package.json, so move to package.json and find scripts and paste below in the scripts;-

"build": "webpack -p"

it will create a production ready webpack bundle.js file
so hit the command as

npm run build

Now check your public folder, you will find a bundle.js which is create by webpack.
now you can run your index.html by double clicking your file in the react_setup/public folder:-

Project Output

So our setup is done, enjoy the development. If you like this tutorial give your comments and likes and fell free to ask your doubts.