We need to translate the text visible to the user only. Do not explain or modify HTML tags.
We will explore how to structure a project in React, best practices for organizing folders and components, and prepare your application to grow without losing clarity.
React is flexible and does not impose a strict folder structure. This is positive because it allows adapting the architecture to project needs, but also may cause problems when the project grows:
A clear architecture facilitates:
You have here an example of how a modern React project could be organized:
src/ │ ├── assets/ # Images, fonts, icons ├── components/ # Reusable and generic components │ ├── Button/ │ │ ├── Button.tsx │ │ └── Button.styles.ts │ └── Modal/ ├── features/ # Application domains or functions │ ├── Auth/ │ │ ├── Login.tsx │ │ ├── Register.tsx │ │ └── authSlice.ts │ ├── Dashboard/ │ └── Profile/ ├── hooks/ # Custom hooks ├── services/ # APIs, fetchers and data logic ├── utils/ # General functions and utilities ├── context/ # Providers and global contexts ├── pages/ # Main views or pages ├── routes/ # Route configuration └── App.tsx # Main component
Details of this organization
- components/ contains generic components that can be used in different parts of the project.
- features/ groups complete application functionalities, including components, logic and own state.
- hooks/ stores reusable Hooks.
- services/ centralizes communication with APIs and any related data logic.
- utils/ contains pure functions or helpers.
- context/ centralizes Providers and global states.
- pages/ corresponds to the main routes of the application.
Best practices for organizing components
- Maintain small and focused components.
- Divide large components into sub-components.
- Name files and folders consistently.
- Avoid putting too many files in one folder.
- Prefers organizing by feature instead of type when the application is large.
State management and architecture
A solid architecture includes decisions on how to manage state:
The clear separation between state logic and component presentation improves maintainability.
There are several options:
Maintain consistency across the entire project regardless of the chosen option.
For large projects, consider:
