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