余談：react-reduxを使用しているWebサイト(アプリケーション)
https://github.com/reactjs/redux/issues/310
わかる範囲でもこれだけあるみたいです。すごいですね。
実装
- es6
- react, react-dom,
- react-router
- redux
テストまで書くと長くなって読みづらいので分けます。
es6
- 公式サイト
- 基本的には公式サイトのspecを見ていく感じになりますが、英語かつ専門用語辛い。。
- Reduxは基本es6で書かれているので、spec読みながらExampleを見るのが良さそうだ！
実装で一番重要と思われるコードの再利用だけピックアップ。
// addという名前が名前空間に登録される
export function add(x, y) {
return x + y
}
exportで名前を登録していく。前まではmodule.exportsだったもの？
セミコロンがないのは間違いではなく、es6?es7?から省略可能らしい。
このコードを別のファイルで使う場合はimportする。前まではrequireだったもの？
import { add } from 'register_name'
console.log(add(1, 2))
export defaultで登録するとimport方法が変わるらしい。
export default function add(x, y) {
return x + y
}
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を想定しています。
{
...,
// 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"
},
...,
}
$ 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だけ試します。
$ 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
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'))
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>
)
}
})
import React from 'react'
export default React.createClass({
render() {
return <div>About</div>
}
})
import React from 'react'
export default React.createClass({
render() {
return <div>Repos</div>
}
})
<!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を頑張るかぁ。
テスト編に続く・・（完）