So, you’ve started building your React app, and everything is going great, until you realize your project folder is a mess. Sound familiar? Don’t w...
For further actions, you may consider blocking this person and/or reporting abuse
Terrible advice, to implement 1 more or less complex page will need 10 files in different directories. Will be a mess that hard to navigate.
Working with codebase structured by many folders, that person also used
Crypto.randomUUID()as Reactkey, just because Eslint complained about indexes.Code should reflect app and business logic, and adapt to it, there is no "right" universal answer.
Just structure folders by routes, put files right there, is something reused, then move it to a folder at the top level
App
-- public (or 'static')
-- routes/pages
-- -- route1
-- -- -- Page.tsx
-- -- -- Component1.tsx
-- -- -- Component2
-- -- -- -- Component2.tsx
-- -- -- -- index.ts
-- -- -- -- index.module.css
-- -- -- -- Component2.test.tsx
-- -- -- index.module.css
-- hooks
-- components
...
Don't do stuff like in picture.
There’s no one-size-fits-all solution when it comes to structuring a React app.
The best structure depends on the specific needs of the project, the team’s workflow, and the complexity of the app.
Your suggestion to organize by routes and keep related files together is a fantastic approach, especially for larger teams and more complex applications. It makes it easier to navigate, debug, and maintain the codebase, as everything related to a specific feature or route is grouped logically.
For example, your structure:
is a great way to keep things modular and intuitive. It ensures that developers can quickly find what they need without jumping between multiple folders.
The key takeaway here is that code structure should reflect the app’s logic and adapt to its needs. Whether it’s organizing by routes, features, or modules, the goal is to make the codebase scalable, maintainable, and easy to navigate for everyone involved.
Thanks for sharing your insights
I half agree, clearly context of the content is aiming for mid/big projects. On the other hand projects are alive as long as there are users, so you need to keep adapting your project, making big assumptions will be harder to fix.
There are more important principle than Solid - YAGNI (You aren't gonna need it).
Do things as needed, don't overcomplicate things. Assuming some folder structure from the start is a waste of time.
If project is small, anything will work, if it will grow, most of it will be restructured on the way. So why bother with making 100500 folders.
Its all written by AI
Nice!
Thank you 💙
Please don't structure your React project like this if a team is going to work on it, seperate the project into modules or use a folder structure that represents the routes of the app. Keep related things together, so other developers can easily find stuff, instead of having to look through several different folders when debugging.
Thank you for sharing your perspective!
You’re absolutely right, when working in a team, modularity and route-based organization can make a huge difference in maintainability and collaboration.
The structure I shared is more of a general starting point for small to medium-sized projects, especially for solo developers or beginners. However, for larger teams or complex apps, organizing by modules or routes is often the better approach. It keeps related files (components, styles, hooks, etc.) together, making it easier for everyone to navigate and debug.
For example, a route-based structure might look like this:
This way, everything related to a specific feature or route is grouped together, which can be a game-changer for team collaboration.
Ultimately, the best structure depends on the size of the project, the team’s preferences, and the complexity of the app. The key is to keep it organized, consistent, and easy to navigate.
Thanks again for your comment
Great article! I really like how you explained the structure of a React app. It's clear and easy to follow, especially for beginners. I'll definitely use some of these tips in my own projects. Thanks for sharing!
You’re welcome! I’m glad you found it helpful 💙
Great insights! The structured approach you’ve outlined for building React apps will definitely help developers keep their projects organized and maintainable. The clear explanation of the folder structure and separation of concerns is particularly helpful for scaling applications. Thanks for sharing these valuable tips
You’re welcome! I’m glad you found it helpful 💙
wow
🤗😍
Using Javascript instead of Typescript is bad idea! ;)
Good one
Thank you 💙
Great read!
Thank you 💙
Nice
Thank you 💙
Thank you for sharing! 😊🔥
You're welcome 😊💙
nice information
Thank you 💙
Very helpful, thank you!.
You're welcome 💙
Very helpful!
Thank you. I’m glad you found it helpful 💙
very nice, well explained. I am currently using similar structure. thank you for writing considering all parts of the project
You're welcome 😊 I’m glad you like it 💙
Define shared and core components for reuse and composition. Standardize naming to align with main components, especially for granular elements. More details here blog.stackademic.com/react-folder-...