DEV Community

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

 
ivan_jrmc profile image
Ivan Jeremic • Edited

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

Thread Thread
 
bettercodingacademy profile image
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.