A combination of Reactjs and 6to5

In Japanese article is here.

I wrote React.js code by ES6 syntax using react-tools with harmony option. Currently, I use 6to5.

• https://6to5.org/

It is good because 6to5 is supporting jsx. you don't need to be careful about jsx.

The github repository is here.

https://github.com/koba04/react-boilerplate

structure

browserify + 6to5

Transforming flow is like below.

ES6  ->   CommonJS(ES5)      ->       bundle.js
    6to5                 browserify

It is same as using AltJS.

configuration

https://github.com/koba04/react-boilerplate/blob/master/package.json

bundle.js

bundle.js is generated by browserify and 6to5ify. 6to5ify is browserify transform for 6to5.

https://github.com/6to5/6to5ify

  "scripts": {
    "watch": "watchify app/index.js -o dist/bundle.js -v",
    "build": "browserify app/index.js > dist/bundle.js"
  },
  "browserify": {
    "transform": [
      [ "6to5ify" ]
    ]
  }

start server

When launch the server, You can use 6to5-node command including 6to5.

  "scripts": {
    "start": "6to5-node server"
  },

This makes it can write server.js as entry point using ES6.

'use strict';

import express  from 'express';
import React    from 'react';
import App      from './app/components/App';

let app     = express();
let handler = (name) => {
  return (req, res) => {
    let html = React.renderToString(React.createElement(App, {
      path: "/" + name
    }));
    res.send(html);
  };
};

app.get('/',        handler(''));
app.get('/artist',  handler('artist'));
app.get('/country', handler('country'));

app.use(express.static(__dirname+'/dist'));

let port = process.env.PORT || 5000;
console.log("listening..." + port);
app.listen(port);

test by Jest

You can use 6to5-jest module. It specifies to scriptPreprocessor.

  "jest": {
    "scriptPreprocessor": "<rootDir>/node_modules/6to5-jest",
  }

You can write below.

'use strict';

jest.dontMock('../InputArtist');

import React                    from 'react/addons';
import InputArtist              from '../InputArtist';
import AppTracksActionCreators  from '../../actions/AppTracksActionCreators';

describe("inputArtist", () => {
  let inputArtist;
  beforeEach(() => {
    inputArtist = React.addons.TestUtils.renderIntoDocument(<InputArtist />);
  });

  describe("state",  () => {
    it("set inputArtist radiohead", () => {
      expect(inputArtist.state.inputArtist).toBe("radiohead");
    });
  });

  describe("handleSubmit", () => {
    let preventDefault;
    beforeEach(() => {
      preventDefault = jest.genMockFunction();
      inputArtist.setState({ inputArtist: 'travis' });
      React.addons.TestUtils.Simulate.submit(inputArtist.getDOMNode(), {
        preventDefault: preventDefault
      });
    });
    it ("calls AppTracksActionCreators.fetchByArtist with state.inputArtist", () => {
      expect(AppTracksActionCreators.fetchByArtist).toBeCalled();
      expect(AppTracksActionCreators.fetchByArtist).toBeCalledWith('travis');
    });
    it ("calls e.preventDefault", () => {
      expect(preventDefault).toBeCalled();
    });

  });

});

code

JSX

6to5 supports jsx, you don't need to be careful it.

https://6to5.org/docs/usage/jsx/

ES6 modules

You don't need to use commonJS style anymore. You can use ES6 module style!

'use strict';

import React        from 'react';
import Nav          from './Nav';
import Footer       from './Footer';
import InputArtist  from './InputArtist';
import Tracks       from './Tracks';
import TrackStore   from '../stores/TrackStore';

export default React.createClass({
  displayName: 'Artist',
  render() {
    let style = {
      title: {
        fontFamily: "'Poiret One', cursive"
      }
    };
    return (
      <div>
        <header className="page-header">
          <h1 style={style.title}>Artist Top Tracks <small>by Last.FM</small></h1>
        </header>
        <Nav current="artist" />
        <article className="main-content">
          <InputArtist />
          <Tracks />
        </article>
        <Footer />
      </div>
    );
  }
});

In above, displayName specifies component class name expressly, because created a component class is passed the direct to export default.

If you use 6to5 to write React.js code, you can use ES6 syntax easily.

I'll write React.js code by ES6 using 6to5.

6to5 is good librariy. It is simple and easy to use!