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

2020-06-09

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


前提

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

  • 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 フォルダを切っていますが、これで良いのかは不明です。


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

© 2018 kk-web