How to Folder Structure Your React App | Everything You Need to Know

Using the proper folder and components structure can really improve your productivity and workflow especially if you're working on medium-large projects collaboratively with other team members, organizing the files and assets the right way can be sometimes challenging. In this video, we will go through comparing two projects, one is considered badly structured and the other considered as good-structure and we will see the real differences that a good folder structure for a React project can bring to the table and how can it help you write better, cleaner and more organized code and projects.

00:00 Introduction and what is the best folder structure
01:29 How usually Novice React projects looks like
04:23 Why does choose the right folder and components structure really matters?
05:55 Containers and Components Notion
11:27 Hooks and HOC
13:05 Why assets folder?
14:50 Separate each component on it's own
17:10 Choosing the right name for your components
21:44 Default Exports vs Named Exports
24:48 What are Services and why they are important
28:07 Use CSS in JS instead of CSS Modules
31:01 Organize your test files the right way

[tunaralyarzada]

i got overwhelmed and tired watching this video... The half of video takes up your boring talking. Just get to the point man and show sth but not talk

[sogggy]

Thanks. Would you mind leaving a link to the repo for the good structured code?

[kshitizshah]

../../../.../../.../../ looks very messy

[bik]

This guy speaks too much. Get to the point.

[siddharthkamble]

Great Video!!!! Can you share a link to the repo for the well-structured code?

[adventurer]

Imagine you have a few or several files open, and they're all named index.js, how do you get around the inconvenience of not knowing right away which file is which while you're developing and switching between open files?

[leandro]

Great stuff, man! I'm going to start implementing the stateless component files from now on. Thanks!

[anasschbani]

If only you could share a repo for this amazing structure, I am switching from Angular to react, and i get some issues structuring files, Angular is already structured for us

[prerakchoksi]

great video, itll be good if git link is also uploaded

[xbsidesx]

You could also renamed a named export
import { List as MyList } from …

I know what you mean by not being much explicit but default exports tells more about the true component functionality than named ones, which I read as optionals or suburban components that are helping the main (DEFAULT) one. It just makes sense by reading it.

[kevs]

I want to watch this on my phone but its too zoom out :'(

[gthaka]

This is great. Would you by any chance share this repo. Thanks.

[tiagogodinho]

thanks a lot for this tutorial. It helped me a lot!

[mfpears]

Code that changes together should be next to each other.

[Abhishek-vzud]

Amazing video.. man.. <3 Helped a lot

[Pareshbpatel]

Excellent React Folder-Structure tutorial. Thanks.

Subscribed!

{2022-07-01}