20160421 react勉強会
TRANSCRIPT
React.jsコンポーネント設計のツボ
•
•
オンライン顧問税理士・社労士・弁理士・行政書士・司法書士
本⽇の内容
1.組織のスキルセット2.学ぶステップ3.props, state, fluxアーキテクチャ
1. 組織のスキルセット
• HTMLとCSSの専⾨家 JavaScript: △ の⼈
よくあるスキルセット
デザイナー、HTML/CSSコーダー
• JavaScript: ○ HTML: △ CSS: × の⼈サーバーサイドエンジニア
だけ だと…
• デザイン上のエレメント構成• 再利⽤や責務、テストのしやすさ
を考慮したコンポーネント分割
ほぼ無理
両立させる必要がある
• HTMLとCSSの専⾨家
最低限
• JavaScript OKな⼈
が何⼈か必要
大まかな手順
デザイン(イラレ的な)
JavaScript仮のHTML構築
HTML/CSSコーディング
1
HTML/CSSな⼈JavaScriptな⼈
2 3
コンポーネント設計
2でreact-bootstrapやmaterial-ui等UIツールキットを利用するとうまく行きやすい
2. 学ぶステップ
• react-howtohttps://github.com/petehunt/react-howto
• 翻訳: React初学者のためのガイド @Qiita(原⽂の⽅が若⼲新しいようです)
参考文献
1. React (公式のチュートリアルを⾒る・やる)2. npm (モジュールシステム, パッケージシステム)3. JavaScriptのバンドラ (gulp, browserify, webpack等)4. ES6 (俄然JSが楽しくなる)5. ルーティング (react-router⼀択か)6. Flux7. Immutable.js (バグを減らすために)
推奨ステップ
3. props, state, flux
デモ
Reactのモノ作り
コンポーネントのツリー構造を作っていくこと
1. ある「画⾯」を表すコンポーネントを作る2. 画⾯内の「部分」を担うコンポーネントを切り出す or
既存コンポーネントを配置する
コンポーネント分割
画面内で持つべき「責務/役割」をベースになるべく小さく
• ⾒通しが良くなる• テストしやすい
データフロー設計
基本、なるべくツリーの上部のコンポーネント
誰がデータを持つべきか
中間状態を持つ必要があれば末端コンポーネントにstateを持たせる
全体としてstateの利⽤を極⼒控える
中間状態?
データとして不完全な(例えば編集中)の状態
良い⾔葉を思いつかなかったので… (適当な造語)
e.g.• ⽇付を⼊⼒中のテキストフィールド
Screen
ToolsWidget
VisibleColumns
Table
表示カラム
VisibleColumnsStore
Fluxは平たく言うとグローバル変数
Screen
ToolsWidget
VisibleColumns
Table
表示カラム
変更Action
通知