React+Typescriptを使ったシステム構築を検討する上で、「これは使うよなー」と思ったライブラリをまとめて、サンプル付きのボイラーテンプレートを作りました。
動機
Reactで実際に動くシステムを作ろうすると、色々なライブラリを使いたくなる。
でも、一つのライブラリを動かすために、ディレクトリ構成を考え直したり設定をコードに書いていくのは本当に大変。。。
なので、共通して使えそうなエッセンスだけを抽出してボイラーテンプレートを作りました！
Demo
リポジトリの場所
使い方
下記のコマンドを実行するだけ。
# 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 | 非常にわかりやすい記事があるので添付 たぶんこれが一番分かりやすいと思います 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/ |
ディレクトリ構成
こんな感じ
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 (最小の構成)
Reactのアーキテクトを考える道のり - その2(Fluxとの出会い)
Reactのアーキテクトを考える道のり - その3(非同期処理でハマる)→Redux-saga
Reactのアーキテクトを考える道のり - その4(コンポーネントのディレクトリ構成に悩む)→Atomic Designとの出会い
Reactのアーキテクトを考える道のり - その5(テストについて)→JestやStoryshotsについて