About Me: I've been a professional web developer for just over 10 years now. I'm currently the lead web development instructor at Better Coding Academy, and as part of what I do, I post videos on our YouTube channel at https://www.youtube.com/c/BetterCodingAcademy.
(Subscribe for awesome web development content!)
Many people have asked me to share the directory structure that I use for my React applications. I tend to stick to what works well for me, and keep it relatively consistent between applications; that way, I have a good structure that is replicated across my projects, making it easy to switch between them as necessary.
In this video, I provide a full breakdown of the hierarchy using a sample React app, and explain how I would scale it up as the app grows in the future. I hope you enjoy!
Here's the code on GitHub, if you would prefer: https://github.com/lucaschen/react-app-structure-demo
Happy coding!
Top comments (10)
Far away from the structure I like, you have to much nesting.
I have a component folder and all components are a folder with 1 or more files no nesting anymore, if a component belongs to header then it goes in the same folder. Same with hooks they stay inside my component unless they are needed elsewhere then I move them to the hooks folder.
components
----Header
-------Header.js
------------HeaderButtonGroup.js
---------SideBar
------------SideBar.js
------------SideBarMenu.js
hooks
----useMe.js
----useMeTo.js
Totally up to you! However, I find this scales very poorly as your project expands – once you have over 50 components, it starts to become very difficult to identify which components are using which. :)
Nope exactly the other way around and a lot of people said this, if you do your nesting more and more you will get totally lost in a big project
That's very peculiar! Definitely keen to understand more about your viewpoint.
If you have a structure as follows:
I presume that this is what you would do, even if
Ewas only used byD,Dwas only used byC, and so on?Sure and if there is a component that gets used by multiple main components it gets a own folder, simple as that.
Cool :)
So my problem with this structure, is that it's unclear which components are using which; for example, it could very well be the case that
Eis also being used byCas well asD, andCactually is includingA. This then makes it more difficult to change components without introducing side-effects, as it is not clear where your components are being used.Specifically, I prefer the nested directory structure, because it clarifies the dependants of a component relatively quickly. With the exception of shared components, which we can assume are used in multiple components and thus must be designed in a reusable manner, all other components are used only by their immediate parents in a very straightforward hierarchy.
Hope this clarifies things :)
The main Component folder name needs to be self-explaining and there is no problem which component uses which you just need to use wrapper components I do this by having in every project a containers folder so, for example, DashboardContainer.tsx inside I have all components the Dashboard needs and this is also the component that I give to the router in case of NextJS the pages folder and in case of CRA/react-router the Router element. In my example I used
Header.jsandSideBar.jsnormally with my method I would put them in Layout folder I will show you exactly what I mean by that.components
----Layout
-------Header.js
-------HeaderButtonGroup.js
-------SideBar.js
-------SideBarMenu.js
-------Layout.js
----ContactForm
-------ContactForm.js
-------GoogleMaps.js
-------Form.js
----NewsComponent
-------NewsComponent.js
-------NewsCard.js
-------NewsList.js
-------NewsComments.js
hooks
----useNews.js
----useSendEmail.js
Containers
----NewsContainer.js
----ContactContainer.js
(Give the Containers to the Router of your choice).
Yep, I get that :)
I'm glad that it works well for you! However, I have tried a similar layout before, and found that I was merely postponing the issues, as now you would simply have the same problems but within each sub-directory under the component directories.
Sorry to say this, but I can't take developers seriously if they use emojis as commit messages :)
Hi lucas, I saw all your posts was deleted from DEV community, now i can see that you have re-posted some of them under Better Coding Academy. Nice :)