この記事を書くに至ったきっかけ
新システムを構築するにあたり、候補の一つであるReactにまずは慣れてみようと思い、自身でアプリケーションを構築しました。
かなりの試行錯誤の連続の結果、ある程度の形が出来てきたので、これまでの経緯を纏めておきたいと思います。

Table Of Contents

これらを踏まえたボイラーテンプレート

各ライブラリを使うに至った経緯などは、後述(または別記事に記載)します。

Name	Note	ドキュメントURL
React	これがなければ始まらない。	https://reactjs.org/
Typescript	所謂、AltJS。解説は巷に溢れているが、静的な型付をすることが特徴。	https://www.typescriptlang.org/
material-ui	簡単にそれなりの画面を作る為のコンポーネント群を提供してくれる。	https://material-ui.com/
react-redux	非常にわかりやすい記事があるので添付たぶんこれが一番分かりやすいと思います React + Redux のフロー図解	https://redux.js.org/ https://react-redux.js.org/
typescript-fsa(-reducers)	TypescriptでReduxを使うときのボイラーテンプレートです。これにより、記述を簡略化出来ます。	https://github.com/aikoven/typescript-fsa https://github.com/dphilipson/typescript-fsa-reducers
redux-saga	React Redux構成でAPI通信を行う為のMiddlewareです。	https://redux-saga.js.org/
react-router	SPAで画面遷移をさせる為のデファクトスタンダードライブラリ。これを使うことで、ブラウザの「戻る」ボタンなども使える様になる。	https://reacttraining.com/react-router/
Storybook	作成したコンポーネントを単体で見られる様にしてくれるツール。 (このツール自体はReactには限らない。vue.jsなどでも利用可能。)	https://storybook.js.org/

コンポーネントのディレクトリ構成にはAtomic Designを採用。

# 自分自身のローカルにcreate-react-appをインストール
npm install -g create-react-app

# プロジェクトを`Typescript`で作成。
create-react-app sampleProject --typescript

本当に何てことことなかったです。

ここからmaterial-uiも取り入れつつ、チュートリアルをこなし、ちょっとしたコンポーネントを作ってみたりしました。

１ページだけの簡単なページを作ってみると、この様な知見を得ることができました。
ただ、機能を追加するに従って、stateやpropertyに管理に辛みが。。。

次回は、この辛みを緩和してくれる、fluxやreduxについて書いていきたいと思います。