React File Structure
4 min read
Organise React projects with components/, pages/, hooks/, services/, and utils/ folders. Co-locate related files like Card.jsx, Card.test.jsx, and Card.module.css in the same Card/ folder for easy navigation.
Recommended File Structure
src/
├── components/
│ ├── ui/ # reusable atoms
│ └── features/ # domain components
├── hooks/ # custom hooks
├── pages/ # route components
├── context/ # context providers
├── services/ # API calls
├── utils/ # helper functions
├── types/ # TypeScript types
└── App.jsx