How to Structure a React Project in 2024

Why Structure Matters

A logical folder structure makes a project easier to navigate and scale. As your app grows from a few components to hundreds, finding files quickly becomes crucial for developer productivity.

The Features Folder Pattern

Instead of grouping by file type (e.g., all components together, all hooks together), group by feature. This keeps related code co-located.

src/
├── features/
│   ├── auth/
│   │   ├── components/
│   │   ├── hooks/
│   │   └── api/
│   └── dashboard/
├── components/ # Global shared components
├── hooks/      # Global shared hooks
└── lib/        # Third-party setups

Guidelines

Here are some golden rules to keep in mind:

1. Keep it flat: Avoid deep nesting. 3-4 levels should be the maximum.
2. Co-locate tests: Put test files next to the implementation files.
3. Index exports: Use index.ts files to expose a public API for each feature.