Optimizing React Directory Structure: MVVM and Container/Presentational Approach

Takahiro Iwasa

Jul 2, 2023

2 min read

React

In React development, structuring your project effectively is crucial for scalability and maintainability. In this post, I’ll outline a directory structure based on MVVM principles and the Container/Presentational pattern to help you build organized and modular applications.

Here’s the directory structure I designed:

The project is divided into four main directories: components, core, features, and shared.

• components
  • Contains simple and abstract common components.
  • These components are used across the project and can be considered application-wide parts.
• core
  • Holds the application foundation with application-wide utilities.
  • Accessible from features and shared but must not reference features.
• features
  • Each directory here represents a specific feature.
  • Can reference components, core, and shared but should not be referenced from them.
• shared
  • Contains shared utilities and components that are feature-specific but not application-wide.
  • Accessible from features but must not reference them.

Below is a simplified tree view of the directory structure:

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/

• Separation of Concerns: Each directory is designed to encapsulate specific responsibilities, reducing dependencies and improving clarity.
• Scalability: Adding new features or modifying existing ones becomes easier with clear boundaries.
• Maintainability: By adhering to strict reference rules, the codebase avoids cyclical dependencies and ensures modularity.

A well-thought-out directory structure is the backbone of any React application. By implementing the MVVM pattern and adhering to the Container/Presentational principles, you can ensure your projects remain modular, scalable, and easy to maintain.

Happy Coding! 🚀