Setting up React with webpack

React js is a popular framework from facebook for developing websites with dynamic changes. Although there is a sample boilerplate available to start up with react, it is important that we set up react ourselves for the first time to understand the basic working of webpack and react.
The prerequisite are that you need to have nodejs installed and set up on your laptop.
So here are the steps to set up react for the first time. The basic boilerplate is also available on this link

1)Run npm init.
2) Install webpack module
npm install --save webpack
3) Now create webpack config file by running the following command
vim webpack.config.js
4) Paste the following code:

In this code the APP_DIR is the source directory for webpack from which it will get react code and BUILD_DIR is the folder in which the generated code will be present.
5)Now create index.html and paste the following code in it

6)Now install babel loader:
npm install babel-loader babel-preset-es2015 babel-preset-react --save
7)vim .babelrc
8)Paste the following code

"presets" : ["es2015", "react"]

9)Install react module
npm install --save react react-dom
10)Make a new folder src and paste the following code in index.jsx in the folder

11)Update package.json as below:

12)To develop code use command:
npm run dev
To create minified production build
npm run build
13)To live reload page while developing
npm install -g live-reload
Check out it usage at live-reload
14)Its better to use http-server to serve react pages for development

npm install -g http-server

Check out its usage at http-server

Share post-
About Saurabh Mhatre 71 Articles
Currently working in web and hybrid application development

1 Comment

  1. Reactjs has evolved completely since the writing of this tutorial.Kindly install create-react-app instead of trying to do all above configurations

Comments are closed.