material-fluxとreact-routerを組み合わせてサンプルを作る

reactでwebアプリを書こうとすると、routerとfluxを組み合わせて組むことになると
思います。

学習能力の低いおじさんとしてはfluxとやらで躓いてしまいそうになったんですが、
material-fluxはシンプルでして、exampleも非常に読みやすいです。
import使ったりして、ファイル分割して見通しが良くなっています。

まぁ、そんな感じでreact-routerと組み合わせて使ってみました。
肝は、RouterのcreateElementを使ってcontextというプロパティを各
コンポーネントに設定してしまうところにあります。
contextからアクションやらストアにアクセスできるようになるのです。
便利ですね。

github.com

import React from 'react';
import { Router, Route, Link } from 'react-router';
import UserContext from './UserContext.js';
import App from './components/App.js';
import Foo from './components/Foo.js';
import Bar from './components/Bar.js';

var context = new UserContext();

function createElement(Component, props) {
  console.log('Create element has been called.');
  props.context = context;

  return <Component {...props} />;
}


var router = (
    <Router createElement={createElement}>
        <Route path="/" component={App}>
          <Route path="/foo/" component={Foo} />
          <Route path="/bar/" component={Bar} />
        </Route>
    </Router>
);

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

作りたいアプリがあるのですが、まずは、サイドメニューとか
作れるようになりたいです。いきなりは無理なので少しずつチャレンジ。