React Folder Structure Best Practices - For Large Projects
ฝัง
- เผยแพร่เมื่อ 30 ก.ย. 2024
- This is the folder structure pattern I follow whenever working on a big react application.
Join our Discord: / discord
🚀 Learn ReactJS By Building 6 Projects: codedamn.com/l...
🐙 GraphQL Course: codedamn.com/l...
► Buy Crypto on Coinbase: coinbase-consumer.sjv.io/PedroTech
Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Website: machadopedro.com
Linkedin: / machadop1407
Instagram: / _pedro.machado_
Github: github.com/mac...
Business Email: pedro@pedrotech.co
Tags:
- ReactJS Tutorial
- ReactJS and MySQL
- NodeJS Tutorial
- API Tutorial
#reactjs #coding
@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.
Thank you!!
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?
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 :)
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
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.
x2
common folder is basically where you store components that you use in two or more pages
but you can also just name it like components
Don't you think this is over engineering what should be a simple SPA structure?
This video is meant to be for large projects, and imo SPA is messy for large projects. It doesn’t scale well
@@PedroTechnologies Thanks... Not sure If I would use React or any SPA framework for large (multipage) projects. You videos are great
btw.
What you came for starts at 4:10
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?
Exactly!! But then again, folder structure is subjective to your project needs
Inside the commons folder!
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
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
I used to do that too! Both approaches are good!
@PedroTech you missed the common folder, haven’t you?
Yepp, maybe something as a part 2 TH-cam post 😅
very useful content, thank you. Just and off topic question though, how'd you make the background animation?
Thank you!! I used canva
Thanks.
im also adding .stories and .styles to a component folder.
.stories is for storybook and styles for css, scss, css modules or styles components
I put my styles either in the same component group or use reusable styles with something like styled-components!
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
What issues have ur team encountered? Ive used a similar structure in massive projects :)
This is such an amazing video
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.
Hahahaha im just used to it!
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
I put it cause it has a bigger impact hahaha but like i said, there is no definitive best practice
What you using to mange state instead of Redux?
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.
don't use PascalCase, its a terrible practice
@@starlord7526states random opion based info. Refuses to elaborate.
I think you can't create complete using just .ts file because jsx will not work in ts.
Correct me if i am wrong
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!
shit... I love you. you always give me what I want
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?
I go over what I use here: th-cam.com/video/t9WmZFnE6Hg/w-d-xo.html
context, or lib such as zustand,jotai
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
Absolute path!
How to get the images properly, without importing it individually
And how to get absolute path of any file
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?
I don’t find it confusing because i can see the folder name
dude you didn't talk about the "common" folder
do big companies like facebook use this pattern and what am i supposed to do with react routing?
Please make a tutorial for typescript for beginers
I have a couple of them: th-cam.com/play/PLpPqplz6dKxW1LdiHpJMyC5bzuzGxKlFm.html
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.
The commons folder is just filled with components that can be reused between multiple pages. Ex: search bar…
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?
You said you didn't use redux anymore . I am curious do you use just context only ?
I talk about what I do here: th-cam.com/video/t9WmZFnE6Hg/w-d-xo.html
How do we manage shared components in this file structure?
You can put it inside of the commons, or possibly have a "features" folder where you can add specific feature logic that is shared!
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.
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
thankyou for sharing
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?
Pedro, onde está seu linkedin? está retornando erro na pagina pelo link na descrição
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?
where is your index.tsx for each page
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.
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?
Common components / files that can exist in many different parts of the project!
@@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"?
That is definitely not a folder structure for large projects. Maybe for medium ones
This is the folder structure for one of the biggest tech companies in the world.
@@PedroTechnologies Could you name a few?
i dont see an index.ts at your pages level. How do you combine these components inside your pages
Questions can come in⬆️.
good question
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
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.
@@PedroTechnologies This reply inspired me more. Thanks a lot!
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.
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.
Thank you
What do you use instead of Redux then?
Pedro, vc não usa css modules ou style-components ou algo do tipo? Vc utiliza um arquivo .css normal msm?
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)
@@PedroTechnologies kkkkkk boa!
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.
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!
@@PedroTechnologies thanks bro
Your content is lot help me understand things.
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!
Hi, you guys have any idea for Next.js Folder Structure?
Can we get the git hub location for a sample project with this directory structure , redux & graphql?
1. Ты забыл про service, где должна хранится бизнес логика приложения, а не библиотеки/фреймворка.
2. Папка componenst я считаю лишней, если pages уже подразумевает что это компоненты зачем там создавать еще одну папку с компонентами?
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.
@@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)
wont the test failure stack trace say index.test.ts and be confusing?
I can't joint your discord channel via the above link ,can u please resend me the lastest link
Questions can come in⬆️.
Hi from Sweden 🇸🇪 😊 Love your videos and how you think in react, thanks for sharing!
@PedroTech, u said ur not using redux that much anymore, so what are u using as a state management solution?
Thank you bro!
Skip the fluff to 3:20
Thank you so much
You're killing it Pedro 🔥 keep it goin' 💯
great ! which font you are using it's look pretty kindly let me know also with theme name.
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
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".
nice video!
Thankyou..
great
GL
This is awesome. I couldn't find the link to the GitHub repo in the description, do you mind sharing it here?
Thank you, need more typescript content
Working on it!
love the structure! can you please share the github repo name?
Where would you like to put layout inside setup folder or common folder ?
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
You said that you don’t use redux that much today. What state manager do you use?
Such a nice video, thanks for sharing.
You didn't even open commons folder
It should be filled with common components
@@PedroTechnologies Oh ok, so like button, input, etc
How do you do if you have posts and comments on the same page?
What if there is a component which shared by different pages in the app ?
Y yo buscando este material! Finalmente! Thanks man
🙌 Thanks
You're welcome 😊
❤️❤️
Just use next js, it is structured
thanks bro
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
I think he keeps all those in the folder named "common"
Thanks
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
Nice work! Glad u were able to learn from my channel :)
Awesome
Thanks a lot Pedro ! What do you put in the common folder ?
And what about css modules, do you name them "index" or the same name as the folder ?
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?
Questions can come in⬆️.
You can place your hook in the "commons" folder, like "commons > hooks", the same can be used to components, interfaces, functions, etc
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.
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.
Where is your UBC cs video?
I privated it bc im not a CS student anymore lmaoo i switched to math!
@@PedroTechnologies can you make a vid on why you switched?
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
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.
@@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.
A very useful tutorial on Folder Structure for React Apps. Thanks, Pedro
{2022-06-08},{2022-06-29}
Glad it was helpful!
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?
You put those in the commons folder. So the commons folder structure would look like: /commons/components/footer/index.ts