こんな感じに 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