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.
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!