React JS

React JS Setup using Npm Babel and Webpack

January 28, 2018

885

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

v8.7.0

v8.7.0

So once you got the output as I have shown above that means your node JS is installed

Now navigate to any of the folder where you want to create your project and create a folder named as hello-world and initialize with npm .

We Will be using npm over here so , npm is a package manager for node based applications , similar to what is knwon as maven for java based applications.

We Will type npm init to initialize npm .
Will be getting one prompt so just accept the default for all the prompts whatever you get and continue.
npm init will create a package.json file in your working directory .
We Create One folder named as hello-world and then run npm init as shown below.

C++

mkdir hello-world cd hello-orld npm init

1
2
3

mkdir hello-world
cd hello-orld
npm init

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 .

>npm install -g babel
>npm install -g babel-cli
>npm install --save babel-core babel-loader babel-preset-react babel-preset-es2015

>npm install -g babel

>npm install -g babel-cli

>npm install --save babel-core babel-loader babel-preset-react babel-preset-es2015

Now install react related dependencies .

npm install --save react
npm install --save react-dom

1 2	npm install --save react npm install --save react-dom

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

npm install --save webpack

1	npm install --save webpack

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

npm install --save  webpack-dev-server

1	npm install --save webpack-dev-server

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

webpack.config.js:-

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;

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;

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

<span style="font-family: 'andale mono', monospace;">import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './Hello.jsx';

ReactDOM.render(<Hello />, document.getElementById('hello'));</span>

<span style="font-family: 'andale mono', monospace;">import React from 'react';

import ReactDOM from 'react-dom';

import Hello from './Hello.jsx';

ReactDOM.render(<Hello />, document.getElementById('hello'));</span>

Create A Basic React Component :-

Create a file named Hello.jsx .

<span style="font-family: 'andale mono', monospace;">import React from 'react';

class Hello extends React.Component {

   render() {
     const element=  <div>
            <h1>Hello World from ReactJS</h1>
            <hr/>
            Yo Yo ! Welcome!
         </div>;
                return (element);
   }
}

export default Hello;</span>

<span style="font-family: 'andale mono', monospace;">import React from 'react';

class Hello extends React.Component {

render() {

const element= <div>

<h1>Hello World from ReactJS</h1>

<hr/>

Yo Yo ! Welcome!

</div>;

return (element);

}

export default Hello;</span>

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

<span style="font-family: 'andale mono', monospace;"><!DOCTYPE html>
<html lang = "en">
   <head>
      <meta charset = "UTF-8">
      <title>React App</title>
   </head>
   <body>
      <div id = "hello">
      </div>
      <script src = "index.js"></script>
   </body>
</html></span>

<head>

<title>React App</title>

</head>

<body>

</div>

</body>

</html></span>

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.

<span style="font-family: 'andale mono', monospace;">{
  "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>

<span style="font-family: 'andale mono', monospace;">{

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

output:-

Download Code

“Its Always Better To Learn and Share Instead Learn and Forget”

React JS Setup using Npm Babel and Webpack

React JS Setup using Npm Babel and Webpack:-

Configuring Babel :-

Configuring Webpack:-

Create A Basic React Component :-

Create Index File:-

Download Code

Related Posts:-

5 COMMENTS

LEAVE A REPLY Cancel reply

MOST POPULAR

Demystifying How Authentication Works In Spring Security

JPA EntityManager Example

hashcode() and equals() method in java

Spring MVC Vs Spring Boot

HOT NEWS

Spring Boot Jersey Example

Demystifying How Authentication Works In Spring Security

Deploy React JS in Tomcat

Spring Boot Jersey Jboss RestEasy Issue RESTEASY003900

POPULAR POSTS

JPA EntityManager Example

How to add Spring Boot Custom Banner

Spring Boot Profiling – Configure for Different Environments

POPULAR CATEGORY

React JS – introduction to JSX and Internal Working

React JS Components