React+Reduxアプリのオレオレフォルダ構成

React+Reduxアプリのオレオレフォルダ構成

LINEで送る
Pocket

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/>
}
LINEで送る
Pocket

フロントエンド開発でお困りのことはありませんか?

フロントエンドの開発支援を行っています。

・Reactの開発をお願いしたい

・コーディング作業を依頼したい

・javascriptライブラリを作って欲しい。

上記以外にも何かありましたらお気軽にお問い合わせください。

コメントを残す