Reactでよく使われるライブラリをオールインワンにしたボイラーテンプレートを作った

React+Typescriptを使ったシステム構築を検討する上で、「これは使うよなー」と思ったライブラリをまとめて、サンプル付きのボイラーテンプレートを作りました。

## 動機
Reactで実際に動くシステムを作ろうすると、色々なライブラリを使いたくなる。
でも、一つのライブラリを動かすために、ディレクトリ構成を考え直したり設定をコードに書いていくのは本当に大変。。。
なので、共通して使えそうなエッセンスだけを抽出してボイラーテンプレートを作りました！

## Demo
![sampleImage.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154110/614da983-3779-6188-dc78-b13ee75f9349.gif)


## リポジトリの場所
https://github.com/joolen/react-project-template

## 使い方
下記のコマンドを実行するだけ。

```sh
# clone this repository
git clone https://github.com/joolen/react-project-template.git my-app
# change direcory you made
cd my-app
# install dependencies
npm install
# run project. you can access http://localhost:3000
npm start
```

## 使用ライブラリ
|Name|Note|ドキュメントURL|
|:--|:--|:--|
|React|これがなければ始まらない。|https://reactjs.org/|
|Typescript|所謂、AltJS。解説は巷に溢れているが、静的な型付をすることが特徴。|https://www.typescriptlang.org/|
|material-ui|簡単にそれなりの画面を作る為のコンポーネント群を提供してくれる。|https://material-ui.com/|
|react-redux|非常にわかりやすい記事があるので添付<br>[たぶんこれが一番分かりやすいと思います React + Redux のフロー図解](https://qiita.com/mpyw/items/a816c6380219b1d5a3bf)|https://redux.js.org/<br> https://react-redux.js.org/|
|typescript-fsa(-reducers)|TypescriptでReduxを使うときのボイラーテンプレートです。これにより、記述を簡略化出来ます。|https://github.com/aikoven/typescript-fsa<br>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|作成したコンポーネントを単体で見られる様にしてくれるツール。<br>(このツール自体はReactには限らない。vue.jsなどでも利用可能。)|https://storybook.js.org/|


## ディレクトリ構成

こんな感じ

```sh
my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── .tsconfig.json
├── .storybook     # StoryBookの設定関連ファイル
│   ├── addons.js
│   ├── config.js
│   └── webpack.config.js
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
│   ├── API        # 外部APIとの通信はここにまとめる
│   ├── components # Atomic Designを使ってコンポーネントを管理している
│   │   ├── atoms
│   │   ├── molecules
│   │   ├── organisms
│   │   ├── templates
│   │   ├── pages
│   │   └── stories # StoryBookの定義
│   └── containers  # Redux connectはここにまとめている
│   └── routes      # SPAなので、各ページへのルーティングはここに記述
│   │   └── index.tsx
│   ├── sagas        # Redux-sagaの関連処理

│   │   └── index.ts # root saga
│   ├── modules      # Reduxのmodules。変則的かもしれないど、Ducks
│   ├── tests        # JestとStoryShotsをここで利用
│   │   └── __snapshots__ # snapshot
│   │   │   └── storyshots.test.ts.snap # snapshotファイル
│   │   └── reducers      # reducersのテストコード
│   │   │   └── sample.test.ts
│   │   └── storyshots.test.ts # storyshots
│   ├── App.css
│   ├── configureStore.ts # Reduxで使うStoreのconfigurationがまとまっている
│   ├── index.css
│   ├── index.tsx
│   ├── logo.svg
│   └── serviceWorker.ts
└─────
```

## この構成にした理由

別途、まとめ中です。下記のような構成で書いていこうと思います。

[Reactのアーキテクトを考える道のり - その1 (最小の構成)](https://qiita.com/motuo/items/7f41d204e6487db97bae)
[Reactのアーキテクトを考える道のり - その2(Fluxとの出会い)](https://qiita.com/motuo/items/761840cedb5db20e08f6)
[Reactのアーキテクトを考える道のり - その3(非同期処理でハマる)→Redux-saga](https://qiita.com/motuo/items/f82d8eb0560b64b0dea4)
[Reactのアーキテクトを考える道のり - その4(コンポーネントのディレクトリ構成に悩む)→Atomic Designとの出会い](https://qiita.com/motuo/items/a2bef95600bbe23ddfd1)
Reactのアーキテクトを考える道のり - その5(テストについて)→JestやStoryshotsについて