DEV Community

Cover image for React Project Structure Best Practices for Scalable Application

React Project Structure Best Practices for Scalable Application

Syakir on June 09, 2020

This post was originally published at https://www.devaradise.com/react-project-folder-structure A react project structure or architecture plays an...
Collapse
 
rezamor profile image
Reza • Edited

Not a good folder structure when you want to apply code splitting or doing micro front-end.
Each module should go into its own folder. the module folder needs to have it is own sub-folders of Views/Pages, Redux (Services), API, etc. It is a variation of ducks folder structure we use in our big projects. You can easily grab the folder and split the code of view and redux. You can also put it into another repository to do micro frontend

Collapse
 
syakirurahman profile image
Syakir

So, what you're suggesting is a modular architecture. Grouping views and redux folder is a good idea.
Thanks for sharing it.

Collapse
 
miketalbot profile image
Mike Talbot ⭐

Yeah just for reference: webpack et al statically analyse the project and use the results of this to build chunks to be loaded. If you aren't using a good structure it can get messy really quick. Reza's suggestion makes that neat.

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
alexandrzavalii profile image
Alex Zavalii

Any resources on this?

Collapse
 
miggleness profile image
Miguel Cudaihl

Here's one that I reference. While not limited to the front end it gets the idea out. youtu.be/T6nglsEDaqA

You can look up vertical slice architectures.

Collapse
 
daksamit profile image
Dominik Aksamit • Edited

That's pretty similar to Nuxt's (Vue) default directory structure.
It has assets, components, pages, store, and also plugins, and layout.
Of course, we can easily extend with utils, services or helpers, etc.

Sometimes I use directories like mocks, tests, graphql, lang, resources...
It depends on the project I'm currently working on.

Collapse
 
syakirurahman profile image
Syakir • Edited

Yap. That's why i said no architecture that can fit to any kinds of project.

Collapse
 
alonmiz profile image
Alon Mizrahi

Cool.
suggesting renaming "Parts" to "Layout", as parts is ambiguous

Collapse
 
syakirurahman profile image
Syakir

Ah, yes! layout is better. Thanks for your suggestion.

Collapse
 
cdsaenz profile image
Charly S.

I agree, I used layout too (which I was using in gatsby by the way), but the rest of the structure is very helpful for a React beginner like me, thanks @Syakir.

Collapse
 
pranjalagnihot8 profile image
Pranjal Agnihotri {..❤️}

Thanks for sharing the structure, I had only one issue if we are using Redux Saga then I prefer writing our API calls in saga files, instead of writing in it Services as response from API are stored in the redux state. So it becomes more easier in Saga.

Collapse
 
syakirurahman profile image
Syakir

Yeah, that's another case if you use redux saga.
services folder function can be replaced by redux saga, so you dont have to include it anymore.

Collapse
 
e4emre profile image
Emre

I find it funny that people make "single page application" and then have multiple "pages" in their one page application. It is akin to building a relational schema in a 'nosql' database.

Collapse
 
astromium profile image
Ayoub Belouadah • Edited

Awesome architecture , thanks for sharing <3

Collapse
 
syakirurahman profile image
Syakir

You're welcome :D

Collapse
 
wobsoriano profile image
Robert

Good one. 🚀

Now try RN project structure with react-navigation v5

Collapse
 
syakirurahman profile image
Syakir

Ok, will post it on another article

Collapse
 
syakirurahman profile image
Syakir

Ok, thank you.

Collapse
 
geekpius profile image
Fiifi Pius

Really helpful and reminded me that am doing the right thing.

Collapse
 
saphareong profile image
Normie Tran

Cool
but where do we put our react hook stuff

Collapse
 
noveltyz profile image
noveltyz

Thanks.
I am thinking about Components and Parts folder.

For example, if we use navbar as component or parts, in the navbar component, can I use Redux?

This is good for HOC?

Collapse
 
cdsaenz profile image
Charly S.

I loved the services folder and concept. Everything you can logically separate gives more peace of mind.

Collapse
 
prafulla-codes profile image
Prafulla Raichurkar

Thanks for this helpful architecture. Separating APIs from components is a great idea!

Collapse
 
syakirurahman profile image
Syakir

You're welcome. Glad you like it.

Collapse
 
zinge profile image
Info Comment hidden by post author - thread only accessible via permalink
Semyon Zingelshuher • Edited
Collapse
 
zachary profile image
zachary

It is better to describe this with tiny example codes, nice article, thanks for sharing.

Collapse
 
syakirurahman profile image
Syakir

Which part do you think is not clear enough?
I will update it later.
Thanks for comment anyway.

Some comments have been hidden by the post's author - find out more