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

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:

🌎 Find Me Here:

⏱️ Timestamps:

00:00 - Introduction
00:55 - Beginner
03:50 - Intermediate
09:41 - Advanced

#ReactJS #WDS #ReactFolderStructure

[devinosborne]

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!

[offroaders]

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.

[florianhundegger]

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

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

[borisnekezov]

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!

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

[clever]

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

[Mikenight]

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

[jiancui]

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

[OleksandrBorysenko]

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

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

[aymenob]

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

[typingturtle]

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

[yzhjzgx]

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?

[Enes-ikbm]

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

[niravparmar]

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

[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 😅

[nkihuhh]

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

[OliverPlummer]

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

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