Тёмный

Junior vs Senior React Folder Structure - How To Organize React Projects 

Web Dev Simplified
Подписаться 1,6 млн
Просмотров 458 тыс.
50% 1

FREE React Hooks Course: courses.webdevsimplified.com/...
React is an unopinionated framework, but with that freedom comes the difficulty of choosing how you want to structure your project. This is something many React developers of all skill levels struggle with so today I want to show you 3 different ways to lay out React projects of various sizes and complexities.
📚 Materials/References:
FREE React Hooks Course: courses.webdevsimplified.com/...
GitHub Code: github.com/WebDevSimplified/r...
Pure Functions Video: • Learn Pure Functions I...
Pure Functions Article: blog.webdevsimplified.com/202...
Facade Pattern Video: • Facade Pattern - Desig...
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
00:55 - Beginner
03:50 - Intermediate
09:41 - Advanced
#ReactJS #WDS #ReactFolderStructure

Опубликовано:

 

25 июн 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 357   
@devinosborne3396
@devinosborne3396 Год назад
Can't believe this isn't more documented on the web yet. People need to start talking more about what it looks like to build projects with enterprise level structure :D Great Stuff!
@joaquin67
@joaquin67 Год назад
This was my very first concern learning how to make simple apps back in college. Nobody was really able to answer my question and just like you said, it's not documented at all online! It would have sped up my learning so much.
@pleasejustletmebeanonymous6510
​@@joaquin67 That's because there isn't one right way to do something like this, not to mention it is a huge misconception that the average company does things in a coherent manner anyway. Most organizations are likely just using whatever file-structure happened to have been chosen by the dev who first setup the project many years ago, and odds are they didn't put much thought into it in the first place. The current devs might know it's a mess, but they have a sprint to finish. They don't have time to be working on their efficiency.
@joaquin67
@joaquin67 Год назад
@@pleasejustletmebeanonymous6510 while that may be true, just seeing one example that's thought out and explained is a major help in getting my head wrapped around the bigger picture of the application. It can then help me better understand other projects, regardless of structure. But now I wonder if many projects will have to be re-written with the help of AI lol
@shenrr6802
@shenrr6802 Год назад
@@pleasejustletmebeanonymous6510 Agreed, but I would like to add that it is the responsibility of leadership and management to work on this, and the devs should be vocal about it.
@pleasejustletmebeanonymous6510
​@@shenrr6802 In an ideal world, yes. In reality, it depends on the company. Sometimes things are a mess because no one has made an effort to be vocal about it and get it fixed, but a lot of the time it's just office politics, bureaucracy, or poor management. So yes, ideally you work at a company where being vocal about problems is encouraged and makes a difference, but a lot of the time it's probably better to remember that at the end of the day your real goal is to get a paycheck.
@florianhundegger
@florianhundegger Год назад
great video! would love to see a next part on a nodejs / express backend api!
@august-lemon9244
@august-lemon9244 Год назад
yes! please! ive been having trouble with this
@Nishantkumar-wx9mc
@Nishantkumar-wx9mc Год назад
W
@recursion.
@recursion. Год назад
ratio plus html / php
@partiid
@partiid Год назад
There's no need, just use Nestjs instead
@raphaeltorsu8655
@raphaeltorsu8655 Год назад
same here
@offroaders123
@offroaders123 Год назад
Thanks so much for making this video! I've been searching for a breakdown like this for some time now, and this will help a lot with structuring my NPM projects' folders.
@patocardo
@patocardo Год назад
As far as my experience allows me to say, I can add the following: 1. the 'junior approach' becomes very problematic as soon as a second programmer start to work on that code. So I would directly jumpt to the second approach 2. The third approach is very near to the hexagonal architecture, which facilitates the ownership of each programmer in a domain, reduce the risk of conflict and makes it cheaper to transfer the domain to another service. At this point, typescript should be used, and a "dto" folder for types should also be added.
@witmentality5910
@witmentality5910 11 месяцев назад
you mean interface? dto is for api
@PROJECTJMUSIC
@PROJECTJMUSIC Год назад
This was extremely helpful! I'm building a rather large project and couldn't think of a clever way to structure my files. As I'm still at the start it'll be quite easy to apply your method of folder structuring.
@PrinceRk_
@PrinceRk_ Год назад
as always, so clear and well explained. I suggest you to share an actual project (if you can of course) for each type of structure. It would be amazing, I guess a lot of people likes to have an exemple to work with as I do. anyway, just keep going you are amazing ! ha and thanks for the free course :)
@chickenchoclates1971
@chickenchoclates1971 9 месяцев назад
he has shared it's in the description
@typingturtle5155
@typingturtle5155 Год назад
Neat idea! Would love to see a followup on monorepo structure.
@krumbo
@krumbo Год назад
Yeah mono repo +1. Shows us the structure for a multi tenant app.
@renatolins4670
@renatolins4670 Год назад
This is what I do as a front-end specialist: - domain: This is a suggestive/temporary name that represents the only(and the main) module that the application has. If/when the application scales, new folders like this would be created for each domain, so we could have 'users' (for example) and its components, pages, icons, hooks, etc., and another folder called 'payment' and its components, pages, icons, hooks, etc. It is important to highlight that an application domain can have multiple pages and that those pages will be sub-routes, for example, users/registration, users/permissions, etc - shared: A folder represents code that is used/reused without being tied to any application's rule. This folder is not called 'common' because it does not just hold common code but also has the potential to become a private/internal library - other projects within the same company could be using a versioned flavor of this folder. Regarding the project's structure/organization, this folder is also a container for another folder, so it will hold shared components, models, icons, hooks, etc. So... Pages (and page folders) will not be treated as containers for multiple pieces of code, as this only happens with domain and shared folders. Pages will be treated as normal components, with the difference that they will be rendered when we reach certain routes. That said, components and pages will use the same naming conventions, coding patterns, testing approach, etc
@Mikenight120
@Mikenight120 Год назад
I was looking for this the past week!! Super great timing!!
@OleksandrBorysenko333
@OleksandrBorysenko333 10 месяцев назад
Yep, folder structure it's important for each project! With your approaches, I can scale my app easily. Great video.
@borisnekezov6620
@borisnekezov6620 Год назад
Thank you very much, Kyle! Really one of your best videos! You explain really well how to scale react application. Especially for intermmediate and advanced!
@ewolz
@ewolz Год назад
As junior Dev, it's great to see these patterns half of which I formulated on my own, the other half I'm learning here 😅
@radhamadhavi2462
@radhamadhavi2462 Год назад
😂 hmm
@aymenob2484
@aymenob2484 Год назад
please keep doing what you do you are my favorite youtube coder when i need to understand a subject , you helped me alot
@jiancui6853
@jiancui6853 Месяц назад
Great video! I've been looking for feature pattern of react for weeks, and this is the most perspicuous one.
@webwisesagar
@webwisesagar День назад
The Combination of Pages Folder and Components Folder in medium size projects really make structure cleaner.
@BeCurieUs
@BeCurieUs Год назад
One big addtion to consider is a template/transform file structure for API calls. When dealing with mock data and mocking all API functions, having a specific data/API/Mock folder system is super helpful Our rule of thumb is a file per URI so /v1/files GET/POST/PUT would all get its own template transform file (turn BE values to FE values and the reverse), a mock API responce File, and the accociated tests for them. That kind of breakdown makes dealing with the API layer much more tidey.
@dotnetfullstack3217
@dotnetfullstack3217 Год назад
if you have any reference code regarding this can you provide the link please
@MietekPomywacz
@MietekPomywacz 7 месяцев назад
So you have any reference code regarding this? :D
@clever6150
@clever6150 Год назад
that's a great one!! absolutely beneficial, thank you so much, this video and the design pattern series are incredibly useful and helpful, I really appreciate your work! keep it up. 💪
@OliverPlummer905
@OliverPlummer905 Год назад
This is great. Using standard and best practise project folder structure is very important.
@enjoylife9571
@enjoylife9571 Год назад
I did this project without watching it first. I used "startsWith" method instead of "includes" . It sorts words much logically 🙂 Thank you for teaching useful projects
@user-yz5hj3zg2x
@user-yz5hj3zg2x Год назад
Hi, Kyle! I heard you said once that, before getting your first job, you had researched the companies for which you were going to apply before actually applying to their job offers, so that you could focus your efforts, instead of sending tons of applications, and also make sure you'd end up in a work environment you'd like, and all that payed off in the end. Could you please share how you got informed about the companies' cultures and how did you know they would be a good fit?
@Emerald13
@Emerald13 Год назад
Video suggestion: best practices for publishing react components as libraries
@kylespc1372
@kylespc1372 Год назад
I searched for this video a few weeks ago, thanks for making this!
@enocholuwanifiseoduyale2783
This came just right in time. Thanks so much
@Enes-ik4bm
@Enes-ik4bm 11 месяцев назад
Thank you for this helpful video bro. I really appreciate you for sharing infos that no one shared with us in our companies.
@niravparmar7856
@niravparmar7856 9 месяцев назад
This is Gold ❤ Thanks brother for sharing such with the world. This will definitely be helping freshers a lot.
@boomer5015
@boomer5015 Год назад
Great explanation, hadn't thought of the features approach in that way.
@user_ahfvjjfb
@user_ahfvjjfb Год назад
Great simplified explanation, thank you.
@user-nk6ih7uh1h
@user-nk6ih7uh1h Год назад
Thank you so much for this great video about components tree / folders structure in react apps!
@lucienchu9649
@lucienchu9649 Год назад
Thanks, finally someone talk about react project file structure.
@hanszoll4943
@hanszoll4943 Год назад
Great video! Would’ve been nice to see how a small application file structure is turned into a medium sized application’s structure and so on…
@_romeopeter
@_romeopeter Год назад
Really appreciate this man. Thank you!
@JimKernix
@JimKernix Год назад
Thanks for this. I already had a pages , components and a sub-components inside components. I just added a data folder and moved my data into there. I created a utils folder but I don't have anything in there yet.
@adityanayak01
@adityanayak01 Год назад
Its amazing how u know so much detailed stuff and yet explain it all together in minutes 🎓
@alexanderzharkov6953
@alexanderzharkov6953 Год назад
Kyle you rock. Thank you. Awesome video, learned a lot
@anupmahato6163
@anupmahato6163 Год назад
Clear and neat folder structure . Just few additions may be a folder of constants, router and store for state management
@Xi-tler
@Xi-tler 3 месяца назад
Really bro 3rd method is really advance level.. Appreciate your teaching skills👍👍
@prodbyblvnk
@prodbyblvnk Год назад
this/similiar structure combined with Material Icon Theme (VS Code has it as an extension) can do wonders
@some5794
@some5794 Год назад
I wish you had a course making a full complicated website (with auth) from beginning to end. I think the hardest part is putting it all together
@wiktorchojnacki9746
@wiktorchojnacki9746 Год назад
This is gold, thank you!
@aleksd286
@aleksd286 7 месяцев назад
Yes, been using folder-by-feature with my team for the past 3-4 years. Scales really well, because ourcode base has around 8-9 people actively commiting to it. (It's a monorepo too)
@louisdiaz4751
@louisdiaz4751 Год назад
Thanks for the clarification 🔥👏
@hedi_muhammad
@hedi_muhammad Год назад
Well done Kyle!
@gautambedi591
@gautambedi591 Год назад
Nice content mate!
@xReDxTuRtLeZx
@xReDxTuRtLeZx Год назад
great tips. just followed a react vid to make a portfolio site, and was unsure about how i wanted to go about the files when i start to personalize and add to it. ill be using intermediate style as it looks robust enough for a personal project
@thecherryandbrucechannel7551
my life has just been changed by your video!! #ReactFolderStructure !!!!! Yes, please!!!
@user-wi7hl3qw9e
@user-wi7hl3qw9e 7 месяцев назад
Awesome stuff🤩
@aymensedki3161
@aymensedki3161 Год назад
the hardest thing to do ever !! thank youuu appreciate it
@Almighty_Flat_Earth
@Almighty_Flat_Earth Год назад
React js is a shame to JavaScript community. Governments should ban the use of this stupid library. Same functionalities can be achieved with Angular and Svelte with less frustration, so what's the point of using a stupid react js which makes web development unnecessarily complicated.?
@CreativeB34ST
@CreativeB34ST Год назад
Instead of having those global folders, you could create a "global" or "shared" folder under "features" and get rid of that duplicate folder structure. This way you have src > features > [authentication, projects, settings, shared, todos] > [assets, components, context, data, hooks, ...]
@user-dp8yq3cm2f
@user-dp8yq3cm2f 9 месяцев назад
awesome video my man
@hi_im_willow
@hi_im_willow Год назад
Thanks. This is what I needed for project 😍😍😍😍😍😍😍😍😍😍😍😍
@m_r_b_e_a_s_t811
@m_r_b_e_a_s_t811 Год назад
Thank you, this helped a lot!
@rvft
@rvft Год назад
tf is this profile pic lmao
@dikamilo
@dikamilo Год назад
Even more advanced structure for large projects is monorepo with separate apps and libs managed for example by nx build system. So for example, authentication feature is separate lib that have just that and use other smaller libs as dependency.
@khoinguyen-ft2ys
@khoinguyen-ft2ys Год назад
Thank you. Hope you make this video sooner.
@WiseCabinet
@WiseCabinet Год назад
love your content !!! I have a tutorial idea for you this topic has been on my mind for a long time a XML viewer with folding elements in React with min. tp-dependencies data.xml in -> in viewer out that would be awesome !
@yajirushik2871
@yajirushik2871 Год назад
I have looked for 6 days how to organize project structure properly for full-stack app I have learned smth but there are too many examples so I got confused. Thank You! 🚀
@ajayadav09
@ajayadav09 Год назад
Thanks. Very useful
@saravanasai2391
@saravanasai2391 Год назад
I have learned design patterns for building large scale projects in php framework like Laravel. There is a Famous Pattern Called Do-mine Driven Developement which same like a feature folder that you have explained But really a Great idea to structure like this.. thanks for sharing this with us
@user-ie7md3mm6x
@user-ie7md3mm6x Год назад
best content, thank you so much!
@audaryarathod3052
@audaryarathod3052 Год назад
It’s like you just read my mind. Waiting for node/express pro folder structure.
@saadarman4718
@saadarman4718 8 месяцев назад
Great Video. 👍
@DillonRedding
@DillonRedding Год назад
Very helpful, thank you! My only objection would be the name of the "services" folder. Every other folder contains the type of thing corresponding to that folder's name. OTOH, the services folder contains clients to APIs/services, so I'd probably go with "clients" instead of "services".
@hwj8640
@hwj8640 Год назад
awesome video with great advices! Can you do another video to guide us how to re-use React components across Projects ? I used to copy-paste...
@plasmodiun1
@plasmodiun1 Год назад
Tus videos son los mejores saludos desde Mexico.
@n3wtou
@n3wtou Год назад
I am using the last structure for all my projects now. On an unrelated topic, please do a video on creating a WYSYWIG Editor with draftjs.
@Andressuquaz156
@Andressuquaz156 Год назад
It always weirds me out the tiny amount of talk on this topic, for me one of the most difficult things in a react project (or any project, really) is the folder structure. A great work as always Kyle
@elgalas
@elgalas Год назад
Tiny amount? Perhaps it is a matter of perspective, but for me it seems like this is what everyone talks about!
@balddog470
@balddog470 Год назад
also readability and DRY code
@gillesashley9314
@gillesashley9314 Год назад
The only problem I have with React is the freedom they give u to decide your project structure. I love React a lot but I normally choose Angular just because it structures your project for you.
@ilmanmanarulqori5632
@ilmanmanarulqori5632 Год назад
Great Video, please make some Project usecase video with "Advanced" structure using react
@MrSh1zzle
@MrSh1zzle 7 месяцев назад
One thing i usually do is create a folder for each component. the folder contains an index.ts and a "ComponentName.ts" (or .js if you use that), the component is exported as default from the index.ts, this way, you have a folder which encapsulated everything related to that specific component (styles, tests, logics, etc..) AND when importing you only have to reference the folder instead of the folder and the component because it's exported from the index.ts, (eg import ComponentFoo from "components/ComponentsFoo" instead of "components/ComponentsBar/ComponentsBar") best of both worlds. I already hear the question "Why only export from index.ts and not just place the entire component there?" ---> because if you keep it separated you can still easily search for components in a growing code-base.
@makennamartin1157
@makennamartin1157 Год назад
thank you for this
@hellsbell365
@hellsbell365 17 дней назад
Very helpful
@lisofsky8151
@lisofsky8151 Год назад
лайк не глядя! как раз искал эту тему
@frogery
@frogery Год назад
may our folder structures remain as neat and clean as his hair.
@redvelvetzip
@redvelvetzip Год назад
love these videos
@gauravpoudel7288
@gauravpoudel7288 Год назад
Ur the teacher I never had
@reactslayerdev
@reactslayerdev Год назад
Whould be great also to see how to structure right next.js + ts. Thanks for vid
@GretSeat
@GretSeat 9 месяцев назад
I appreciate your videos. I love watching them. I've been banging my head with good folder structure, so thank you for this. But I have a question... How do you get your hair so perfect every single time? I'm growing mine out, and I want to have god like hair like yours.
@yashsharma6269
@yashsharma6269 Год назад
You have some great videos on javascript. Would love to see some videos on python and django.
@orco3847
@orco3847 Год назад
You know, you just read my thoughts 🙏🏼😊
@animeshtimsina3660
@animeshtimsina3660 Год назад
Great video! Can you make a similar video on a Next.js project with a bunch of features, api endpoints and different types of page renderings (SSR,SSG, etc). It's really daunting to make sure you isolate frontend and backend code, as well as features.
@evgeniik_
@evgeniik_ Год назад
Thank you for the great tutorial.
@csy897
@csy897 6 месяцев назад
If you have features that can be completely independent like that you may want to consider using module federation instead. Though it is a good idea to build like that from the start so that you can easily mfe it later on.
@ScottGarson1452
@ScottGarson1452 Год назад
Hi Kyle. I love your videos, and even an ancient architect like myself has learned a thing or two :) I'm curious about what are your thoughts on using extensions to identify the type/intention of a code file, similar to `App.test.js`. e.g. - `text.utils.ts` vs,`textUtils.ts`, - `user.model.ts` vs. `userModel.ts` - `subsection.routes.ts`` vs `subsectionRoutes.ts`
@Saver174HowTo
@Saver174HowTo Год назад
I have started to use those extensions for my files and I see myself only benefiting from it (but note that not every file can have extension). To have an example - I have folder 'types' and there is modal.types.ts This way when I am looking for modal types I can type modal.types and this will be the first file (as I have also other components named modal, eg. ModalRenderer). So it will significantly ease the searching for file and that's what you want in most cases.
@Jrrs2007
@Jrrs2007 Год назад
As a pro react engineer, this is the first time I've seen it explained like this... it makes so much sense!! Thank you!!!
@nathanr6479
@nathanr6479 Год назад
Why put entire libs under libs folder if it is much more simple to update package.json ?
@Jrrs2007
@Jrrs2007 Год назад
@@nathanr6479 the package.json is your blueprint, your package-lock.json is your actual installed modules and libs would contain the code you write for them, you don't always just import a module into your components.
@nathanr6479
@nathanr6479 Год назад
@@Jrrs2007 that is great
@epeschke3431
@epeschke3431 Год назад
Great content! 😁 The same structure can be used for a Next.js framework?
@dane2565
@dane2565 Год назад
I'd love your opinion on microfrontends, turborepo, and monorepos in general for microfrontends architecture
@omojjegomosc8211
@omojjegomosc8211 Год назад
very helpful
@KasperA88
@KasperA88 Год назад
Thank you!
@liaozhangpeng4436
@liaozhangpeng4436 Год назад
advanced version feature is like angular module
@rohitkf8474
@rohitkf8474 Год назад
Please do a video on HOW YOU STYLE YOUR HAIR !!! Coz man.... it's so freaking cool 🔥🔥❤️
@williamowen1575
@williamowen1575 Год назад
This inspired me and today I went on a node.js rampage to automate my setup. I made this amazing program with yargs, and learned how to make a global cli command for access to it with the package.json bin. The features folder is awesome. Except wheres your Docker file? 🧐 Looking forward to your hooks video.
@faizanahmed9304
@faizanahmed9304 Год назад
thank you Kyle
@IhorVyshniakov
@IhorVyshniakov 9 месяцев назад
thank you maaaaan! for now it looks logical, but before your video it was always a headache to understand th structure & place my code into correct place in difficult project structure
@dulanjanadevindabandara6648
Please do a course project using this advanced folder structure.
@andro_dashyan_
@andro_dashyan_ Год назад
thank you bro 👍👍👍👍👍
@sunraiii
@sunraiii Год назад
You: "Hey dude, I was wondering if you could help me structure my Rea..." Lead dev: "MORE FOLDERS!!!"
@danedalton
@danedalton Год назад
Hello, Kyle! I am currently working on a portal for students, and a separate for parents. Would you keep both in one React app, or would you create seperate React apps depending on the login?
@joshuagalit6936
@joshuagalit6936 Год назад
Can you also discuss the Atomic Design Pattern because that is what I've structured my component folders in my projects/company projects
@licokr
@licokr Год назад
Great video! There is one more thing I wanna know is where I should put type files. I seperate the files into type folder but I'm not sure I'm doing well
@BritainRitten
@BritainRitten Год назад
Generally you shouldn't need separate type files. Types should be defined close to where the things they type are defined. So type User goes in user.ts, type Post or type PostComment in posts.ts, etc
@rdubb77
@rdubb77 Год назад
When using a “framework on a library” like React Admin I think it’s a bit different, as the components do so much heavy lifting that you can have a relatively simple folder structure while having a fairly complex app.
@KSIxChAoTic
@KSIxChAoTic Год назад
OMG THANK YOU.
Далее
Learn React Router v6 In 45 Minutes
46:20
Просмотров 530 тыс.
Why Signals Are Better Than React Hooks
16:30
Просмотров 456 тыс.
24 часа Я МИСТЕР БИСТ челлендж
1:12:42
Volkswagen судится с Volkswagen?
01:00
Просмотров 1,8 млн
The Most Important Skill You Never Learned
34:56
Просмотров 161 тыс.
Folder structure in React - Complete Guide
12:35
Просмотров 60 тыс.
I DONT USE NEXT JS
54:01
Просмотров 322 тыс.
Every React Concept Explained in 12 Minutes
11:53
Просмотров 416 тыс.
How React Query Won
34:52
Просмотров 64 тыс.
Applying clean architecture to my Next.js project
20:15
How This Test Saved Kent’s Site
7:04
Просмотров 82 тыс.