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に合わせてフォルダを作るので簡単に目的のファイルが見つかりますし、ページレイアウトのコンポーネントはフォルダと同名にしてあるので一目でわかります。
最近はこんな感じにしてる
いろいろReactアプリを作ってきて今はこんな感じで作ることにしています。
componentsとcontainerを分けない
1ファイルの中にcontainerとcomponentsを書いています。
例えばTodoのコンポーネントを作るときは1ファイルにこんな感じ
const Todos = () => { return ( <div></div> ) } const TodosContainer = () => { return <Todos/> }
フロントエンド開発でお困りのことはありませんか?
フロントエンドの開発支援を行っています。
・Reactの開発をお願いしたい
・コーディング作業を依頼したい
・javascriptライブラリを作って欲しい。
上記以外にも何かありましたらお気軽にお問い合わせください。