This post was originally published at https://www.devaradise.com/react-project-folder-structure
A react project structure or architecture plays an...
Some comments have been hidden by the post's author - find out more
For further actions, you may consider blocking this person and/or reporting abuse
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
So, what you're suggesting is a modular architecture. Grouping views and redux folder is a good idea.
Thanks for sharing it.
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.
Any resources on this?
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.
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.
Yap. That's why i said no architecture that can fit to any kinds of project.
Cool.
suggesting renaming "Parts" to "Layout", as parts is ambiguous
Ah, yes! layout is better. Thanks for your suggestion.
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.
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.
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.
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.
Awesome architecture , thanks for sharing <3
You're welcome :D
Good one. 🚀
Now try RN project structure with react-navigation v5
Ok, will post it on another article
Ok, thank you.
Really helpful and reminded me that am doing the right thing.
Cool
but where do we put our react hook stuff
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?
I loved the services folder and concept. Everything you can logically separate gives more peace of mind.
Thanks for this helpful architecture. Separating APIs from components is a great idea!
You're welcome. Glad you like it.
atomicdesign.bradfrost.com
FYI
It is better to describe this with tiny example codes, nice article, thanks for sharing.
Which part do you think is not clear enough?
I will update it later.
Thanks for comment anyway.