Just showing off my current preference for a React project folder structure. I think this gives a good view and segregation of files for my react based projects.
Let's go through each folder inside the src folder.
api-config consist of file containing the api endpoints. This folder doesn't have any logic. This helps having a single place for all api url end points and not to be scattered around in components, mostly inside useEffects.
assets folder mostly consist of images(.png,.svg..) and any other static files that might be needed.
components folder consists of individual components, which are atomic in nature and doesn't compose any other components.
hooks as the name suggest consists of custom hooks, that you might develop for your project
constants as the name suggest consist of constants used across project
modules folder contains react components which are composed of smaller components defined under
common/components. For e.g. a
<Header /> component which may look like
<> <Title /> <Image /> <Menu /> </>
pages are one to one map of the router routes. This is similar to the concept that
This is the bigger react component which presents a whole page. It might contains additional routing, so more nested pages. An example of this page will be dashboard page which might look like (in it's simples form)
<> <PageHeader /> <PageTopMenu /> <PageLeftNavigation /> <VisitorBlockChart /> <VistorLineChart /> <SomeOtherAwesomeComponent /> <PageFooter> </>
7. store or Global context
store folder contains global store or global context that are getting used across product.
On side note, if you have not used
Zustand as react-redux replacement, give it a try. Very simple and easy to use state management system and you don't have to wrap your component inside a
Test folder. And please don't give it just a lip service. It's fun to write and really helps you out during refactoring(more than TypeScript.. :P)
Everything else to dump into(..not really, please don't do this).
Store common utility functions inside this folder.
A folder to contains all root level routes.
This folder structure has evolved in last one year and really helping me out in couple of my current big project.It doesn't mean that It will not change again, but at least for my next project, I will continue to use this structure.
Let me know what your preferences are these days?
Till Next Time