React.js & AngularJS 勉強会での資料です。 目標管理システムZealupはReactで作ってあります。

1. こんな感じにReactを使ってます
React.js & AngularJS 勉強会 LT

2. 自己紹介
• 株式会社zabuton
–矢納正浩(ﾔﾉｳ ﾏｻﾋﾛ)
–株式会社アットウェア
• フロントエンド(React, Angular)
• バックエンド(Java, Go, Python)
masahiro.yanou Burning-Chai

3. Zealup
https://info.zealup.jp

4. 開発の仕方
Flux Application Architecture
Browserify, watchify, …...

5. 問題発生
どのcomponentが
何をListenしてるか
わからない
あらゆるcomponentが
Listenして再描画が
たくさん

6. Smart Components
Storeからのデータの受取
描画のためのロジック
分離

7. Smart Components
Storeからのデータの受取
描画のためのロジック
分離
Smart Component
Dump Component

8. Smart Component
Listen Store
No Render
プロパティを多く持たない
API呼び出し
基本的に再利用しない

9. Dump Component
NO Listen Store
Render
API呼び出し
再利用をする

10. 実際の画面を見てましょう

11. まとめ
• わかりやすくなった
–役割
• すっきりした
–再利用
• リファクタが必要(ToT)

12. 参考URL
• Smart Components
– https://preact.gitbooks.io/react-
book/content/jsx/smart.html
• Zealup
– https://info.zealup.jp
• 株式会社zabuton
– http://zabuton.co.jp