DEV Community

Cover image for React Project Folder Structure

React Project Folder Structure

Kumar Nitesh on July 18, 2021

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 b...
Collapse
 
metammodern profile image
Buniamin Shabanov

Great structure. I use almost the same except 2 folders:

  1. Api-config contains not only endpoints, but a DI mechanism based on react context.(hard in setup, but great in usage)
  2. No common folder, just components and hooks in src/.

And also a "types" folder whether I use TS or not(usually I do)
But I think I'll upgrade my structure and add common folder. Thanks for the idea.

Collapse
 
knitesh profile image
Kumar Nitesh

I still need to use Typescript, have been hearing lots of good stuff about it.

Collapse
 
metammodern profile image
Buniamin Shabanov

To be honest it has some bugs. On one of the conferences it was told that due to the bug in typescript a person died. The main idea was that it was a medical app and it was for doctors. The app did not render allergies block, cause it was based on typescript Map and there was a bug with copying that map. And the doctor did not see the allergies.
But anyway, imho it is more the case for not good test coverage.

Collapse
 
eugenegohh profile image
Eugene Goh • Edited

Hey Kumar, thanks for sharing it! I have a question, may I know does this file structure applicable to Next.js React Full Stack App too? I want to include front-end & back-end but I am not really sure how to structure it. I have Googled a lot.

Collapse
 
knitesh profile image
Kumar Nitesh • Edited

Hi Eugene,
For a full stack Next project, I still prefer to create client & server folder right under src. The server folder structure differs then the client folder, in the sense all server logic, like DB interactions, authentication, goes under server folder, but all UI related logic and routes goes under client folder.
I try to keep it separate just like any react project, even when it is using NExt.js where everything is on the server side.

Also, look at https://github.com/oh-my-c0de/oh-my-fullstack, it has skeleton project for your need. Use it as starting point, and then come up with your own folder structure.

Collapse
 
eugenegohh profile image
Eugene Goh

Thank you.

Collapse
 
raibtoffoletto profile image
Raí B. Toffoletto

That's a great structure to inspire people. Took me sometime till I figured out my own way to organize stuff, but is pretty close to yours. Main difference is hooks and components are at top level.
And yes, TESTing is super important, we have to keep it in mind. 😉

Collapse
 
rcls profile image
OssiDev

This post inspired me to look at Next.js and Nuxt.js docs, and behold, both contain an option to put your /pages and whatnot folders under /src. The fact that the root is so populated erks me so much and I can't do a search to a single folder. This makes the folder structure so much cleaner.

I use a very similar structure in many apps I write, but I haven't used a folder structure that splits them into three levels like this. That's a nice idea!

 
metammodern profile image
Buniamin Shabanov

That's not an anecdote)
As I remember this was a story by Ilya Klimov, his channel is JavaScript Ninja and he told this on one of the conferences and the project was private. So that's why you can't find it on internet)

Collapse
 
mattferrin profile image
Insight Lighthouse

I wrote a very simple tool that can be added to a precommit hook and/or pipeline to help enforce directory structure. It has no usage and isn't published to npm. github.com/mattferrin/folder-struc...

My first opinion is that api-config, modules, pages, and stores spread features across multiple folders unnecessarily and might make naming consistency more difficult. My second opinion is that utils and common are basically the same feature in two places.

I personally group by feature at the top level and then by functions, objects, types, components, and hooks within each feature.

Collapse
 
itays123 profile image
Itay Schechner

Thanks for sharing. I remember someone once told me that when looking at your arc folder you should know what this website is meant for, and this is how I organize my folders veer since. How do you find this aproach?

Collapse
 
knitesh profile image
Kumar Nitesh • Edited

This is a tough questions.
Normally, the project name and description in package.json should tell you what your project/website is for. You can have your folder name with prefix of the the work that you doing, for e.g., if you developing a e-commerce website, you can append ecom-. But it will be tough. For me this common structure has worked and it's easy for any developer from other team to join and immediately know where the code will go.

Collapse
 
caiohenriquesilva profile image
Caio Henrique Oliveira Silva

+1 for zustand
Awesome alternative for state management

I would add a types folder when using typescript

Collapse
 
sumanthapamagar profile image
sumanthapamagar

This is so simple yet so amazing. I always struggle to organize the files. Thanks

Collapse
 
momin profile image
Md Abdul Momin

Could you update the spelling for assest => assets . Basically I'm following this stracture. Thanks

Collapse
 
alan2207 profile image
Alan Alickovic

Hi Kumar, that is a very good structure, I am using something similar too:

github.com/alan2207/bulletproof-re...

Collapse
 
knitesh profile image
Kumar Nitesh

I like the feature based folder that you have!!

Collapse
 
baziotabeans profile image
fabioBaziota

Great

 
metammodern profile image
Buniamin Shabanov

I'm gonna ask him now directly