React + Reduxで作るアプリケーションをいくつか作っていて、フォルダ構成に悩みました。
調べてみると、以下の方法があるようです。
A： コンポーネントやコンテナなどのフォルダ分けする
B: ドメイン単位で分ける
私がしっくり来たのはドメインで分ける方法です。
以下のURL構造のSPAのフォルダ構成を例にします。
https://example.com/posts https://example.com/post/:id https://example.com/posts/new
パターンAのフォルダ構成は以下になります。
/components - Posts.tsx - Post.tsx - NewPost.tsx /containers - Post.ts - Post.ts - NewPost.ts
これはページ数が増えるとしんどくなります。
フォルダ内のファイルが増えるとcomponentとcontaienrのセット見つけるのがめんどうになります。
上記の理由でパターンBをよく使っています。
パターンBのフォルダ構成はこちら
/posts
- /posts
- index.ts
- Posts.tsx
- /PostList
- PostList.tsx
- /Header
- index.ts
- Header.tsx
- /post
- index.ts
- Post.tsx
- /newPost
- index.ts
- NewPost.tsx
こんな感じでページごとに分けます。
ページごとにフォルダを作り、以下にindex.ts（コンテナ）とフォルダ名と同名のコンポーネントを作成します。
リスト表示などページ内で使うコンポーネントはページ内にフォルダを作り配置します。
URLに合わせてフォルダを作るので簡単に目的のファイルが見つかりますし、ページレイアウトのコンポーネントはフォルダと同名にしてあるので一目でわかります。
