【React】 React を始める前に
【React】 React を始める前に
tags: react
flux
このドキュメントは、これからReactを始める方が、
短い時間で React と flux について、キーワードを知るためのものです。
React は公式のチュートリアルが充実しています。 そのため、学ぶにはチュートリアルを読むのが良いです。
React - Reactとは
Reactは ユーザインターフェース構築のための JavaScript ライブラリ です。
React Component - 概要
Reactでは、コンポーネントを組み合わせて ユーザインタフェース を構築します。
このコンポーネントのことを React Component と言います。
React Component - JSX
JavaScriptの構文拡張です。
コンポーネントを実装するときに、使います。
詳細はこちらです。
React Component - Props
コンポーネントに渡される定数です。
React Component - State
コンポーネントの内部で扱える変数です。
React Component - Lifecycle
タイミングごとに、コンポーネントにロジックをフックできます。
React Component - コンポーネント間の連携
親から子は、 props を用いてください。
子から親は、 callback を用いるか、 fluxアーキテクチャを用いて、親が監視しているStoreから通知をしてください。
React/flux - fluxとは
flux は、アーキテクチャです。 クライアントサイドのWebアプリケーションで使用されます。
データの流れを単方向にする構造が特徴です。
引用元: https://facebook.github.io/flux/docs/in-depth-overview.html#structure-and-data-flow
View をユーザが操作したときに起こるイベントを考えると、次のようになります。
引用元: https://facebook.github.io/flux/docs/in-depth-overview.html#structure-and-data-flow
fluxを React で実現するための構造は次のようになります。
引用元: https://reactjs.org/blog/2014/07/30/flux-actions-and-the-dispatcher.html
React/flux - React Views
Reactで作られたViewのことです。
ユーザの操作などによって、イベントが起きると、 ActionCreators の関数を 呼び出します。
React/flux - ActionCreators
ActionCreators は、呼び出しに応じて Action を生成します。 Action の生成に必要な情報は、Web API などを使用し、集めます。
そうして生成した Action は Dispatcher に通知されます。
React/flux - Dispatcher
Dispatcher は、 Action を Store に分配します。
Dispatcherはシングルトンで作られているため、 fluxのデータをすべて管理することができます。
そのため、実行されるActionをチェックしたり、 それをログに出力したりすることが、簡単にできます。
React/flux - Store
Store では、データを保持します。
Store の変更は、自動的にその Store を監視している React View に通知されます。
ありがとうございました。