Design Note

react初心者のメモ

目次

Reactについて

Reach.jsはnpmでインストールする
npmはnode.jsで実行されるモジュール
なのでnode.jsも必要

特徴

  • Facebookが作った、UIを構築するためのライブラリ
  • コンポーネント指向
    • prop：親から受け継いだもの
    • state：状態
  • JSX
    • 記法

メリット

  • 速度
    • 部分的な再描画はbackboneのが早い。でも全体的な再描画はreactのがかなり早い。
  • セキュリティリスク軽減
    • 文字列は勝手にエスケープ
  • 堅牢
    • 状態の管理がしっかりしている
  • 再利用
    • コンポーネントの再利用が簡単

デメリット

  • 新しすぎる
  • DOMをいじれないので、Jqueryとかとの共存はむずいかも。Bootstrapとか。
  • Javascriptができる人を集めなければいけない
  • 学習コスト
  • IE8以下はダメだったかも
  • JQueryの方なアニメーションなど、見せ方、表現は苦手（今後の課題）

デザイナーができる部分？

  • HTMLのテンプレート部分のみ？
  • コンポーネントもいろいろ？
  • Router周り？
    • URLとコンポーネントの紐付け。react-router
    • プロトタイプ作りたいって時くらい

実装

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していない。
    • これで、デザイナー的な職種との分業がしやすくなり、テストしやすくなる
  • 補足