僕が考えた最強の React ファイル構成

技術スタック

僕が考えた最強の React 技術スタック

Grouping by file type

基本的にこの考え方でフォルダを分ける

命名規則

キャメルケース

ファイル構成

• app.yaml
• app.storybook.yaml
• cloudbuild.yaml
• firebase.json
• json-server # 検討中
  • app.yaml
  • index.js / index.ts
  • routes.json
  • db
    • foo.json
• public / static
  • favicon.ico
• src
  • App.tsx
  • index.tsx
  • api / services
    • fooApi.ts / fooService.ts
  • components
    • Foo.tsx
  • constants
  • containers
    • Foo.tsx
  • contexts
  • firebase
    • clientApp.js
  • functions
  • layouts # たぶん必要ない
  • models / types
  • pages
    • index.tsx
  • store
    • store.ts
    • actions
      • foo.ts
    • facades
    • reducers
      • foo.ts
    • selectors
      • foo.ts
    • states
      • foo.ts
  • stories
    • foo.stories.ts
  • test # 検討中
    • pages
      • __snapshots__
      • index.test.tsx / index.spec.tsx

※ 自動生成されるファイルについてはいくつか省略してます

参考

• https://reactjs.org/docs/faq-structure.html
• https://ja.nuxtjs.org/guide/directory-structure/
• https://github.com/vercel/next.js/tree/canary/examples
• https://github.com/ngrx/platform/tree/master/projects/example-app/src/app
• https://github.com/reduxjs/redux/tree/master/examples