Setting up React for ES6 ES2015 with Webpack and Babel


This resource came in quite handy when setting up React in combination with ES6 ES2015, Webpack and Babel.

Installing all the required dependencies:

# Install Webpack
npm install --save-dev webpack

# Install the Babel Loader, for use with Webpack
npm install --save-dev babel-loader

# Install the es2015 and react presets, for use with Babel
npm install --save-dev babel-preset-es2015
npm install --save-dev babel-preset-react

The contents of webpack.config.js:

var path = require('path');

module.exports = {
  entry: path.join(__dirname, '../src/scripts/index.js'),
  output: {
    path: path.join(__dirname, '../build/scripts/'),
    filename: 'bundle.js'
  module: {
    loaders: [
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react']
        progress: true

Integrate it as a grunt task using grunt-webpack, or run it directly using webpack-dev-server (install either one using npm i):

$ webpack-dev-server --progress --colors
Did this help you out? Like what you see?
Consider donating.

I don’t run ads on my blog nor do I do this for profit. A donation however would always put a smile on my face though. Thanks!

☕️ Buy me a Coffee ($3)

ES6 ES2015 Arrow Functions and this

Why you’d want to use arrow functions (next to them being shorter to type):

Arrow functions will maintain the this value of the enclosing context

Yes, this will work just fine:

function Wilto() {
	this.age = 32;

	setInterval(() => {
		console.log( "I am now " + this.age + " years old");
	}, 3000 );

Whereas we used to do stuff like this:

function Wilto() {
	var self = this;
	self.age = 32;

	setInterval( function constantBirthdays() {
		console.log( "I am now " + self.age + " years old");
	}, 3000 );

Source: A List Apart: On Our Radar: Self-Centered Edition →