React + react-router と browserify + babalify で ES6のクラスとか使った簡単なサンプル #React

目的

react-router が取りあえず動く簡単なサンプルを書いてみる。

バージョン指定せずに npm install react-router すると古い v0.13.3 が入ってしまい、github の README などに書いてあるサンプルコードが動作しないので気をつける（現時点で v1.0.0-beta2 だと動く）

ファイル構成

こんな感じ。

.
├── dest
│ └── app.js
├── index.html
├── package.json
└── src
├── app.js
└── router.js

インストール

package.json

{
  "devDependencies": {
    "babelify": "^6.1.2",
    "browserify": "^10.2.4",
    "react": "^0.13.3",
    "react-router": "^1.0.0-beta2",
    "watchify": "^3.2.3"
  },
  "scripts": {
    "watch": "watchify -t babelify src/app.js -o dest/app.js -v"
  }
}

$ npm install

watch

src ディレクトリの js ファイルを src/app.js で import でまとめる感じにしておいて監視、変更あったらビルド。

$ npm run watch

ファイル作成

src/app.js

import React from 'react/addons';
import router from './router';

React.render(router, document.getElementById('example'));

src/router.js

import React from 'react/addons';
import BrowserHistory from 'react-router/lib/BrowserHistory';
import { Router, Route, Link } from 'react-router';


class Home extends React.Component {
    render() {
        return (
            <div>
                <h1>Home</h1>
                <ul>
                    <li><Link to="/foo/">Foo</Link></li>
                    <li><Link to="/bar/">Bar</Link></li>
                </ul>
            </div>
        );
    }
}

class Foo extends React.Component {
    render() {
        return (
            <div>
                <h2>Foo!</h2>
                <ul>
                    <li><Link to="/">Home</Link></li>
                    <li><Link to="/bar/">Bar</Link></li>
                </ul>
            </div>
        );
    }
}

class Bar extends React.Component {
    render() {
        return (
            <div>
                <h2>Bar!</h2>
                <ul>
                    <li><Link to="/">Home</Link></li>
                    <li><Link to="/foo/">Foo</Link></li>
                </ul>
            </div>
        );
    }
}

var router = (
    <Router history={new BrowserHistory}>
        <Route path="/" component={Home} />
        <Route path="/foo/" component={Foo} />
        <Route path="/bar/" component={Bar} />
    </Router>
);

module.exports = router;

index.html

<!doctype html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>react-router</title>
    </head>
    <body>
        <div id="example"></div>

        <script src="dest/app.js"></script>
    </body>
</html>

動作確認

サーバー起動

$ python -m SimpleHTTPServer 8080

メモ

react-router の BrowserHistory を使うと http://localhost:8080/#/foo/ みたいな # が入らない。ちなみに HashHistory などを使うと # が入る。
react-router v0.13.3 から v1.0.0-beta2 にアプデしてだいぶ変更されたらしい

React + react-router と browserify + babalify で ES6のクラスとか使った簡単なサンプル

目的