Reactについて
Reach.jsはnpmでインストールする
npmはnode.jsで実行されるモジュール
なのでnode.jsも必要
特徴
-
Facebookが作った、UIを構築するためのライブラリ
-
コンポーネント指向
-
prop：親から受け継いだもの
-
state：状態
-
-
JSX
-
記法
-
メリット
-
速度
-
部分的な再描画はbackboneのが早い。でも全体的な再描画はreactのがかなり早い。
-
-
セキュリティリスク軽減
-
文字列は勝手にエスケープ
-
-
堅牢
-
状態の管理がしっかりしている
-
-
再利用
-
コンポーネントの再利用が簡単
-
デメリット
-
新しすぎる
-
DOMをいじれないので、Jqueryとかとの共存はむずいかも。Bootstrapとか。
-
Javascriptができる人を集めなければいけない
-
学習コスト
-
IE8以下はダメだったかも
-
JQueryの方なアニメーションなど、見せ方、表現は苦手（今後の課題）
デザイナーができる部分？
実装
http://qiita.com/kuniken/items/19fccc27b8bfa8068d22
- export default
-
外のファイルからでも使えるようにする。ファイルを分割するときに必要。
-
-
propTypes
-
型を作る
-
-
props
-
外部から渡されたデータ
-
-
描画する画面
-
使うコンポーネントを全部インポート
-
-
Route
-
Route：大元のパス
-
IndexRoute：ルートにアクセスした時に表示するコンポーネント
-
その他Route：pathにアクセスした時
-
-
componentWillMount
-
初期化処理
-
-
state
-
現在の状態。
-
getIn
-
深い階層のデータまでとれる
-
-
-
dispatch
-
importした関数の実行？？
-
-
export const
-
objectが複数値を変えす
-
-
export default
-
objectが単一の値を返す
-
-
宣言の仕方
-
import React from ‘react’;
-
通常のパターン
-
-
import {EventEmitter as Emitter} from ‘events’;
-
モジュール内のメンバーをimportする場合は{}で囲む
-
別名で扱いたい場合はasをつける
-
-
-
静的ファイルの提供
-
app.use(Express.static(‘build’));
-
buildディレクトリ配下にあるよ
-
-
-
コンテナ(Smart Component)とコンポーネント(Dumb Component)
-
2つに分離する
-
コンテナ(Smart Component)
-
ロジックのみに専念するContainer component
-
具体的なデータやコールバック関数を与える
-
-
Reduxとの依存関係を持つ
-
reduxやactionsをimportしている
-
-
-
コンポーネント(Dumb Component)
-
表示のみに専念するPresentational component
-
storeにもアクセスしません．なので，dispatchもできません
-
例えばボタンを表示しても，onClickではpropsで与えられるコールバック関数を呼ぶだけ
-
-
必要なものは親から全てprops経由で全て受け取るようにする
-
reduxやactionsをimportしていない。
-
-
これで、デザイナー的な職種との分業がしやすくなり、テストしやすくなる
-
-
補足
-
ディレクトリ構成例
-
サイバー・バズ
-
wantedly
-
-
わかりやすいサイト
-
-
初歩的な記法を教えてくれる
-
-
-
reduxの動きを教えてくれる
-
-
-