Designing React Directory Structure: MVVM and Container/Presentational

Designing React Directory Structure: MVVM and Container/Presentational

Takahiro Iwasa
(岩佐 孝浩)
Takahiro Iwasa (岩佐 孝浩)
1 min read
React

I considered directory structure for pure React without Next.js in my latest work.

Directory Structure

I designed the directory structure as afollows:

Divided into four directories, components, core, features and shared

  • components
    • Used for simple and abstract common components.
    • Can be considered as project-wide and application-wide parts.
  • core
    • Application foundation containing application-wide parts
    • Accessible from features and shared but must not have references to features
  • features
    • Each feature
    • Can have references to components, core and shared but must not be referred to from them
  • shared
    • Shared parts containing not application-wide but feature-wide parts
    • Accessible from features but must not have references to them
src/
|-- assets/
|-- components/
|   |-- Elements/
|   |-- Forms/
|   |-- Layouts/
|   |-- Modals/
|   `-- Pages/
|        |-- Errors/
|        |   |-- AccessDeniedPage.tsx
|        |   |-- NotAuthenticatedPage.tsx
|        |   `-- SystemErrorPage.tsx
|        `-- ErrorBoundary.tsx
|-- core/
|   |-- api/
|   |   `-- interceptors/
|   |-- config/
|   |-- hooks/
|   |-- loaders/
|   |-- models/
|   |   `-- api/
|   |-- stores/
|   `-- utils/
|-- features/
|   |-- auth/
|   `-- .../
`-- shared/
Takahiro Iwasa
(岩佐 孝浩)

Takahiro Iwasa (岩佐 孝浩)

Software Developer at iret, Inc.
Architecting and developing cloud native applications mainly with AWS. Japan AWS Top Engineers 2020-2023