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

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!

great video! would love to see a next part on a nodejs / express backend api!

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.

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

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.

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!

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.

Great video! I've been looking for feature pattern of react for weeks, and this is the most perspicuous one.

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

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?

Neat idea! Would love to see a followup on monorepo structure.

Yep, folder structure it's important for each project! With your approaches, I can scale my app easily. Great video.

I was looking for this the past week!! Super great timing!!

please keep doing what you do you are my favorite youtube coder when i need to understand a subject , you helped me alot

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.

Thank you for this helpful video bro. I really appreciate you for sharing infos that no one shared with us in our companies.

This is Gold ❤ Thanks brother for sharing such with the world. This will definitely be helping freshers a lot.

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 😅

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

This is great. Using standard and best practise project folder structure is very important.

Thank you so much for this great video about components tree / folders structure in react apps!

Great explanation, hadn't thought of the features approach in that way.

Great simplified explanation, thank you.

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

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…

This came just right in time. Thanks so much

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.

I searched for this video a few weeks ago, thanks for making this!

Really bro 3rd method is really advance level.. Appreciate your teaching skills👍👍

Its amazing how u know so much detailed stuff and yet explain it all together in minutes 🎓

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)

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

Video suggestion: best practices for publishing react components as libraries

Clear and neat folder structure . Just few additions may be a folder of constants, router and store for state management

Kyle you rock. Thank you. Awesome video, learned a lot

Really appreciate this man. Thank you!

Thanks, finally someone talk about react project file structure.

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

this/similiar structure combined with Material Icon Theme (VS Code has it as an extension) can do wonders

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 !

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.

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

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

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.

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.

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

Thanks for the clarification 🔥👏

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! 🚀

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.

Thank you. Hope you make this video sooner.

This is gold, thank you!

the hardest thing to do ever !! thank youuu appreciate it

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.

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

Great Video, please make some Project usecase video with "Advanced" structure using react

It’s like you just read my mind. Waiting for node/express pro folder structure.

my life has just been changed by your video!! #ReactFolderStructure !!!!! Yes, please!!!

Thank you, this helped a lot!

Whould be great also to see how to structure right next.js + ts. Thanks for vid

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.

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

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.

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`

Thanks. This is what I needed for project 😍😍😍😍😍😍😍😍😍😍😍😍

Can you also discuss the Atomic Design Pattern because that is what I've structured my component folders in my projects/company projects

You have some great videos on javascript. Would love to see some videos on python and django.

Hey Kyle, please make a video that explains how to use tests in react project? Cause first thing I always do is get rid of every test script in the CRA boilerplate.

Please do a course project using this advanced folder structure.

Thanks. Very useful

Great content! 😁 The same structure can be used for a Next.js framework?

Nice content mate!

I'd love your opinion on microfrontends, turborepo, and monorepos in general for microfrontends architecture

Well done Kyle!

Tus videos son los mejores saludos desde Mexico.

best content, thank you so much!

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

In my projects I use something between the 2nd and 3rd approaches. I've always formulated it as "the App is a component, it consists of components". Therefore any tiniest button can be thought of as a separate app, however simple it might be - just a different app solving a specific task. Regarding the "features" folder, here it is described as a special case. But you've already had "pages" and "components" by then, so why not use the concept of collection folders? In this case you may have any number of plural-named folders with related components on demand, at any depth in the project (since all depths are equal, all being apps).

Dont think 3 is generally necessary even for large projects. Might be a good addon for some cross cutting concerns mixed with the page folder model from 2

Please do a video on HOW YOU STYLE YOUR HAIR !!! Coz man.... it's so freaking cool 🔥🔥❤️

Excellent overview of React Application Folder Structure. Thanks, Kyle {2022-08-02}

You know, you just read my thoughts 🙏🏼😊

Great video as always Kyle-- thank you! In the intermediate and advanced folder structure, where do you store the css files? I only saw one css file in the assets folder -- do you usually put all your css in one file? I would think there would be multiple files as we would have styling for each component and then styling for each page (to put the components together). I'm new to this so I might be completely off-track here!

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?

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.

Great video again. Unintentionally i did my projects with the "Intermediate" pattern. I have a question though, in that pattern in pages/Settings, you have useSettings.js hook, shouldn't that be global for the whole project, since probably other pages will want to use the settings, defined on that Settings page?

Amazing!what’s next , nexts framework from zero or react components cli??)

Greate explanation. better if you can provide the sample projects.

Awesome stuff🤩

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

I'd love to see videos on webpack!

Thank you for the great content. So where would a Redux store go? in data?

awesome video my man

It looks good! But we still need time to work on it to see how good it is

Hello and thank you for this video, I would have liked to know how to classify css files, when there are several components in a project? The project I'm working on has as many css files as components !

As a pro react engineer, this is the first time I've seen it explained like this... it makes so much sense!! Thank you!!!

Amazing content. I am just wondering where the routes go and do we need .env file

I have all my components each in its own folder with with it's tests, styles and an index that has exports the component to keep the import short 😉

Would great to make a video about api integration in react 😎

hallelujah some clarity on building real world react apps...not the usual tutorial toy project

feature sliced design is the best approach