React JS Setup using Npm Babel and Webpack

With the introduction of react JS , the way we build our UI component has changed. things that we build our components in react so you must be aware that the learning curve of react is very small but there are some tools that we need to understand for going into react , so one of those tools are webpack and Babel.So in this article we will

do React JS Setup using Npm Babel and Webpack.

We will not cover the full understanding of webpack in Babel , but we will see how we can use this in our react applications .

So guys we will be using Windows in our demonstration but you can use Linux as well so the prerequisite of starting this blog post is that you need to have node JS installed .

Let’s go to this URL and download node js. Please download the latest version of node js .

So once you have downloaded node JS with you have to go to command prompt and verify by typing node -v

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 our webpack requires some config files let’s create a file named webpack.config.js

webpack.config.js:-

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

<span style="font-family: 'book antiqua', palatino, serif;">config={

entry:'./main.js',

output:{

path:'/target',

filename:'index.js',

},

devServer:{

inline:true,

port:8090

},

module:{

loaders:[

{

test:/\.jsx?$/,

exclude:/node_modules/,

loader:'babel-loader',

query:{

presets:['es2015','react']

}

}

]

}

}

module.exports=config;

</span>

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-worlddirectory.

A important point to remember here is that we have referred index.jshere , 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.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

<span style="font-family: 'book antiqua', palatino, serif;">{

"name":"helo-world",

"version":"1.0.0",

"description":"",

"main":"index.js",

"scripts":{

"start":"webpack-dev-server --hot"

},

"author":"",

"license":"ISC",

"dependencies":{

"babel-core":"^6.26.0",

"babel-loader":"^7.1.2",

"babel-preset-es2015":"^6.24.1",

"babel-preset-react":"^6.24.1",

"react":"^16.2.0",

"react-dom":"^16.2.0",

"webpack":"^3.10.0"

}

}

</span>

Running the Application:-

Type “npm start” , you get following output . If you face any issues kindly comment.