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