Reactのチュートリアルを読む
目次
ReactのMain Concept：1. Hello World
Advanced Guide
Accessibility
課題： Webpackによるbundlingを使うと、コードがでかくなるとbundleもでかくなる（デカいライブラリとか使うとね） WebpackとかBrowserifyにはCode-Splittingとういう機能があって、複数のbundleを作って必要なときに動的にロードできる（lazy-load）これを使っていこうぜという話 Context
課題：component treeの下位のコンポーネントに、手動でpropsを渡していくのはめんどう
localeの設定とかUIのテーマとか
Contextをつかうとcomponent間のデータの共有が楽になる
Error Boundaries
課題： UIにおけるJSのエラーはアプリ全体を壊すべきではない
component内部のJSのエラーはReactの内部状態を汚染して、次回レンダリングのemit cryptic errorsの原因になっていた
このエラーはアプリケーションコードに開けるはやめの（？）エラーに起因していたが、Reactはこれまで、componentにおいてエラーをgracefullyにハンドリングできなかった。また、リカバーすることもできなかった
対応しようとしたのがReact 16で導入されたこの概念
Forwarding Refs
componentの子要素の一つに自動的にrefを渡すテクニック
ほとんどのcomponentには必要ない
再利用可能なcomponentライブラリには便利なことがある
課題：DOMに余計なnodeを追加することなしに、childrenのリストをグループ化できる
コードの例を見たほうがはやい
複数の<td>を返したいときに、<div>とかでグループ化すると当然invalidなHTMLになる
困った。そんなときFragmentを使う
Higher-Order Components
課題：Cross-Cutting Concerns
componentは再利用可能な主たるユニットだけど、そのまま適用しづらい場合がある
HOC自体はReact APIではない。Reactをつかっていると出てくるパターン
高階コンポーネントはコンポーネントを受け取って、新しいコンポーネントを返す関数
const EnhancedComponent = higherOrderComponent(WrappedComponent);
同じような構造をもっているのを
withHoge()みたいな名前がついていることが多いっぽい
ReduxのconnectとかRelayのcreateFragmentContainerとかで使われる Integrating with Other Libraries
Reactは他のアプリケーションに組み込めるし、他のアプリケーションをReactに組み込むことができる
jQueryとBackboneとintegrationする例
JSX In Depth
基本的にはJSXはReact.createElement(component, props, ...children)のSyntax sugar 中身がどうなっているのかの説明
Optimizing Performance
課題：もっと早く！
React内部ではUIのアップデートに必要なDOM操作を最小にするためのいろんなテクニックが使われている
Reactを使うと、早いUIを実現するためにパフォーマンス最適化に払う労力を少なくできる
でも、もっと早くできる
Portals
課題：普通render()で返すelementは、最も近い親ノードの子要素としてDOMにマウントされる。でも、DOMの別の場所に挿入したいときがある
典型的なユースケース：親コンポーネントがoverflow: hiddenやz-indexを持っているとする。子要素（ダイアログとかhovercard、ツールチップ）はこのコンテナを無視したい、というときがある 親componentのDOM階層の外にあるDOM nodeに対して、子を描画する方法を提供する
React Without ES6
React Without JSX
JSXもES6もつかうから、とりあえずよまなくてよさそうkadoyau.icon
Reconciliation
Reactは宣言的なAPIを提供しているので、updateでなにが変わっているのかを意識する必要はない。このためアプリケーションを楽にかけるが、Reactの内部でどのように実装されているのかは明らかでない。
Reactの"diffing"アルゴリズムにおけるReact制作チームの判断を説明する
このアルゴリズムのおかげで、componentの更新はハイパフォーマンスアプリに十分な速さをもつ一方で、予測可能だ
Refs and the DOM
Reactではprops (React)を使ってデータをやり取りするが、どうしてもこのデータフローの外でchildを修正したいというケースがいくつか（a few）ある。修正されたchildはcomponentのインスタンスになるか、DOM要素になる。どちらのケースにおいても、escape hatchを提供する こんなとき使う
Managing focus, text selection, or media playback.
絶対必要なアニメーションをトリガーする
他のDOMライブラリとインテグレーションする
課題：Cross-Cutting Concerns ほか
Render propを使うcomponentは、自身のrenderロジックを実装する代わりに、Element (React)を返すfunctionを受け取ってそれをcallする code:render_props.js
<DataProvider render={data => (
<h1>Hello {data.target}</h1>
)}/>
render propsがなぜ便利なのか、どうやってかけば良いのかを説明する
Static Type Checking
コードを動かす前にFlowとTypeScriptで問題を発見する
補完もしてくれるようになる
Strict Mode
問題：潜在的な問題をあぶり出したい
アプリケーションにおける潜在的な問題に注目するツール
Flagmentと同様に、StrictModeはUIとしてレンダリングされることはない
下位の要素にadditionalなcheckを有効にする
Typechecking With PropTypes
アプリが大きくなると、型チェックでたくさんのバグを見つけることができるようになる（複雑になるからね）
FlowとかTypeScriptをつかうこともできるけど、それらを使わなくてもbuilt-inの（React 15.5からは外部のパッケージとして切り出された）typecheckがあるよ
Uncontrolled Components
殆どの場合、formを実装するときにはcontrolled comopnentsを使うのがおすすめ
これを使えば、データはcomponentでハンドルされる
データをDOM自体でハンドルしたい場合、uncontrolled componentsを使う
Web Components
Web Componentsは再利用可能なコンポーネントのための強いカプセル化を提供する
Reactはあなたのデータと同期しているDOMをデータのを保つ宣言的なライブラリを提供する
Web Compponentsの中でReactをつかってもいいし、Reactの中でWeb Componentをつかってもいいし、両方混じっても良い
サンプルの説明