The Complete Guide to Folder Structures in React

[@Farruh_13]

We need The Complete Guide to Front-end Architecture

[@ferin_patel]

Plus 1

[@avrakadavra1552]

+ 1

[@naveensakhamuri3171]

+1

[@karunesh91]

Only this guy, I repeat only this guy on whole of youtube understands what a beginner needs. I know nothing about coding and I promise I will be a life long subscriber.

[@vellogoute]

i have read many web articles about folder structures, they haven't convinced me, i was thinking about the same folder structure on this video and after watching this i will try it and see the benefits, it's better to try more than read and watch videos, thank you for your great video

[@harag9]

Nice, I like the features folder. It does make sense, however the "shared" folder you created at 23 mins in under features, I would put that higher up as "shared" is not a feature. Great vid, keep them coming!

[@Undrios]

The timing of this video is crazy I'm new to react and I'm confused on what's the best way to structure my folders Thank you 🙏

[@toastyy1455]

Now all i need is the rest of my team to actually take my advice that this is the file structure we need to organize things again :p

[@harag9]

LOL I know how you feel, same here - also the naming convention of the folders and files - we have folders where some start with capital letters and some are just all lowercase, we even have a couple that is all capitals... No idea what the previous team was thinking.

[@TannerBarcelos]

I like organizing by feature and keeping things like configs, utils, shared components, libraries etc. at the top level in /src and then have /api, /_components, /... in each /feature directory. Makes the code easier to maintain such that if there are multiple engineers working on the code, there is less likelihood that merge conflicts / duplicate code will be written since new features / updates / fixes are segregated by features.

[@trndsttr7585]

Brilliant as usual.

[@shahidshafi1227]

Thank you so much, i was looking for this, i saw it somewhere before, this is a better approach. i just implemented this in my current project.

[@golden7877]

Hey cosden do you recommend using vanilla redux in order to learn the pattern and then use the RTK ? What i mean is do i really need to get my hands dirty with the vanilla redux first,or understanding whats going on is enough and i can just go straight to the RTK, i can't seem to find good docs for vanilla redux neither a good video for it, maybe this sounds like a video idea?

[@cosdensolutions]

Go with RTK directly! It should be fine, then if you're curious, check out vanilla Redux

[@cwnhaernjqw]

16:00 that's true. Currently feeling that pain on a badly organized large enterprise project we have like 1500 components lmao

[@dreamsachiever212]

let's bump it up to 2k

[@alex_everget]

What if a team needs to work on a cross-functional (inter-feature) feature while there are other feature teams?

[@shohabbosurinov7202]

Could you create a video about FSD file architecture?

[@iamSergioCampbell]

What could be the name for this folder structure? In advance, thanks for the content.

[@Netvirux]

Can i do the same in react native project?

[@cosdensolutions]

Yeah

[@abhishek6519]

Please make the same video for next js

[@sunnysetia]

Make a video on vim please

[@prashlovessamosa]

Idk why comments got deleted in the last video can you please share some information about upcoming modules in your course.

[@cosdensolutions]

I will soon!

[@Deus-lo-Vuilt]

Thanks

[@ded-insult]

bro, check FSD

[@shakapaker]

Фигня перехайпленая

[@NerdistRay]

Hey, I've always wondered which VS Theme you use? Can you let me know? Thanks. Maybe you should do a quick video going over your VS Code setup, I like how you're using Vim and maybe you got some nice extensions list that I don't know about. Just my 2 cents.

[@hrithikprasad]

first one here :D

[@swornimshah8898]

Organize by features, name files with scopes like ( validator, component, hooks etc), create subfolders if needed. It works for ** React native too **. src -> modules(features) - login -login.screen.tsx -login.component.tsx -login.validator.ts -login.api.dto.ts -login.hooks.ts -login.**.**.ts - dashboard ..... .....

[@chibiskye]

That’s the first time I’ve seen that file naming structure 🤔 I’ve worked with structures that have test files named that way, like “login.test.tsx” but I hardly see any other file structure that applies that naming scheme to other files…

[@swornimshah8898]

@@chibiskye Personal opinion, it looks readable for most of the common files instead of adding folders, may be for components we can create folders.

[@chibiskye]

@@swornimshah8898 I see... since my last comment, I've also had a chance to start learning Angular and I do see that file naming structure used in Angular. I can see how the structure you proposed will be useful with Angular framework, but I personally haven't seen it used often for React, which was why I was a bit confused so thank you for explaining :)