Reactで開発を行う際のsrc以下のフォルダ構成

プロジェクトによってフォルダ構成はバラバラですが、自分が組む場合はこうするよというのがあるのでご紹介をば。

前提

技術スタックは以下のイメージです。

• React
• Redux
• redux-saga
• CSS Modules
• TypeScript（今回は関係ないですが）
• Atomic Design

Rest api を使用するベタな構成です。

create-react-app の場合

├── actions
├── api
├── components
│ ├── atoms
│ ├── molecules
│ ├── organisms
│ └── templates
├── containers
│ └── pages
├── hooks
├── reducer
├── reducers
├── saga
├── sagas
├── store
└── styles

Nextjs の場合

├── actions
├── api
├── components
│ ├── atoms
│ ├── molecules
│ ├── organisms
│ └── templates
├── hooks
├── pages
├── reducer
├── reducers
├── saga
├── sagas
├── store
└── styles

詳細

create-react-app と Nextjs の違いは containers を切るか切らないかだけです、なので根本的な形は変わりません。

create-react-app の場合は containers 直下に index.tsx を切って一番外枠のルーティングを噛ませますが、Nextjs だと不要なので containers がなくても問題は起きない認識です。

api フォルダは不確定です、使用されるツールやサービスによって変わってきます。

hooks は custom hooks を格納するフォルダになります、旧 hocs になります。

styles にはグローバルな css や css 用の定数ファイルを配置しています、styled-components だとまた少し変わりそうです。

毎回 reducer と saga フォルダの置き場にむちゃくちゃ悩むんですが、現時点では src 直下が一番収まりが良いのかなと、rootReducer、rootSaga という名前でも良いかもですね。

GraphQL の場合フォルダ構成がスッキリしそうですが、どうなんですかね。

自分の場合は constants や helpers、utils などのフォルダはあまり切りません。

constants は環境変数や custom hooks でなんとか、helpers や utils は基本的に不要だと思っているので作成しません。

middleware を作成するとまた少し構成が変わりそうですが、今のところ作ったことがないので保留です。

Gatsby の場合は src 直下に markdowns フォルダを切っていますが、これで良いのかは不明です。

どなたかの参考になれば幸いです。