React folder structures... a topic that has been around for ages. But still React’s unopinionated approach frequently raises questions: “Where shou...
For further actions, you may consider blocking this person and/or reporting abuse
I found your article fantastic. Really very good. 👏👏👏
One thing I always see and today was the 1st time I asked myself.
how is this folder structure made? Is it a plugin or do you make the folder structure manually?
Thanks a lot for the nice words. I would create the folder structure manually. And I think most people would. It's only a one-time effort in the end. But there was a thread on Reddit yesterday where nx.dev was suggested to create a project. But honestly, I have never used it and also don't know what exact folder structure it creates.
Excellent article
Really good
This is great! Thanks for this!
Awesome Article 👍
Great article
Good walkthrough and great tips!
Thanks for the feedback
I'm always scared of nested folders mess..
Not sure if you have taken a look at Unreal engine source code but It is nested asf and finding something relevant blows away your mind
Yeah, I definitely wouldn't recommend nesting too deeply. Especially not components within components within components. That gets really messy.
Really good post. Bookmarked!
wonderful. Great article. It help me a lot. I was needing this
Great article. Nice tips :D
Great article man , thank you for sharing.
Do you think there should be a common folder for hooks that you may need to use across your features?
You can use one for sure. But I'd wait with creating global folders for common stuff until they're really necessary.
Hi @jkettmann! Just wanted to give a huge shoutout for your awesome article 👏. Big thanks for sharing! I came across this article a few months ago and it opened my eyes on screaming architecture. It also inspired me to create my own implementation of it with a complete project setup that can be use by anyone for their next or existing project. It's now live on GitHub: github.com/shaquille-galanto/screa.... Check it out if you have a moment. Thank you 🙌
I used to do something similar to this but now I just have /pages (because of next js I have to) and /components and /hooks ect are completely flat.
Each component will be a folder containing a single file of code, a styles file and potentially a test file. It's always a folder even if it has a single file so it's alway in alphabetical order it doesn't list the folders and then the single files in the IDE.
The moment you start having file hierarchies you start needing knowledge of the app to traverse it to find stuff. Also if you have a reusable component the you start having a "shared" location so now a file could be in shared or somewhere in the hierarchy or duplicated. If you keep it flat it's going to be huge but if you have a complicated app your going to have loads of features anyway.
When you try to find stuff you start with the page/route and you work your way in and you can see the list of components the whole time.
I found this blog post extremely insightful & useful! Thank You very much, Johannes!
Thank you so much for your great articles!
Hi there,
Which is best way to handle and store the routers and redux store in this architecture and root context providers. Please reply to this.