Designing React Directory Structure: MVVM and Container/Presentational

Takahiro Iwasa

Jul 2, 2023

1 min read

React

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

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/