Post
Ask Question

React With Babel And Webpack

Hello guys!

In my previous article, CRUD Opration with React and node,Mongodb, we discussed how to perform insert update delete and select data using ReactJS and Node,Express and Mongodb. 

In this article, we’ll learn how to create react applications using Babel and Webpack. So let me first give you a brief indrocution about Babel and Webpack .

Webpack

A Webpack is a module bundler. Webpack takes modules with dependencies and generates static assets representing those modules..

Babel

Babel is a Javascript compiler, best know for its ability to turn it into ES6 (the next version of javascript) .

EcmaScript6

A relatively new Javasript standard, EcmaScript 6  is a deprecated name for the EcmaScript 2015 language specification. ES2015 is the 6th version of EcmaScript, thus why it was previously referred to as ES6. For reasons best known to themselves, those responsible for defining the language standard renamed it to ES2015 with the final version of the v6 spec.

Let us start to create application

The first step is to Create a new folder, ReactWithBabelWebpack, and right click on Folder and Git Bash here or navigate to folder and run npm init command. After that package.json file is created in our application.

  1. npm init   
 

The second step is we need to add react and react-dom dependencies in our application so we add dependencies using the below given command.

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

 

The third step is add webpacks development dependencies. The main advantage of webpack is module bundler. All our js and jsx files is in one bundle of js files.

  1. npm install --save-dev webpack   
  2. npm install webpack-dev-server  
 
 
The forth step is to add babel dependencies for Javascript compiler.
  1. npm install --save-dev babel-loader  
  2. npm install --save-dev babel-core   
  3. npm install --save-dev babel-preset-es2015   
  4. npm install --save-dev babel-preset-react   
 
 

The next step is to create index.html file,

  1. <!doctype html>  
  2. <html>  
  3.   <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>React With Babel and Webpack</title>  
  6.       
  7.   </head>  
  8.   <body>  
  9.     <div id="div"></div>  
  10.      
  11.     <script src="bundle.js"></script>  
  12.   </body>  
  13. </html>  

main.js file

  1.    
  2. import HelloWorld from './helloWorld.jsx';    

helloWorld.jsx file

  1. import React from 'react';  
  2. import ReactDOM from 'react-dom';  
  3.    
  4. class HelloWorld extends React.Component {  
  5.   render() {  
  6.     return (    
  7.       <div>    
  8.           <h1>Hello, world!</h1>   
  9.           <br/>  
  10.           <h2>Welcome to React App With Babel and Webpack </h2>   
  11.            
  12.      </div>    
  13.  )     
  14.   }  
  15. }  
  16.    
  17. ReactDOM.render(<HelloWorld/>, document.getElementById('div'));  

webpack.config.js file

  1. var path = require('path');  
  2. var webpack = require('webpack');  
  3.    
  4. module.exports = {  
  5.   entry: './main.js',  
  6.   output: { path: __dirname, filename: 'bundle.js' },  
  7.   module: {  
  8.     loaders: [  
  9.       {  
  10.         test: /.jsx?$/,  
  11.         loader: 'babel-loader',  
  12.         exclude: /node_modules/,  
  13.         query: {  
  14.           presets: ['es2015', 'react']  
  15.         }  
  16.       }  
  17.     ]  
  18.   },  
  19. };  

Task is almost finished. We run command webpack-dev-server for start application on server localhost:8080

We see the Ouput on brower like this .

 
Summary

This article describes how to create react application with webpack and Babel. I hope you enjoyed this article.


Similar Articles