React JS Setup using Npm Babel and Webpack

Configuring Babel :-

React Js Contains ES6 based code which most browsers doesn’t support at this point of time .Hence we need some tool to convert our ES6 code to plain vanilla javascript , and the tool is Babel . Let’s install all babel related dependencies one by one . Type in following commands one by one .

Now  install react related dependencies .

Configuring Webpack:-

Webpack is the bundler we will use, which will bundle all our javascript files.Its is basically a module bundler which bundles all our Javascript modules and assets into one or more bundles.

let’s install webpack using NPM

Install  webpack dev server , we use it for live reloading . It helps us to provide fast in memory access to assets bundled by webpack.

Now our webpack requires some config files let’s create a file named webpack.config.js

webpack.config.js:-

You Can see here , entry and output are mandatory to be provided in this config file .Our UI will run on port 8090 as configured in webpack.config.js  Lets go ahead and create a file known as main.js under hello-world directory.

main.js

Create A Basic  React Component :-

Create a file named Hello.jsx .

This is our basic component which just prints a basic html .You can see we are importing this in our main.js above

Create Index File:-

We are creating a file named as index.html.Our react JS transpiled minified code is added in index.html.

index.html

A important point to remember here is that we have referred index.js here , which is referred from memory .Webpack loads index.js into memory if you are running in dev mode.Update package.json to run webpack dev server as follow add  “start”: “webpack-dev-server –hot” under scripts property in package.json.