zealup - react
Post on 14-Apr-2017
1.142 Views
Preview:
TRANSCRIPT
こんな感じに React を使ってますReact.js & AngularJS 勉強会 LT
自己紹介• 株式会社 zabuton–矢納正浩 ( ﾔﾉｳ ﾏｻﾋﾛ )–株式会社アットウェア
• フロントエンド (React, Angular)• バックエンド (Java, Go, Python)
masahiro.yanou Burning-Chai
Zealup
https://info.zealup.jp
開発の仕方
Flux Application Architecture
Browserify, watchify, …...
問題発生どの component が何を Listen してるかわからない
あらゆる componentがListen して再描画がたくさん
Smart Components
Store からのデータの受取
描画のためのロジック分離
Smart Components
Store からのデータの受取
描画のためのロジック分離
Smart Component
Dump Component
Smart Component
Listen Store
No Render
プロパティを多く持たないAPI 呼び出し
基本的に再利用しない
Dump Component
NO Listen Store
Render
API 呼び出し再利用をする
実際の画面を見てましょう
まとめ• わかりやすくなった–役割
• すっきりした–再利用
• リファクタが必要 (ToT)
参考 URL
• Smart Components– https://preact.gitbooks.io/react-book/content/
jsx/smart.html
• Zealup– https://info.zealup.jp
• 株式会社 zabuton– http://zabuton.co.jp
top related