React · Chapter 41 of 42
Project Structure & Folders
As a React project grows beyond a few files, a clear folder structure keeps things maintainable. Common patterns include grouping by feature (feature folders) or by file type (components/, hooks/, pages/).
There's no single 'correct' structure — the goal is consistency and making related files easy to find.
By type
A simple approach: `src/components`, `src/hooks`, `src/pages`, `src/utils`. Works well for small-to-medium apps.
By feature
Larger apps often group by feature, e.g. `src/features/cart/{Cart.jsx, useCart.js, cart.module.css}`, keeping related code colocated.
Example 1 (bash)
src/
components/
Button.jsx
features/
cart/
Cart.jsx
useCart.js
pages/
Home.jsx
App.jsx
main.jsxOutput
(a typical feature-oriented React project layout)Related files for a feature are grouped together for easier navigation.
Key points
- No single correct project structure exists for React apps.
- Group by type (components/hooks/pages) for smaller apps.
- Group by feature for larger, more complex applications.
- Consistency across the codebase matters more than the specific pattern.
💡 Note: Refactor your folder structure as the app grows — what works for 10 components may not work for 200.