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. :)
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.
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.
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.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
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.