Best way to organize your react project (2024)

Sorry to disappoint you, but i cant give you a specific project folder structure. But accordind to the experience that i have working on more than twenty real life reactjs project i´m going to share my point of view.

Stop looking to others solutions

There isn’t necessarily a one-size-fits-all answer to what is the best ReactJS folder structure for a complex project in 2023 or other year, as it can depend on various factors such as team preferences, project requirements, and/or scalability needs.

But calm down, it´nt all lost, i´going to help you

However, I can provide you with some guidelines that can help you design a robust and scalable folder structure for your project:

1. Divide your application into features or modules: Organize your application into independent, reusable, and testable features or modules that represent a specific functionality or section of the application. For example, you can have a “dashboard” module, an “authentication” module, a “billing” module, etc.
2. Use a flat folder structure: Avoid nesting your files too deep, as this can make it difficult to navigate and maintain your codebase. Instead, organize your files by feature or module and keep them at the same level.
3. Group your files by type: Within each module or feature, group your files by type, such as components, containers, reducers, actions, etc. This can make it easier to find and maintain related files.
4. Use meaningful names: Give meaningful and descriptive names to your files and folders to help you and other developers understand their purpose and contents.
5. Separate concerns: Separate your application logic into different folders, such as “services” for API requests, “utils” for helper functions, and “config” for environment variables and configurations.
6. Use an index file: Use an index file within each folder to export its contents, which can make it easier to import and use the files in other parts of your application.
7. Use a common folder: Create a “common” folder to store shared components, styles, and utilities that can be reused across different features or modules.
8. Consider code splitting: If your application is large, consider using code splitting to split your code into smaller, more manageable chunks that can be loaded on demand.
9. Here you have the structure that i use in most of my projects :https://www.figma.com/file/5ELzB0feWGDx5qMtvRKQkh/rps?node-id=0%3A1&t=yjVcliKpyeoyAqc4-0

Please, keep it in your mind

Keep in mind that these are just general guidelines, and you may need to adapt them to your specific project needs.

Thank you!