⚛️ I'm a professional React developer, and this is the directory structure I use for my production projects. ⚛️

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!

Comments

[Ivan Jeremic]

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

[Better Coding Academy]

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. :)

[Ivan Jeremic]

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

[Better Coding Academy]

That's very peculiar! Definitely keen to understand more about your viewpoint.

If you have a structure as follows:

components/
  A/
    A.js
  B/
    B.js
  C/
    C.js
  D/
    D.js
  E/
    E.js

I presume that this is what you would do, even if E was only used by D, D was only used by C, and so on?

[Ivan Jeremic]

Sure and if there is a component that gets used by multiple main components it gets a own folder, simple as that.

[Better Coding Academy]

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 E is also being used by C as well as D, and C actually is including A. 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 :)

[Ivan Jeremic]

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.js and SideBar.js normally 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).

[Better Coding Academy]

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.

[George]

Sorry to say this, but I can't take developers seriously if they use emojis as commit messages :)

[Shaiju T]

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 :)