How to transpile React ES6 classes using Grunt + Browserify + Reactify?

Question

I want to use the new ES6 React classes that was introduced with React v0.13, but I am unable to get it to compile correctly. Say I have the following React component defined in the new class syntax:

(function() {
  'use strict';

  import React from 'react'; 

  class _UserDashboard extends React.Component {
        render() {
            return(
                <div className="user-dashboard">
                    <Books />
                </div>
            );
        }
    }
    export const UserDashboard = React.createClass(_UserDashboard.prototype);

}());

The trouble I run into here is that at compile time using Grunt and Browserify and a Reactify transform, Reactify throws an error when it encounters the import keyword:

ReactifyError: /Users/****/Sites/***/assets/js/components/UserDashboard.jsx: Parse Error: Line 7: Unexpected reserved word while parsing file: /Users/****/Sites/****/assets/js/components/UserDashboard.jsx

The problem here seems to have to do with Reactify's use of react-tools, see here and here. But I'm not sure if it is possible to enable the es6module option within Reactify yet.

I tried these two variations to no avail:

...
transform: [[ 'reactify', {'es6module': true} ]]
...

and

...
transform: [[ 'reactify', {'es6':true, 'es6module':true} ]]
...

Does anyone know how this can be done?

Answer 1

You should be able to do all of this with Babel and babelify (the corresponding Browserify plugin).

Babel itself is an ES6+ to ES5 transpiler, but it comes with first class JSX support:

JSX and React

Babel works perfectly with React, featuring a built-in JSX transformer.

Your Browserify transform would become:

{
  "browserify": {
    "transform": ["babelify"]
  }
}

---

Edit: As of Babel 6, many components have been moved out into a separate presets packages which you'll need to install and include in the transform command.

For React and JSX, you'll need babel-preset-react.

For ES6, you'll need babel-preset-es2015

Together these can be specified in the transform.

transform: [[babelify, { presets: ["react", "es2015"] }]]

Answer 2

Babelify is a best option for my point of view. Small clarification to @Dan's answer. For the babel v 6.0 you will need to install 2 preset.

1. ES2015
2. React

with something similar to npm install --save-dev babel-preset-react and npm install --save-dev babel-preset-es2015 commands and then specify this in babelify settings with: transform: [[babelify, {presets: ["es2015", "react"]}]]

And if in your code you use some newest react features like ...other for example, you also need add stage-0 preset.