React and ES6 (with babel and webpack)

This post is a guide to setup a boiler plate project which will be capable of using React Js through ES6 and experimental ES7 syntax (which by the way makes ES5 look like watergun  vs AK47). React 0.14 supports the ES6 syntaxes which allows to use the class system in JS.

All this thanks to a little something library called Babel, and enter the cool, it will make your project capable of doing all sorts of ES6 badassery. Lets dig into the steps and start some serious coding.

We are going to use gulp and webpack to ease our package and task management and webpack-dev-server for local dev server.

Step 1:

Install the following packages:

#Babel loaders and preset
npm install babel-core --save-dev
npm install babel-loader --save-dev
npm install babel-plugin-transform-runtime --save-dev
npm install babel-preset-es2015 --save-dev
npm install babel-preset-react --save-dev
npm install babel-preset-stage-0 --save-dev
npm install json-loader --save-dev
npm install babel-polyfill --save-dev
npm install babel-runtime --save-dev
#gulp tasks and utils
npm install gulp --save-dev
npm install gulp-concat --save-dev
npm install gulp-less --save-dev
npm install gulp-sourcemaps --save-dev
npm install gulp-uglify --save-dev
npm install gulp-util --save-dev
npm install webpack --save-dev
npm install webpack-dev-server --save-dev
npm install webpack-stream --save-dev

Step 2:

Lets setup the webpack config to include the babel loaders and presets:

module.exports = {
  cache: true,
  debug: true,
  devtool: 'eval-source-map',
  entry: [  'babel-polyfill','./src/app.jsx'],
  output: {
    filename: 'build.min.js'
  module: {
    loaders: [{
      loader: 'babel-loader',
      include: [
        path.resolve(__dirname, "src"),
      test: /\.(js|jsx|es6)$/,
      exclude: /(node_modules|bower_components)/,
      query: {
        plugins: ['transform-runtime'],
        presets: ['es2015', 'stage-0', 'react'],
    }, , {
      test: /\.json?$/,
      loader: 'json-loader'
  resolve: {
    extensions: ['', '.js', '.jsx', '.json']
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('"production"')
    new webpack.optimize.UglifyJsPlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.DedupePlugin()

Step 3:

Setup the Gulpfile to define webpack and gulp tasks
To understand the gulp/webpack configuration in detail read this:

var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var sourcemaps = require('gulp-sourcemaps');
var gutil = require("gulp-util");
var webpack = require("webpack");
var less = require('gulp-less');
var path_node = require('path');
var WebpackDevServer = require("webpack-dev-server");
var webpackConfig = require("./webpack.config.js");
var stream = require('webpack-stream');

var path = {
  HTML: 'src/index.html',
  ALL: ['src/**/*.jsx', 'src/**/*.js', 'styles/**/*/*.css', 'styles/**/*/*.less'],
  MINIFIED_OUT: 'build.min.js',
  CSS: ['./styles/**/*/*.css', './styles/**/*/*.less'],
  DEST_SRC: 'dist/src',
  DEST_BUILD: 'dist/build',
  DEST: 'dist'

gulp.task('webpack', [], function() {
  return gulp.src(path.ALL)

gulp.task("webpack-dev-server", function(callback) {
  // modify some webpack config options
  var myConfig = Object.create(webpackConfig);
  myConfig.devtool = "eval";
  myConfig.debug = true;

  // Start a webpack-dev-server
  var compiler = webpack(myConfig);
  new WebpackDevServer(webpack(myConfig), {
    publicPath: "/" + myConfig.output.publicPath,
    stats: {
      colors: true
  }).listen(4000, "localhost", function(err) {
    if (err) throw new gutil.PluginError("webpack-dev-server", err);
    gutil.log("[webpack-dev-server]", "http://localhost:4000/webpack-dev-server/index.html");
gulp.task('watch', function() {, ['webpack']);
gulp.task('default', ['webpack', 'webpack-dev-server', 'watch']);

Step 4:

Adding some react code:

Create app.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import Header from './components/Header';

ReactDOM.render(< Header >, document.getElementById('root'));

We are using the ES6 import statements here.

Now lets create a Header Component

import React from 'react';

let {Component, PropTypes} = React;

export default class Header extends Component {
  static defaultProps = {
    items: []
  static PropTypes = {
    items: PropTypes.array.isRequired
  constructor(props) {
    this.state = {
        windowHeight: 0
  render() {
    return (

We are using the ES6 class syntax to create a react component rather that creating through React.createClass().
Also you can see the getInitialProps is now replaced by a static property defaultProps and so is PropTypes
And all the logic which typically went inside componentDidMount() can now reside in a neat constructor

Step 5:

To run the setup , in the command line fire


and then access http://localhost:4000

Source code of the entire setup available here:

Posted in Generic, Web Technology Tagged with: , , , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Recent Posts

Hit Counter provided by technology news