ReactJS + Webpack + BabelJS

FrontEnd / Software Development Reading Time: 5 min.

  • views1582
  • 0comments
Share

Because ReactJS is just a library, it’s very often necessary to install external plugins and tools inside the project to start build application. Sometimes, this can be annoying because, each time, we must repeat the same, boring job. The simplest solution for this is just to use some ReactJS Starter Kit, which we can very simply find on GitHub. Of course, each of them is different and has implemented its own approach to “best practice.” Usually, it is very difficult to use them from scratch for beginner, and additionally we must spend more time to understand and customize this template for own usage. For that reason, I decide to write this article and present how an easy way to build your own, in the simplest form Starter Kit based on a common stack, ReactJS + Webpack + BabelJS.

 

OK, but what does this set give us?

Thanks to using BabelJS and ReactJS together, we are not only capable using ES6 syntax in our project, but we also have the possibility of using JSX syntax. Of course, ReactJS does not require JSX, and we can use plain JS as well. However, because JSX syntax is almost the same as HTML, writing code in this style is more convenient and faster than native JavaScript. You can find out more about BabelJS and his practice aspects in our recent article, ECMAScript6 today with BabelJS.

 

What is Webpack?

Webpack is a tool, commonly called “module bundler.” The main purpose of this tool is to merge a set of files into one aggregate file. Thanks to them, your codebase can be split into multiple chunks, and those chunks can be loaded, on demand, reducing the initial loading time of your application. It can build and bundle CSS, pre-processed CSS, images, and many others by using Webpack loaders. Before we use Webpack, first, we must specify the “loaders” that should be loaded in the config file and, then, rightly configured. Webpack cannot identify the files that should be processed and the “worker” that should be used. We use the “test” attribute to select the files that we had specified, in regular expression form; the state of a file must meet the required attributes (i.e., correct extension). Attribute “loaders” define the plugin that should be used when the file meets that test. An example configuration may look like the illustration below.

 

module: {
    …
    loaders: [{
	     test: /\.scss$/,
	    loader: 'style!css!postcss-loader!sass',
    }],
   ..
  },

Webpack, of course, contains a lot more settings that help us to suit it to our project requirements. A good practice is to split one config file into three smaller files: common.config.js, dev.config.js, and prod.config.js. In the particular file, we should set the setting for a specified environment in which Webpack will be working.

 

Let’s have some practice!

The first step is to create a package.json file in the project directory and specify basic information about the project, like the name, version, etc. Instead of doing this manually, we can also choose a faster way by executing the npm init command and following the wizard.

bash$ mkdir react-webpack-babel
bash$ cd react-webpack-babel
bash$ npm init

Next, we need to install all necessary libraries and extensions which allow us to integrate Webpack with BabelJS. Additionally, we can also install the webpack-dev-server package. It’s a minimal version of the WWW server, which is based on node.js. This helps us test all functionalities.

bash$ npm install --save-dev react react-dom 
bash$ npm install --save-dev webpack webpack-dev-server
bash$ npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react 

After the installation process, we go to the next step – configuration. We start with an essential component of a stack – Webpack. Below are presented the minimal version settings which allow Webpack to start talking with BabelJS. The most important options are:

  • entry – This is an attribute indicate starting the js file. This, and all dependent files, will be “bundled” and converted to one bundle.js file.
  • output – This is the location and name of the output file. In our case, it is bundle.js.
  • module.loaders – This is an array of automatically applied loaders.
#file: webpack.config.js
var webpack = require('webpack');
var path    = require('path')

module.exports = {
  entry: 'src/index.js',
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /(\.jsx|\.js)$/,
        loader: 'babel',
        exclude: /node_modules/,
		query: {
           presets: ['es2015' , 'react']
        }
      }
    ]
  }
};

The next step is to create a skeleton file of our application – index.html. This file will be automatically loaded by webpack-dev-server during startup. It’s import that you don’t forget to include the output file from Webpack.

#file: index.html
<html> 
  <head> 
    <meta charset="UTF-8"> 
    <title>Hello React</title> 
  </head> 
  <body> 
    <div id='react-container'></div> 
  </body> 
  <script src="bundle.js"></script> 
</html>

When we have prepared the skeleton of our application, the next step is to create example ReactJS components. The body of this component should be located in the index.js file in the src directory, as we set in the config file. The example code below returns a header with a “Hello JSX” message.

#file: src/index.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom'; 

class HelloWorld extends Component { 
    render() { 
        return <h1>Hello JSX</h1> 
    } 
} 

ReactDOM.render(
    <HelloWorld/>, 
    document.getElementById('react-container') 
);

The last step of configuration is adjusting npm to use our webpack-dev-server. To do this, we have to put a new entry in the script section of the package.json file.

#file: package.json
{
  "name": "react-webpack-babel",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js"
  },
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.9.1",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.5.0",
    "react": "^15.1.0",
    "react-dom": "^15.1.0",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.1"
  }
}

Finally, our stack is configured and ready to use. To test them, we just have to execute the npm start command, and if we didn’t make any mistakes, all should work correctly.

 

Tagged with:

Tags: , ,