React Folder Structure Best Practices - For Large Projects

[@kovendanragupathi7632]

@PedroTech, I really like your content on React since you are bringing production grade best practices. Please keep posting like these type of content Bro.

[@PedroTechnologies]

Thank you!!

[@nivethan_me]

at 10:15 naming components as index.ts will cause confusion when you working with multiple components in vscode. all components title will says index.ts. how to overcome this issue? i personally tried barrels on index.ts i write something like export { default } from './Navbar'; then i create a new file called Navbar and write the component code there but this felt like a lot of work and lot of unnecessary files. any better idea?

[@PedroTechnologies]

Create a folder with the correct name, just import from the folder! You can also create file names that are specific and then create an index.ts file which imports and exports all the components. There is no right answer to this, it based on preference. I don't find it confusing, but I get why people might :)

[@jhaeberli]

another related issue with just "index.ts" is when you have nested folders. VSC first list Owner folder name, then subFolder name with its files, and then files of the Owner folder, meaning you'll read index.tsx and index.tsx

[@avaplain9505]

im also adding .stories and .styles to a component folder. .stories is for storybook and styles for css, scss, css modules or styles components

[@PedroTechnologies]

I put my styles either in the same component group or use reusable styles with something like styled-components!

[@devkasunlakshitha]

What you using to mange state instead of Redux?

[@VietLe-qi2lh]

my current working project is using a folder structure like yours but it has many issue when it becomes huge. All team member agree to find other structure, which is easier to manage and work with it

[@PedroTechnologies]

What issues have ur team encountered? Ive used a similar structure in massive projects :)

[@hsearch21]

Would you not use a separate features folder? For example if you have a feature for creatingNotes, which you want to show on the dashboard page but also on the homepage. Wouldn't it be easier to have features/ creatingNotes. And then you can import creatingNotes to any page which needs it?

[@beninip]

Hi PedroTech, I want to thank you for sharing this content to us. I'm wondering what's inside the common folder. You skipped it and you never went back on it.

[@ryomaizen]

x2

[@GeovaneGC]

common folder is basically where you store components that you use in two or more pages

[@GeovaneGC]

but you can also just name it like components

[@moonandwine]

Pedro, onde está seu linkedin? está retornando erro na pagina pelo link na descrição

[@nhutdev]

My rule of thumb is the longer and more descriptive the file name, the better. For files that export React components, I use PascalCase. For everything else, I use dash-case.

[@starlord7526]

don't use PascalCase, its a terrible practice

[@fodetraore6666]

​@@starlord7526states random opion based info. Refuses to elaborate.

[@jorgeriveramx]

What you came for starts at 4:10

[@joaovictor-dl6ve]

Pedro, vc não usa css modules ou style-components ou algo do tipo? Vc utiliza um arquivo .css normal msm?

[@PedroTechnologies]

I either use Styled-Components or TailwindCSS. If I use styled components, I will usually have a folder just for UI common elements. (Falei em inglês pra a glr entender tbm kkkkkk)

[@joaovictor-dl6ve]

@@PedroTechnologies kkkkkk boa!

[@aleksandarpopovic3615]

i like index.ts but the problem is when you are looking for a specific file, I create a file with the appropriate name and re-export with index.ts

[@PedroTechnologies]

I used to do that too! Both approaches are good!

[@chrislye]

Thanks for sharing this @PedroTech! I just have one question - how would you deal with a common component that is required by more than one page? Where would you put it?

[@zidanegimiga]

Exactly!! But then again, folder structure is subjective to your project needs

[@PedroTechnologies]

Inside the commons folder!

[@PedroNovo93]

@PedroTech you missed the common folder, haven’t you?

[@oziati533]

Yepp, maybe something as a part 2 KZbin post 😅

[@indrajithpatel5966]

i dont see an index.ts at your pages level. How do you combine these components inside your pages

[@user-uw1rh4dg1y]

Questions can come in⬆️.

[@onça_pintuda999]

good question

[@frankthedsigner558]

Wow, great video! I always find myself lost when having to setup a new project the correct way and I've watched many of your older folder structure videos in the past. Though, as my project scales it always gets messy but this is an awesome approach of doing it right from the start. Thanks for your updated video, love your content! keep it up!

[@hizokadarkwolf]

Thanks for the tips. The naming of files is always controversial, but organization is the most critical aspect. Insufficient naming and bad folder organization can be painful for the next developer working on a project... I learned that I had to rename and split the code into different files and folders in Angular. I will try this way, as I am just getting started on React.

[@devproject8649]

I don't understand what you do when the path to the file is "../../". Do you use jsConfig to put the path? please answer me

[@PedroTechnologies]

Absolute path!

[@cbijay]

Where would you like to put layout inside setup folder or common folder ?

[@marcus4619]

could you recommend some great extensions, for instance the way your files/folders have great icons. I cam from webstorm and looking for similar functionality

[@truceheat1671]

You said you didn't use redux anymore . I am curious do you use just context only ?

[@PedroTechnologies]

I talk about what I do here: kzbin.info/www/bejne/qmq6no18o6ppfsk

[@thesemicolon1971]

I think you can't create complete using just .ts file because jsx will not work in ts. Correct me if i am wrong

[@PedroTechnologies]

In the video i mention that for components I use tsx and for just typescript files I use ts. But ts should work for writing components too!

[@louaiboumedienne8276]

@PedroTech, u said ur not using redux that much anymore, so what are u using as a state management solution?

[@MukeshKumar-um2wg]

How do we manage shared components in this file structure?

[@PedroTechnologies]

You can put it inside of the commons, or possibly have a "features" folder where you can add specific feature logic that is shared!

[@diegounanue]

You said that you don’t use redux that much today. What state manager do you use?

[@marcus4619]

wont the test failure stack trace say index.test.ts and be confusing?

[@sujikumarts7470]

Can we get the git hub location for a sample project with this directory structure , redux & graphql?

[@alexdefaro]

Don't you think this is over engineering what should be a simple SPA structure?

[@PedroTechnologies]

This video is meant to be for large projects, and imo SPA is messy for large projects. It doesn’t scale well

[@alexdefaro]

@@PedroTechnologies Thanks... Not sure If I would use React or any SPA framework for large (multipage) projects. You videos are great btw.

[@rijogeorge5547]

What if there is a component which shared by different pages in the app ?

[@easonhuang4031]

if all components file called index.tsx, if I open many files, there will be a lot of index.tsx on the right side, wouldn't this cause confusion?

[@PedroTechnologies]

I don’t find it confusing because i can see the folder name

[@ponderatulify]

How do you do if you have posts and comments on the same page?

[@cdey3886]

very useful content, thank you. Just and off topic question though, how'd you make the background animation?

[@PedroTechnologies]

Thank you!! I used canva

[@alok9337]

how can i good in frontend development . because when I creating project on my own my mind don't think how to do that . what should I do to improve my self.

[@PedroTechnologies]

Time and practice is the answer. You don't need to worry about this if you are a beginner. Also, working a job in the industry can help a lot!

[@alok9337]

@@PedroTechnologies thanks bro

[@alok9337]

Your content is lot help me understand things.

[@Aliena92]

What do you use instead of Redux then?

[@thecodingchallengeshow]

do big companies like facebook use this pattern and what am i supposed to do with react routing?

[@ThColinPereira]

This is such an amazing video

[@rajarock454]

great ! which font you are using it's look pretty kindly let me know also with theme name.

[@i-am-the-slime]

Isn't having one folder called "images" and one "svg" pretty ugly? Why not "png", "jpg", "svg" or "raster-images" and "vector-images". Or do you also have svg files in the images folder?

[@SecretEyeSpot]

Hey Pedro. What's the actual name of the repository for this video? I'm trying to understand what you're Common folder is and how you use it.

[@PedroTechnologies]

The commons folder is just filled with components that can be reused between multiple pages. Ex: search bar…

[@ademolaakindotuni5896]

This is awesome. I couldn't find the link to the GitHub repo in the description, do you mind sharing it here?

[@baya8093]

Hello Pedro, thanks for making this useful content. During the video you said you're not using Redux a lot, and I wonder which state management system you're using. Which one will be better?

[@PedroTechnologies]

I go over what I use here: kzbin.info/www/bejne/qmq6no18o6ppfsk

[@butterfly7562]

context, or lib such as zustand,jotai

[@louislecouturier]

Thanks a lot Pedro ! What do you put in the common folder ?

[@louislecouturier]

And what about css modules, do you name them "index" or the same name as the folder ?

[@newbiedevtons]

Hi, Pedro. Can I ask you something? If i want to build real word react js app then should I buy a reactjs courses? Thank you so much for your tutorial video

[@PedroTechnologies]

You don't need to buy a course in order to be good at building real world apps. I never bought a course in my life (although i sell one). It depends on the person, some people prefer to pay for courses because it holds them accountable.

[@newbiedevtons]

@@PedroTechnologies This reply inspired me more. Thanks a lot!

[@dat-ta]

Hi, you guys have any idea for Next.js Folder Structure?

[@OgamerRato]

I really want to thank you. I have been watching your vids and learning a loot. Not only that, but I just release my first project for a company a couple of weeks ago and didn't like the final result in a lot of aspects. Then a got into your channel and learned a loot, and it is making me a better programmer and helping me a loot at work. For that, really thanks man

[@PedroTechnologies]

Nice work! Glad u were able to learn from my channel :)

[@rychei5393]

Skip the fluff to 3:20

[@AyomiposiAborisade-yu5is]

How to get the images properly, without importing it individually And how to get absolute path of any file

[@licriss]

I absolutely hate the term "best practices" since thinking the best has been discovered/established is a unneccessarily limiting mindset, but this is definitely a very good structure for UI projects larger than a couple of pages

[@PedroTechnologies]

I put it cause it has a bigger impact hahaha but like i said, there is no definitive best practice

[@mumk]

where is your index.tsx for each page

[@dobrilbojilov8184]

Yep i want to know this also. Where is starting point for every page? I didn't saw index.tsx in root post page folder for example.

[@TricoliciSerghei]

Thanks for the video.. Didn't find the link to the repository on github though, also checked on github, haven't seen it, maybe it has a different name?

[@ep11-o7s]

I appreciate you making this video, as folder structure, granted, has caused me to pull my hair as our app is scaling. However, I do want to point out that there are some hooks that can be used globally and shouldn't be grouped under a specific page, is it ideal to create a "hooks" folder in the "src" parent folder?

[@user-uw1rh4dg1y]

Questions can come in⬆️.

[@joaovitor8485]

You can place your hook in the "commons" folder, like "commons > hooks", the same can be used to components, interfaces, functions, etc

[@haina3052]

So, for each page you have a folder. Where do you put your layout component like ? What about a button component that is gonna be used in different pages? You duplicate them everywhere?

[@PedroTechnologies]

You put those in the commons folder. So the commons folder structure would look like: /commons/components/footer/index.ts

[@khursheedalam3057]

Loved it. I use the almost same folder structure. Few things I add in my project. For every component I have subcomponents.ts file in which I made styling for particular components. Create helpers.ts file for global helping functions.

[@Joseph-do9ue]

Please make a tutorial for typescript for beginers

[@PedroTechnologies]

I have a couple of them: kzbin.info/aero/PLpPqplz6dKxW1LdiHpJMyC5bzuzGxKlFm

[@김경한-x8h]

thank you for your video. I'm always enjoying your video and I have a question what's "common" folders for? and also models.ts in component folder?

[@PedroTechnologies]

Common components / files that can exist in many different parts of the project!

[@김경한-x8h]

@@PedroTechnologies oh thank you, and can I ask you one more thing? you seem to have file name as "index.ts" at every component. but as I know component's name has to start Uppercase like Component.tsx. then is it not component file that index.ts? then what is in "index.ts"?

[@alex_blue5802]

Personally I find it confusing to have multiple index.tsx files open and being unable to tell at a glance which components they are associated with. I do see how it gives the code a nice clean feel, though.

[@ronifintech9434]

love the structure! can you please share the github repo name?

[@hardwired66]

Thank you, need more typescript content

[@PedroTechnologies]

Working on it!

[@GabrielMartinez-ez9ue]

Y yo buscando este material! Finalmente! Thanks man

[@edetmmekut809]

yeah i prefer the absolute path in importing.And i notice u did not mention about reusable components like buttons,breadcrump,loader etc .For i do have a customised folder for reusable components

[@aninditpanigrahi3334]

I think he keeps all those in the folder named "common"

[@ricko13]

You're killing it Pedro 🔥 keep it goin' 💯

[@lmisrealkmilk6623]

Where is your UBC cs video?

[@PedroTechnologies]

I privated it bc im not a CS student anymore lmaoo i switched to math!

[@lmisrealkmilk6623]

@@PedroTechnologies can you make a vid on why you switched?

[@renatolins4670]

Nice tutorial Pedro, I really liked it. I was just wondering if checking git/diff results involving component files, wouldn't be a bit harder in some situations or another as they are all named as 'index'. Anyway, thanks for sharing your knowledge man

[@juanbosnic]

That could happen. I imagine you can give the component file a proper name and then in its "index" file just have its "default export".

[@malletdevoted]

Such a nice video, thanks for sharing.

[@ТёмаКоролёв-к6ф]

1. Ты забыл про service, где должна хранится бизнес логика приложения, а не библиотеки/фреймворка. 2. Папка componenst я считаю лишней, если pages уже подразумевает что это компоненты зачем там создавать еще одну папку с компонентами?

[@PedroTechnologies]

Pages are the routes, components are specific components that are used in the pages. Usually pages turn out to be very big, so separating parts of it into components make ur code more organized. Also, components should be separated in a way such that they are not very smart, each component should have their own purpose.

[@ТёмаКоролёв-к6ф]

​@@PedroTechnologies /components/ [page](comments)/List/index.jsx [page](comments)/List/List.container.jsx [page](comments)/Comment.service.js [page](comments)/Comment.repository.js header/index.jsx (global component) footer/index.jsx (global componen)

[@peladno]

I'm learing programming so I was looking for a video like this. Thank you a lot :), especially because I have only one folder and are a lot of files and is a bit confusing heheheh

[@edetmmekut809]

I can't joint your discord channel via the above link ,can u please resend me the lastest link

[@user-uw1rh4dg1y]

Questions can come in⬆️.

[@keenanjet7879]

I Heard in one of your previous videos that your always looking for content Idea, Id love to see a deep dive on The Graph since you GraphQL vids are awesome

[@alii2284]

dude you didn't talk about the "common" folder

[@oziati533]

Hi from Sweden 🇸🇪 😊 Love your videos and how you think in react, thanks for sharing!

[@jokerbanny]

Thank you bro!

[@김경한-x8h]

shit... I love you. you always give me what I want

[@aymenbachiri-yh2hd]

Thank you so much

[@iakuraa]

Thanks.

[@RW-he5fu]

nice video!

[@BREXCool3]

thankyou for sharing

[@filipevalentegomes2383]

Regarding typescript, I would only use it in big projects or if you work with a big team. Reason being, if you are not super comfortable with typescript, you’ll waste way too much time figuring out, what and how to include types or interfaces. You basically have to code almost twice as much when you use typescript. You can get lost and lose focus on what you are actually trying to build. It has a lot of advantages, but only if you are really comfortable, otherwise you are just giving yourself more work

[@PedroTechnologies]

I understand your point, and I used to say the same. However I keep getting more inclined in using TS for all use cases. The reason being that the moment you get used to TS, it will not require that much extra work. Tbh the point of ts is to prevent bugs, a JS project will never be as safe as a TS project.

[@filipevalentegomes2383]

@@PedroTechnologies 100% that’s why I said unless you are comfortable with it. I think it’s best to use it in personal projects at first to get used to it. Once you are comfortable with it, it actually makes it easier for testing later on.

[@chizuru1999]

I would like a video on state management of react. What to use for enterprise grade applications? Thanks. I am familiar with Angular and just can't get head over the mess of a framework react is.

[@chizuru1999]

Also the way it is going ahead it feels like react will just become angular with all these features... 😂😂 Later all you know they might even add a react cli.

[@nurlanmehdiyev7428]

Thank you

[@SirXtC]

awesome video. maybe im just neckpicking...but saying "I'm back here with another video" its just very redundant in a way... since this is youtube lol.

[@PedroTechnologies]

Hahahaha im just used to it!

[@KRaven950]

That is definitely not a folder structure for large projects. Maybe for medium ones

[@PedroTechnologies]

This is the folder structure for one of the biggest tech companies in the world.

[@onça_pintuda999]

@@PedroTechnologies Could you name a few?

[@inelusjudelin4635]

🙌 Thanks

[@PedroTechnologies]

You're welcome 😊

[@dailymeow3283]

Just use next js, it is structured

[@azizbakirov5301]

thanks bro

[@whonayem01]

Thanks

[@codetheworld6721]

Thankyou..

[@DuyTran-ss4lu]

Awesome

[@johnddonnet5151]

You didn't even open commons folder

[@PedroTechnologies]

It should be filled with common components

[@johnddonnet5151]

@@PedroTechnologies Oh ok, so like button, input, etc

[@ChinhNguyen-ye7nv]

great

[@augischadiegils.5109]

❤️❤️

[@Pareshbpatel]

A very useful tutorial on Folder Structure for React Apps. Thanks, Pedro {2022-06-08},{2022-06-29}

[@PedroTechnologies]

Glad it was helpful!

[@MasharipovSaidbek]

GL