React現状確認 by @koba04

The state of React.js 2016 // Speaker Deck

• React.js meetup #4が6月にあるかも
• Reactの使用例
  • Instagram, Netflix, Uber etc..
  • Twitterのモバイル版 <- 知らんかった
• SFC: StatelessFunctionalComponentsがコンポーネントの基本
• MixinはなくなったのでHighOrderComponentのスタイルで機能を追加
• 新しくReact.PureComponentってのが増えるかも
• `shouldComponentUpdate()`でチューニングするのがやっぱ速い
• パフォーマンスチューニングするなら
  • react-addons-perf
  • `why-did-you-update`ってパッケージもある
• PropTypesはLegacyで、FlowやらTypeScriptを使っていく流れ
• `setState()`は基本的にはまとめて反映される（が、特定の場合にまとめられない
  • `unstable_batchedUpdates()`ってのもあって、まとめて`setState()`してくれる
• StringRefはLegacyで、Refはcallbackで取るべし
• テストで使える`shallowRenderer`
  • そのコンポーネントの一階層下までだけ
• GitHub - airbnb/enzyme: JavaScript Testing utilities for React
• ESLint x eslint-plugin-react
• 最新情報は
  • `reactjs/core-notes`を追うと○
  • GitHub - reactjs/react-basic: A description of the conceptual model of React without implementation burden.

TODO: あとで`tap-event-plugin`についてきく

なぜReduxを使うのか by @kuy

なぜReduxを使うのか // Speaker Deck

アカウントの読みは[kai]です！

• Redux機運の高まりを感じる
• 同時によーわからんって声もきく
• Reactだけだとつらい問題があってFluxがきたがそれでもつらいのでRedux
• ReduxはFluxのStoreの債務を分割しただけ
• Reduxは複数のStoreの存在を許さない
• Stateの分割の考え方はボトムアップ
• 素のReduxはオススメせず、Middlewareを使うべし
  • redux-form, redux-saga, etc..
• とあるreducer内で他所ののstateが欲しくなったら、そもそもStateの構造を見直す
• 非同期するならredux-saga
• Reducerの分割がReduxのキモ
• Middlewareの選定も大事

うーん、やっぱりむずかしいよーー

Relay by @hokaccha

• react-relay x graphql-relay
• データのストア、APIのハンドリングも全部やるのがRelay
  • サーバーの仕様・実装まで規定する
• GraphQL
  • REST/RPCと同じレイヤー
• エンドポイントは1つだけ
  • RESTでは複数のリクエストが必要なところを
  • クエリを組み上げ（ネスト）れば1リクエストで済む
• React.ComponentをRelayコンポーネントにして使う
• 宣言的に欲しいデータへのクエリが書ける
• Relay.QL(`ここにクエリを書く`)
  • JSXみたいな記法じゃない！やった！
  • でもBabel通さないと動かない
• babel-relay-plugin
• 現状のRelayはつらい
  • Babelもサーバーがいる
  • クエリ脳に慣れない
  • サンプルが少ない

Falcorと一緒で敷居の高さがすごいやんね・・・。

How to style React components by @Quramy

How to style React components

• 最近のライブラリは"コンポーネント"を作ることができる
  • React.Component, Angular.module, Vue.component, etc..
• CSSは外部からの影響を受けやすい
• 子コンポーネントへも影響する可能性がある
• CSSのセレクタがグローバルなのが問題
• どうするか
  • ルール・命名で縛る（BEM）
  • WebComponents
  • CSS in JS
  • CSS Modules
• CSS in JSは、Styleオブジェクトをjsで作る
  • オブジェクトなので`assign`すれば拡張とかできる
  • jsなのでconstとかも使える
  • 擬似要素・擬似クラスが使えない
  • メディアクエリやキーフレームアニメーションもできない
• 一部なら、ライブラリでなんとかなる
  • GitHub - FormidableLabs/radium: A toolchain for React component styling.
  • GitHub - js-next/react-style: Maintainable styling for React.js components [not actively maintained anymore]
  • GitHub - petehunt/jsxstyle
• CSS Modulesは、CSSをJSで使う
  • jsでcssをimportする
  • その時に独自のクラス名がつく
• webpackでロードする
• CSS Modules 所感 - morishitter blog

CSSをコンポーネントに押し込んだところでどのみちカオスなコードを生み出す未来が見えるので、おとなしく綺麗にCSSを書いたらいいのでは？と思ってしまうのは、CSSも一応書けるよっていう人種やからなんかな( ˘ω˘)ｽﾔｧ

Atomic Design powered by React @ AbemaTV by @ygoto3_

資料見つけたら

• 空気を読みながら開発スタートしたAbemaTV
  • 画面仕様が変わっても怖くないように
• Atomic Design | Brad Frost
• 原子 > 分子みたくコンポーネントを分解して考える
  • Atom: もっとも細かい（ボタンとか、アイコンとか、テキストラベルとか）
  • Molecules: Atomの組合せ
  • Organisms: AtomとMoleculesの組合せ
• Atomic Design を実案件に導入 - UI コンポーネントの粒度を明確化した結果と副産物 | ygoto3.com
• データに触れるコンポーネントと、表示に徹するコンポーネントに分ける
  • 表示に徹する方を、AtomicDesignの要素として使う
  • Actionも発行させないし、Storeのデータもさわらせない
• そうするとコンポーネントのガイドも作成可能