React

Reactとは #

Facebookとコミュニティによって開発されているUIに特化したJavaScriptライブラリ.
Facebookはコアの部分だけを作成して, コミュニティがその周りをどんどん作っている.
Virtual DOM(仮想DOM)と呼ばれるレンダリング機構を採用している.
Virtual DOMを採用しているので, ページに表示されている広いエリアの情報をJavaScriptで管理しておき、なにか変更があった場合に変更箇所のみを再描画するUIなどに向いている.
GitHubリポジトリ: https://github.com/facebook/react/
Reference: Reactとは? – React入門

用語 #

名前	意味
Virtual DOM	DOMを作るために必要な情報を持っているオブジェクト. Virtual DOMの内容を元にHTMLを作成してブラウザに描画する.
JSX	Virtual DOMの元となる構文. Babelがscript要素の内容をブラウザが解釈できるように変換を行う. JSV -> JavaScriptと変換される. 基本的にはHTMLと同じ記法.
コンポーネント	個々の部品 HTMLのパーツをコンポーネント単位で管理し組み合わせてUIの作成を行う.
props	親コンポーネントから渡されたプロパティ不変のデータ
state	そのコンポーネントが持っている状態可変のデータ

Reduxとは #

Reactが扱うUIのstateを管理するためのフレームワーク.
ReactはFluxを採用しているが, ReduxはFluxの概念を拡張してより扱いやすくしたもの.
Reduxはstateを管理するフレームワークなのでReact以外にもAngularやjQueryとも併用できるがReactが一番相性が良い.

3大原則 #

Single source of truth (信頼できる唯一の情報源)
State in read-only (stateは常に読み取り専用にする)
Changes are made with pure functions (actionがstateを変更する際にreducerを通して行う)

要素 #

名前	機能
Action	入力内容を元にデータを作成する
ActionCreator
Store	データを貯める
State
Reducer	前の状態から新しい状態への純粋な関数

図解 #

Flux

Redux