DEV Community

Cover image for ⚛️ Folder Structures in React Projects

⚛️ Folder Structures in React Projects

Will T. on March 20, 2024

Organizing files and directories within a React project is crucial for maintainability, scalability, and ease of navigation. This article explores ...
Collapse
 
bcostaaa01 profile image
Bruno • Edited

I don't think the statement you wrote on the disadvantages of level 3 is that much of a disadvantage, because any developer who is already working in the project, and also newcomers would still have a better idea of where to look for things if they are in their respective places, which come with a proper folder structure, in my point of view, and the business logic is thus properly defined. I do find it to be the way to go for big projects, though. Really great naming for the different parts of a React project!👍

Collapse
 
itswillt profile image
Will T. • Edited

Yeah, I had to come up with at least a disadvantage anyway, so... Having clear business concerns takes a bit more mental effort initially, but is not a real disadvantage.

Collapse
 
bcostaaa01 profile image
Bruno

Yes, that could be, especially if you’re a new dev in the team, that can be a great challenge at first, but once you know where to look for things by business concern, it will be easier to find the individual piece of code you are looking for. Good article in general! 👍 but found it funny when you said you had to come up with at least one 😄 sometimes there are things which we really want to find a disadvantage, but we get disappointed 😅

Thread Thread
 
itswillt profile image
Will T.

I figured it might be arrogant to say something that I came up with to have no drawbacks whatsoever 🤣.

Collapse
 
cgatian profile image
Chaz Gatian

I use a folder called /pages to signify top level routes, similar to the modules folder. IMO modules is too generic.

Collapse
 
itswillt profile image
Will T.

Sometimes I also use /pages or /features instead of /modules.

Collapse
 
simrancr profile image
Simran

These examples are very "Redux" focused and outdated. No one creates folders like actions or reducers anymore. All new projects are trying to stay away from Redux and adopted other state management solutions like "Zustand". Which simplified not just state management but made folder naming more sensible.

Collapse
 
itswillt profile image
Will T.

I agree that no one really uses Redux if it's a newer project anymore. I also use Zustand/Valtio and React Query in my projects, and I think Redux is redundant and should be discouraged. Nevertheless, it's my/our opinion since a lot of projects out there are still using Redux and some people still find it useful.

My bad for not noticing that those folders appear too often in the examples. Thanks for pointing out the details.

Collapse
 
tindl88 profile image
Tin Tran

How do you know Redux is outdate?

Collapse
 
inspiraller profile image
steve

Nice differentiation. I like 3.
There is no reason reused components across modules can't also be shared in a universal folder.

Also I prefer not to clutter my code with test files and reproduce the same folder structure for tests but in a separete __tests/ folder.

Collapse
 
itswillt profile image
Will T.

I used to work on projects that have a parallel __tests/ folder that mimics the same folder structure. I think that's also a good way to organize tests.

Collapse
 
bam92 profile image
Abel Lifaefi Mbula • Edited

Thank you for sharing.
I'd suggest giving a brief intro for different directories, unless it's so obvious. You can see the Gatsby Project Structure.

Collapse
 
itswillt profile image
Will T.

Thanks. That’d be a nice idea for the next articles.

Collapse
 
artu_hnrq profile image
Arthur Henrique

For level 3 forward, I'd also consider split each module in its own package, maybe through a monorepo approach; Even because a micro front-end solution could soon help into increase organization for a project that is rapidly growing in complexity

Collapse
 
itswillt profile image
Will T.

That is also a very reasonable approach, maybe we can even call that "Level 4".

Collapse
 
adaptive-shield-matrix profile image
Adaptive Shield Matrix

For any real projects (not hobby ones) - Level 3 is the only way.
Every other way will be a mess starting starting with 30-100k lines of code.
You may just skip the "modules/" folder entirely and make it more flat.

You always want files with in the same bounded context (term from DDD - Domain Driven Design) to be near each other. Grouping files/folders by domain first is always better than the technical separation.

Collapse
 
itswillt profile image
Will T.

The "Level 3" folder structure is heavily inspired by DDD. FYI, I actually took the idea from DDD.

Collapse
 
trisogene profile image
Daniel Dallimore Mallaby

Nice post

I usually use
/components ( all the generic one)
/pages ( contain specific component, Page hooks, Styles)
/config
/lib ( contain generic hooks, rtk, all the logic stuff that Is not a component)

Collapse
 
itswillt profile image
Will T.

That's similar to the "Level 1" folder structure that I mentioned, right?

Collapse
 
miketung profile image
Mike T

The level 3 organization reminds me of what Angular did already. Ultimately as long as there is a systematic way of putting files together that is coherent any dev should be able to find what they need with little trouble. I think that should be the takeaway.

Collapse
 
itswillt profile image
Will T.

Yeah, the important thing is consistency, no matter what you choose to go with.

Collapse
 
kansoldev profile image
Yahaya Oyinkansola

This is one of the best, if not the best article I have seen so far in my search for React Project structures, thank you for sharing. I think it helps to start projects from level 1 and walk your way up to level 3 or so, at least that's what I will do, cause then you can better see what works for you, and what doesn't, and even implement your own style

Collapse
 
user_af5d39430a profile image
user_af5d39430a

As someone who is OCDAF … I truly appreciate this post because when I started I could not find anything about how to structure my projects! I ended up just going back and forth and then projects got too big and it drove me mad!

Collapse
 
itswillt profile image
Will T.

Oh, an OCD fellow :)). I also feel irritated when I encounter a problem again and again, so I often spend a lot of time trying to solve it once and for all.

Collapse
 
codedivine profile image
Nenad Jovanovski

Once you work on a big project, the level 3 type grows on you and it's kind of the type you use even on small projects from that moment on. Because once it becomes natural to you, you use it everywhere, small to large.

Collapse
 
itswillt profile image
Will T.

And it's also gonna be the only thing that makes sense. Once it gets natural to you, It doesn't even take much mental effort anymore.

Collapse
 
mrdulin profile image
official_dulin

Can you clarify the differences between services and helpers for business logic?

Collapse
 
itswillt profile image
Will T. • Edited

Hi, thanks for the question.

  • The /services folder mainly contains more complex logic, and it'll most likely use the logic from the /helpers folder. Let's say you want to implement the employee search functionality in the FE side. There can be a lot of fields, and the fields can have different matching logic, and some fuzzy search might also be required. That can be considered complex logic already, and it should live in /services.
  • The /helpers folder is mainly for very simple, mainly one-liner logic, e.g.
export const isAdmin = (user: User) => user.role === UserRole.ADMIN;
Enter fullscreen mode Exit fullscreen mode

If you don't want to have the /helpers folder, it's fine to have all the logic live in the /services folder as well.

When I think of the /services folder, it does not only contain pure business logic but can also act like an orchestrator. Meaning it can call functions from the Persistence layer (e.g. network requests from the /api folder, or interacting with localStorage in the /lib folder, etc.) to get the inputs needed. The /services folder is like a facade (in the Facade design pattern], which I'll talk about more in one of my upcoming articles. Please look forward to it.

Collapse
 
mrdulin profile image
official_dulin

martinfowler.com/eaaCatalog/servic... explains the service layer clearly.

Collapse
 
sardiusjay profile image
SardiusJay

Nice write-up, i mean I really love this and i guess I will go for Level 3 when it comes to big project in React

Collapse
 
itswillt profile image
Will T.

I suggest you try it once and you'll find it beneficial and comfortable to work with.

Collapse
 
ashleyd480 profile image
Ashley D

Super helpful @itswillt. As a beginner in React- we are are just learning on Day 4 out of 5 on the React topic in bootcamp, it is helpful to see the approach on structuring the folders- and your visual examples provide a nice touch! ❤️

Collapse
 
itswillt profile image
Will T.

Thanks! It's so cool to hear that the article is helpful to your learning process.

Collapse
 
krakoss profile image
krakoss

very useful information Thank you very much for this article

Collapse
 
itswillt profile image
Will T.

Thanks. I'm glad that it's helpful for you.

Collapse
 
essijunior profile image
NDANG ESSI Pierre Junior

Thanks, I am really a fan of level 3 structure.

Collapse
 
ghislainmitahi profile image
Ghislain MITAHI

Wow! Great share, I like this.

Collapse
 
emmanuelonah profile image
Emmanuel Chikwendu Onah

Nice structure especially the modular structure.

I will like to sum this up to one keyword “colocation”. Always Colocate to the closest place of use.

Collapse
 
itswillt profile image
Will T. • Edited

I agree. The key is to always keep related stuff closer together.

Collapse
 
zeeshanahmadkhalil profile image
Zeeshan Ahmad Khalil

If we use rtk-query then it has its own structure and we can easly categorise application in to modules, each have its own CRUD in services.

Collapse
 
itswillt profile image
Will T.

Nice. I have never tried rtk-query. Maybe I'll take a look at it to see if I can learn a thing or two.

Collapse
 
novozelick profile image
Marcus • Edited

I miss the folder container. Usually this folder can be used for a object like form that is created with components from the folder components.

Collapse
 
itswillt profile image
Will T.

I also remember using that folder name for similar purposes. The folder list in the article doesn't include every type of folder names out there.

Collapse
 
adesoji1 profile image
Adesoji1

Really 😯

Collapse
 
rahul_kumar_here profile image
Rahul Kumar • Edited

I highly recommend react-factory-cli for anyone working with React. It simplifies project initialization and component generation, making development faster and more efficient. It has definitely improved my workflow, allowing me to focus on building the core features instead of repetitive tasks.
npmjs.com/package/react-factory-cli

Collapse
 
jirehnimes profile image
Jireh June Nimes

Happy to discover this article with almost same approach in structuring a React/React Native projects! We utilize the Level 2 approach.

Collapse
 
ferbbo profile image
Diego Benítez

I´m understanding how to structure my project and it comes just at the right time. Thanks

Collapse
 
awaisalwaisy profile image
Alwaisy al-waisy

How about Atomic Design System for Frontend project?

Collapse
 
_e1bb2fbb962254aef9fb4e profile image
케빈

Excellent.. !! Thank you

Collapse
 
mynk30 profile image
Mayank Soni

Great

Collapse
 
viper12358 profile image
Adrian Tran

Bookmarked! Not going to use this anytime soon but hey I'll keep this in mind for later.

Collapse
 
chandra_pantachhetri profile image
Chandra Panta Chhetri

I like how you gave the project size, pros & cons!

Collapse
 
youngemeritus profile image
youngemeritus

Nice

Collapse
 
aimeetacchi profile image
Aimee

Nice read thanks for sharing :)