DEV Community

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

Read full post

Buniamin Shabanov • Jul 18 '21

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

Api-config contains not only endpoints, but a DI mechanism based on react context.(hard in setup, but great in usage)
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.

Kumar Nitesh • Jul 19 '21

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

Buniamin Shabanov • Jul 19 '21

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.

Eugene Goh • Jul 18 '21 • 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.

Kumar Nitesh • Jul 18 '21 • 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.

Eugene Goh • Jul 18 '21

Thank you.

OssiDev • Jul 18 '21

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!

Raí B. Toffoletto • Jul 19 '21

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

Insight Lighthouse • Jul 19 '21

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.

Buniamin Shabanov • Sep 17 '21

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)

Caio Henrique Oliveira Silva • Jul 20 '21

+1 for zustand
Awesome alternative for state management

I would add a types folder when using typescript

Itay Schechner • Jul 18 '21

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?

Kumar Nitesh • Jul 18 '21 • 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.