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!