React project structure

react-project-structure.md

Project Structure

Why

• Easy to read
• Modularity
• Separation of Concerns

How

Directory setup:

my-project
└── src/
    ├── components/
    |	├── Component/
    |	|	├── index.ts
    |	|	├── Component.test.ts
    |	|	└── Component-style.tsx
    |	├── form/
    |	|	├── Component/
    |	|   	|	├── index.ts
    |	|	|	├── Component.test.ts
    |	|	|	└── Component-style.tsx
    |   | 	└── index.ts
    │   └── index.ts
    ├── pages/
    │   └── Login/
    │   |	└── components/
    |	|		└── index.ts
    |   │       	└── Component/
    |	|			├── Component.test.ts
    |	|			└── index.ts
    |	├── Login.test.ts
    |	└── index.ts
    ├── hooks/
    |	└── useHook/
    |		├── useHook.test.ts
    |		└── index.ts
    ├── context/
    |    └── index.ts
    ├── services/
    │   └── Login/
    |		├── Login.test.ts
    |		└── index.ts
    ├── routes/
    |   └── index.ts
    └── config/
	 

• components:
  • Contains the common or shared app components, each one should handle its own style, logic and tests.
• pages
  • Associated to routes . Would handle root view and logic. If a component would only be used within a page, it could be included inside the page module's name.
  • A shared folder could be included
• hooks
  • Global hooks folder
• context
  • For state management
• services
  • High level app logic, could be grouped by modules
• routes
  • All routing logic
• config
  • Global variables, constants, ...