流行りの React を流行りの Babel と組み合わせて使ってみます。実は Babel は JSX に対応しており普通にコンパイルできるのですが、今日は npm browserify とも組み合わせてみます。

gulp を使ってもできそうですが、 babelify を使うのが簡単そうです。

必要な知識

インストール

browserify babelify react をそれぞれ適切な場所にインストールします。

$ npm install -g browserify
$ npm install -D babelify
$ npm install -S react

React のプログラム

プログラムを用意します。せっかく Browserify を使うので複数ファイルに分けてみます。

// index.js

import React from 'react';

import App from './app.js';

window.addEventListener('DOMContentLoaded', () => {
    let app = React.createElement(App, {});
    React.render(app, document.body);
}, false);
// app.js

import React from 'react';

export const App = React.createClass({
    getInitialState() {
        return {
            name: 'World'
        };
    },
    render() {
        return (
            <div>
                Hello, {this.state.name}!
            </div>
        )
    }
});

export default App;

let const アロー関数、に並んで JSX も使ったプログラムです。

これをコンパイルするには browserify コマンドを使います。

$ browserify index.js -t babelify -o bundle.js

-t babelify を指定することで ECMAScript 6 や JSX を変換してくれるようになります。 bundle.js が出来上がったファイルになります。

これを実行する必要最低限の HTML が以下です。

<!DOCTYPE html>
<meta charset="utf-8">
<script src="./bundle.js"></script>
<body></body>

ブラウザで表示すると Hello, World! と出るはずです。

これで、ECMAScript 6 、 JSX 、 Browserify の機能を使ってストレスレスに開発する環境が出来ました。

おまけ

あまりに単純な例なので、画面に入力欄を追加して World 以外にも挨拶するようにしてみます。

// app.js

import React from 'react';

export const App = React.createClass({
    getInitialState() {
        return {
            name: 'World'
        };
    },
    handleNameChange(event) {
        this.setState({
            name: event.target.value
        });
    },
    render() {
        return (
            <div>
                Hello, {this.state.name}!
                <br />
                <input type="text" value={this.state.name} onChange={this.handleNameChange} />
            </div>
        )
    }
});

export default App;

まとめ

  • Babel は JSX に対応している
  • babelify を使うと Browserify と Babel を組み合わせられる
    • -t bablify オプションを指定してあげる