こんにちは、@desnote_blogです。

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)