React Project Structure

Understand a scalable React folder structure and how to organize UI, logic, and data layers.

Typical structure

txt

my-react-app/
  public/
  src/
    assets/
    components/
    pages/
    hooks/
    services/
    context/
    store/
    utils/
    styles/
    App.tsx
    main.tsx

What goes where

components/: reusable UI pieces
pages/: route-level screens
hooks/: reusable stateful logic
services/: API clients and external integrations
context/ or store/: global/shared state
utils/: pure helper functions

Feature-first structure (recommended for larger apps)

txt

src/
  features/
    auth/
      components/
      hooks/
      services/
      authSlice.ts
    products/
      components/
      services/

This keeps related code together and scales better.

Naming conventions

Components: PascalCase (UserCard.tsx)
Hooks: camelCase with use prefix (useAuth.ts)
Utils/services: camelCase (apiClient.ts)

Best practices

Keep components small and focused
Co-locate tests near source files
Avoid deep relative imports by using path aliases

Next, we will cover React syntax fundamentals.