DEV Community

Cover image for Screaming Architecture - Evolution of a React folder structure

Screaming Architecture - Evolution of a React folder structure

Johannes Kettmann on February 25, 2022

React folder structures... a topic that has been around for ages. But still React’s unopinionated approach frequently raises questions: “Where shou...
Collapse
 
miguelsmuller profile image
Miguel Müller

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?

Collapse
 
jkettmann profile image
Johannes Kettmann

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.

Collapse
 
krissh_the_dev profile image
Krissh

Excellent article

Collapse
 
naztech01 profile image
Nazmul Hossain

Really good

Collapse
 
mediocre_dev profile image
Corey Moten

This is great! Thanks for this!

Collapse
 
suraj7484 profile image
Suraj Burman

Awesome Article 👍

Collapse
 
alont6 profile image
Alon T

Great article
Good walkthrough and great tips!

Collapse
 
jkettmann profile image
Johannes Kettmann

Thanks for the feedback

Collapse
 
dumboprogrammer profile image
Tawhid

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

Collapse
 
jkettmann profile image
Johannes Kettmann

Yeah, I definitely wouldn't recommend nesting too deeply. Especially not components within components within components. That gets really messy.

Collapse
 
devkiran profile image
Kiran Krishnan

Really good post. Bookmarked!

Collapse
 
alexalannunes profile image
Alex Alan Nunes • Edited

wonderful. Great article. It help me a lot. I was needing this

Collapse
 
kkyler profile image
Khai

Great article. Nice tips :D

Collapse
 
mohamedwaelbishr profile image
Mohamed Wael Bishr

Great article man , thank you for sharing.

Collapse
 
sanikbajrachary profile image
Sanik Bajracharya

Do you think there should be a common folder for hooks that you may need to use across your features?

Collapse
 
jkettmann profile image
Johannes Kettmann

You can use one for sure. But I'd wait with creating global folders for common stuff until they're really necessary.

Collapse
 
shaquille-galanto profile image
Shaquille

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 🙌

Collapse
 
develliot profile image
Develliot • Edited

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.

Collapse
 
sujitmohanty profile image
Sujit Mohanty

I found this blog post extremely insightful & useful! Thank You very much, Johannes!

Collapse
 
aposhtol profile image
Ante Brozović

Thank you so much for your great articles!

Collapse
 
ranjithpmankada profile image
Ranjith • Edited

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.