How to Structure a React Project for Modularity and Reusability

Takahiro Iwasa

7/2/2023

1 min read

React

Directory Structure

• 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-core functionality with application-wide utilities.
  • Accessible from features and shared but must not reference features.
• features
  • Each feature module resides here.
  • These modules may reference components, core or shared but must remain isolated from the rest of the application to maintain modularity.
• shared
  • Contains shared utilities and components.
  • Accessible from features but must not reference 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/