Reactのディレクトリ構成を考えてみた

概要

1つのアプリケーション内に複数のプロジェクト(機能)を内包したアプリケーションのディレクトリ構成を考察する

構成

src
├── pages                   # routerで遷移するページコンポーネント
│   └── project
├── components              # アプリケーション全体で使用する部品コンポーネント
├── features                # プロジェクトごとのモジュール
│   └── project
│       ├── api             # 該当プロジェクトで使用するAPIリクエスト関数
│       ├── components      # 該当プロジェクトでのみ使用するコンポーネント
│       └── models          # 該当プロジェクトで使用する型
├── models                  # アプリケーション全体で使用する型
├── lib                     # どこからも参照できる共通定義
│     ├── config            # 静的な設定や環境変数のエクスポート
│     ├── utils             # 共通利用できる関数
│     ├── hooks             # React機能を使用した共通利用できる関数
│     └── constants         # 定数
├── assets                  # 画像やアイコン、共通スタイルシート
│     └── icon
├── routes                  # ルーティング定義
└── stores                  # ストア定義

参考