The Complete Guide to Folder Structures in React

Поділитися
Вставка
  • Опубліковано 25 лис 2024

КОМЕНТАРІ • 35

  • @Farruh_13
    @Farruh_13 25 днів тому +49

    We need The Complete Guide to Front-end Architecture

  • @karunesh91
    @karunesh91 21 день тому +1

    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.

  • @harag9
    @harag9 24 дні тому +4

    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
    @Undrios 23 дні тому

    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 🙏

  • @trndsttr7585
    @trndsttr7585 11 днів тому

    Brilliant as usual.

  • @shahidshafi1227
    @shahidshafi1227 24 дні тому

    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.

  • @TannerBarcelos
    @TannerBarcelos 24 дні тому

    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.

  • @toastyy1455
    @toastyy1455 25 днів тому +3

    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
      @harag9 24 дні тому

      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.

  • @cwnhaernjqw
    @cwnhaernjqw 24 дні тому

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

  • @golden7877
    @golden7877 24 дні тому

    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
      @cosdensolutions  24 дні тому +1

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

  • @iamSergioCampbell
    @iamSergioCampbell 22 дні тому

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

  • @shohabbosurinov7202
    @shohabbosurinov7202 24 дні тому

    Could you create a video about FSD file architecture?

  • @alex_everget
    @alex_everget 24 дні тому

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

  • @sunnysetia
    @sunnysetia 24 дні тому

    Make a video on vim please

  • @abhishek6519
    @abhishek6519 24 дні тому

    Please make the same video for next js

  • @Deus-lo-Vuilt
    @Deus-lo-Vuilt 24 дні тому

    Thanks

  • @Netvirux
    @Netvirux 25 днів тому

    Can i do the same in react native project?

  • @prashlovessamosa
    @prashlovessamosa 25 днів тому

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

  • @NerdistRay
    @NerdistRay 24 дні тому

    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.

  • @ded-insult
    @ded-insult 25 днів тому

    bro, check FSD

    • @shakapaker
      @shakapaker 18 днів тому

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

  • @hrithikprasad
    @hrithikprasad 25 днів тому

    first one here :D

  • @swornimshah8898
    @swornimshah8898 25 днів тому

    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
      @chibiskye 24 дні тому

      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
      @swornimshah8898 23 дні тому

      @@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
      @chibiskye 23 дні тому

      @@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 :)