React Project Structure for Modularity and Reusability

Organize a React project into components, core, features, and shared directories with explicit dependency boundaries.

Takahiro Iwasa

2023-07-02

2 min read

Directory Structure

components
- Contains generic UI components such as elements, forms, layouts, and modals.
- These components can be used throughout the application and must not depend on a specific feature.
core
- Holds application-wide infrastructure and configuration, including API clients, stores, models, and loaders.
- Can be referenced by features and shared but must not reference features.
features
- Contains one module for each application feature.
- A feature may reference components, core, and shared, but feature modules should not depend on one another directly.
shared
- Contains reusable, non-visual utilities and logic shared by multiple features.
- Can be referenced by 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/

Conclusion

Splitting a React project into components, core, features, and shared directories separates UI primitives, application infrastructure, feature code, and reusable non-visual logic.

The separate components layer distinguishes application-wide UI primitives—such as buttons, layouts, and modals—from the non-visual utilities in shared.

As the project grows, placement is determined by responsibility rather than usage count: reusable UI belongs in components, reusable non-visual logic belongs in shared, and feature-specific code stays within its feature module.

Back to posts