The React .js / Next.js Project Structure I Follow
The react-js, next-js project structure I got from internet
Source of The Structure
I have got it from Below Articles:
Main Article: https://dev.to/phukon/how-i-structure-my-react-projects-1lk
I also Follow: https://dev.to/itswillt/folder-structures-in-react-projects-3dp8
Make React Project Structure in effective manner.
Inexperienced dev ⤵
Experienced dev ⤵
Command to Achieve the Structure
Command to get the below structure:
mkdir -p src/{assets,components,config,features,hooks,lib,providers,routes,stores,test,types,utils} && find src/assets src/components src/config src/features src/hooks src/lib src/providers src/routes src/stores src/test src/types src/utils -type d -exec bash -c 'test -e "{}/index.ts" || echo > "{}/index.ts"' \;
The React.js Project Structure
How a project should look like:
src
|
+-- assets
|
+-- components
|
+-- config
|
+-- features
|
+-- hooks
|
+-- lib
|
+-- providers
|
+-- routes
|
+-- stores
|
+-- test
|
+-- types
|
+-- utils
components
: Shared components that grace the entire kingdomconfig
: The vault of global configurations, env variables, and secrets
features
: Feature based moduleshooks
: Mystical hooks, shared across the entire realmlibs
: re-exporting different libraries preconfigured for the applicationproviders
: Keepers of the application’s life force, the providersroutes
: routes configurationstores
: global state storestest
: The arena of trials, where utilities and mock servers prove their mettletypes
: base types used across the applicationutils
: shared utility functions
Now, let’s descend into the heart of a feature.
src/features/my-new-feature
|
+-- api # Declarations and API hooks, a symphony of requests for this feature
|
+-- assets # Treasures specific to the awesome feature
|
+-- components # Components, artisans sculpting the visual identity of the feature
|
+-- hooks # Hooks, magical spells woven into the fabric of this feature
|
+-- routes # Paths leading to the feature's pages, a roadmap of wonder
|
+-- stores # Keepers of state, guarding the feature's sacred truths
|
+-- types # TypeScript types, a lexicon for the feature's domain
|
+-- utils # The craftsmen, building utility functions exclusive to this feature
|
+-- index.ts # The grand entrance, the public API of this feature, revealing its essence
Set up absolute imports!
Absolute imports can make your import statements cleaner and more readable. They also help in avoiding long relative import paths.
// jsconfig.json/tsconfig.json
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}
🏁 Conclusion
Remember, every developer, seasoned or fledgling, has danced the maddening tango with spaghetti code. But with structure comes clarity, and with clarity comes the power to wield React with finesse.
So, as you forge your own path in the realms of frontend development, let this blueprint be your guiding light, your treasure map to organized brilliance. May your React projects chuckle at bugs, scoff at chaos, and stand firm in the face of coding calamities.