Nekonote

Nekonote(ねこのて)もかりたい

【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 に通知されます。


ありがとうございました。

公式のチュートリアルこちらです。

おすすめ 記事