reactとその周辺ライブラリをまとめて使う

経緯

Reactやその周りのエコシステムを説明する機会が増えたので、
記事にまとめることにしました。
早速ですが、Reactから説明していきます。

React

公式に載ってるシンプルなコードがこちら

function
class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        Hello {this.props.name}
      </div>
    );
  }
}

ReactDOM.render(
  <HelloMessage name="Taylor" />,
  mountNode
);

慣れていないとjsとHTMLが混在していて見づらいという印象かもしれませんね。
仮想DOMなのでjsで要素を操作・描画しているという感覚です。

下のReactDOM.renderというところでHelloMessageにname:"Taylor"というパラメタを渡しています。
HelloMessageクラスではrenderメソッドで、画面描画する要素を返しています。
propsというのは親から受け取るパラメタをもつオブジェクトです。

redux

Reactはview部分だけであり、他のエコシステムと組み合わせることで真価を発揮します。
その最たる例がreduxで、fluxという概念を元に状態を管理し、仮想DOMを操作していきます。
FluxとReduxの概念を理解する部分はこちらの方が詳しい記事を書いているので、参照してください。
https://qiita.com/syossan27/items/7e1b2e07ac68b96bdaa7

react-router

reduxが絡むとreact-routerだけでなくreact-redux-routerが必要になってきます。
状態管理による遷移が発生するためです。

redux-saga

これは副作用のある処理を書くためのライブラリです。