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
That key thing is true though and also at starting new coder will not understand that much of context but they'll learn slowly and gradually.
Index as a key bad idea only if you can reorder children, so 95% of cases it's not the issue.
Modern popular ESLint configs not include this any more.
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.
solid and yagni are saying the same thing as you, they don't care about your folder structure. when i do folder structure i think like this, if i to remove this new feature, would be done by removing entire directory or do i need to navigate 50 different places and nit-pick them.
Its all written by AI
Yeah totally possible, didn't check that.
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 💙
Nice!
Thank you 💙
Using Javascript instead of Typescript is bad idea! ;)
Good one
Thank you 💙
wow
🤗😍
Nice
Thank you 💙
nice information
Thank you 💙
You're welcome 💙
Great read!
Thank you 💙
Thank you for sharing! 😊🔥
You're welcome 😊💙
How to Structure a React App Like a Pro - use Typescript
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 💙
Very helpful!
Thank you. I’m glad you found it helpful 💙
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-...
To deliver a pro-level React application one must use best practices that combine component modularization with reusable design alongside properly organized folders and need the implementation of state management tools like Redux and Context API. Assessable coding architecture coupled with the implementation of TypeScript and ESLint tools together with best practices generates considerable improvements to code maintenance. Through established practices and efficient workflow protocols a software development company facilitates smooth application development that leads to exceptional quality results.