How I converted my simple react app to ES6 using babelify and gulp

Here is a repo which implements a simple IMGUR browser client in react. It uses react router. It does not utilize the newest javascript ES6 standard. Writing and converting a simple react app to ES6 allowed me to learn ES6 and in the process allowed me to figure out a way to change my gulp build settings to use the babel transpiler for ES6.

Non-ES6 simple react class

var React = require('react');
var ReactRouter = require('react-router');
var HashHistory = require('react-router/lib/hashhistory');
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;

var Main = require('./components/main');
var Topic = require('./components/topic');
var ImageDetail = require('./components/image-detail');

module.exports = (
  <Router history={new HashHistory}>
    <Route path="/" component={Main}>
      <Route path="topics/:id" component={Topic} />
      <Route path="images/:id" component={ImageDetail} />
    </Route>
  </Router>
);

ES6 version of a similar react-router class

import React from 'react';
import {Router, Route} from 'react-router';
import createHashHistory from 'history/lib/createHashHistory';

import Main from './components/main';
import Test from './components/test';


export default(
    <Router history={createHashHistory()}>
      <Route path="/" component={Main}>
        <Route path="test" component={Test} />
      </Route>
    </Router>
);

Adding babel to Gulp file to transpile ES6 into ES5

Add babelify npm package using ** npm add babelify –save ** In your gulp file require babelify use transform(babilify) in your bundle method. Code given below… A link to the repo where this is working…

***var babelify = require('babelify')***

function bundle() {
  return bundler
    ***.transform(babelify)***
    .bundle()
    .on('error', notify)
    .pipe(source('main.js'))
    .pipe(gulp.dest('./'))
}

References

Original non-ES6 react repo

ES6-version repo