React Project Structure

Organize your React project effectively.

Basic Structure

``` src/ components/ # Reusable components pages/ # Page components hooks/ # Custom hooks utils/ # Helper functions services/ # API calls contexts/ # Context providers assets/ # Images, fonts styles/ # Global styles ```

Feature-Based Structure

``` src/ features/ auth/ components/ hooks/ services/ dashboard/ components/ hooks/ shared/ components/ hooks/ ```

Component Folders

``` Button/ index.js # Export Button.js # Component Button.css # Styles Button.test.js # Tests ```

Naming Files

- Components: PascalCase.js - Hooks: useSomething.js - Utils: camelCase.js - Constants: CONSTANTS.js

Environment Files

``` .env # Default .env.development # Development .env.production # Production .env.local # Local overrides (gitignored) ```

Remember

- Group by feature or type - Keep components focused - Consistent naming - Separate concerns

> Next: Learn deployment!