余談：react-reduxを使用しているWebサイト(アプリケーション)

https://github.com/reactjs/redux/issues/310
わかる範囲でもこれだけあるみたいです。すごいですね。

実装

es6
react, react-dom,
react-router
redux

テストまで書くと長くなって読みづらいので分けます。

es6

公式サイト
基本的には公式サイトのspecを見ていく感じになりますが、英語かつ専門用語辛い。。
Reduxは基本es6で書かれているので、spec読みながらExampleを見るのが良さそうだ！

実装で一番重要と思われるコードの再利用だけピックアップ。

register_name.js

// addという名前が名前空間に登録される
export function add(x, y) {
  return x + y
}

exportで名前を登録していく。前まではmodule.exportsだったもの？
セミコロンがないのは間違いではなく、es6?es7?から省略可能らしい。
このコードを別のファイルで使う場合はimportする。前まではrequireだったもの？

index.js

import { add } from 'register_name'

console.log(add(1, 2))

export defaultで登録するとimport方法が変わるらしい。

register_default.js

export default function add(x, y) {
  return x + y
}

index.default.js

import add from 'register_default' // import apple from 'register_default' でも問題ない

console.log(add(1, 2))

specを見ると、defaultを指定するとdefault名前空間に登録されるようだ。
また、一つのモジュールにはdefaultが一つしか存在してはいけない(syntax error)ので、importする名前はなんでも良い。
default名前空間に登録されているものは{}をつけず取り出せる。
逆にdefaultを指定しないと定義した名前が登録され、importの祭に{}で名前を囲んであげなければならない。
ちなみに、module.exportsで登録した名前は、各ライブラリを見る限りdefault名前空間に登録されるようだ。それ以外のvarなどは{}で取り出せるところを見るとdefault以外で登録されている？

react, react-dom

npm install --save-dev react react-dom
React, ReactDOM公式サイト
React作者によるHowTo
React自体はこの箇所でReactIsomorphicがassignされているように、実態はReactIsomorphicにあるようだ。
ReactDOMはこの箇所がnpmでインストールされるようだ。

React, ReactDOMの使い方は公式サイトを見るとしてビルド方法だけピックアップ。
前提として、es6+babel+webpackを想定しています。

package.json

{
  ...,
  // npm runの引数を定義します
  "scripts": {
    "compile": "babel --presets es2015 src/ -d lib/",
    // 素のReactはdevelopモードで遅いらしいのでproductionモードでビルドする
    // npm install --save-dev cross-envが前提です
    "build": "cross-env NODE_ENV=production webpack",
    "build:dev": "npm run compile && npm run build",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  ...,
}

build

$ npm run build:dev

あとはwebpack.config.jsで指定したビルド先のPATHを<script src='dist/index.js'></script>のようにhtmlに書けばOK。
すごく簡単！
cross-envを使いたくない場合は、Reactの公式サイトのようにwebpack.config.jsの中でハードコード。

react-router

React Router公式サイト
npm install --save-dev react-router

公式サイトのTutorialのlesson2,3だけ試します。

directory構成

$ tree -a -I 'node_modules|.git|.DS_Store|dist|lib|.vscode|.gitignore'
├── .babelrc
├── .eslintrc
├── index.react.router.html
├── package.json
├── src
│   ├── index.react.router.js
│   └── modules
│       ├── About.js
│       ├── App.js
│       └── Repos.js
└── webpack.config.js

index.react.router.js

import React from 'react'
import { Router, Route, hashHistory } from 'react-router'
import { render } from 'react-dom'
import App from './modules/App'
import About from './modules/About'
import Repos from './modules/Repos'

render((
  <Router history={hashHistory}>
    <Route path="/" component={App}/>
    <Route path="/about" component={About}/>
    <Route path="/repos" component={Repos}/>
  </Router>
), document.getElementById('app'))

App.js

import React from 'react'
import { Link } from 'react-router'

export default React.createClass({
  render() {
     return (
      <div>
        <h1>Hello, world!</h1>
        <ul role='nav'>
          <li><Link to='/about'>About</Link></li>
          <li><Link to='/repos'>Repos</Link></li>
        </ul>
      </div>
    )
  }
})

About.js

import React from 'react'

export default React.createClass({
  render() {
    return <div>About</div>
  }
})

Repos.js

import React from 'react'

export default React.createClass({
  render() {
    return <div>Repos</div>
  }
})

index.react.router.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>React and React Router Example</title>
</head>

<body>
  <div id="app"></div>
  <script src="dist/index.react.router.js"></script> <!-- dist/はcompile後のPATH -->
</body>
<html>

わかりやすくていいですね！

redux

公式Example
作者がYou’ll know when you need Flux. If you aren’t sure if you need it, you don’t need it.と言っているように、Reactを使っていくうちにFluxを導入すべきと感じるまでは使わないほうが良いようだ。

まずは、React, ReactDOM, Routerを頑張るかぁ。

テスト編に続く・・（完）