Folder structure in React - Complete Guide
Вставка
- Опубліковано 12 вер 2024
- 🚀 Project React → cosden.solutio...
📥 Import React (Newsletter) → cosden.solutio...
Join The Discord! → discord.cosden...
In this video we will learn about folder structure in React. I will show you what I've come to learn as one of the best ways to structure your folders in your React application. Whether you're using Next.js or Remix or Gatsby, or even a simple create react (or vite) app, this folder structure will be a great foundation to get you started.
Hope you enjoyed the video! I also have a really cool and unique course that will teach you way more than this video. You'll learn how to build an actual complex project with React. It's called "Project React" and you can find it at cosden.solutions/project-react. Also, I have a free weekly newsletter called "Import React" with tutorials, news, and cool stuff about React! You can sign up at cosden.solutions/newsletter?s=ytc
i really love how the guy's body language communicates the fact that he knows what he is talkig about. his classes feel like they are only ones you will ever truly need
I've been a regular viewer of your content, and I really appreciate the way you explain the concepts of React. Your tutorials are always clear and concise. It would be fantastic if you could create a series on NextJS, covering topics like folder structure for large projects and design patterns specific to NextJS. Thanks for all the great content!
Thanks for this video. Was actually watching another video of your earlier today where you referenced folders and best (React) practice.....and now I'm seeing this video. Great timing!!!!!
Hahaha niceee 🤙
Another great content that is actually directly useful in a react application and that any react development can understand from the get go ! Continue with the amazing work my dude :)
I have watched a lot tutorials on UA-cam but you are absolutely different. Your explanations a super.
Thanks for the video! As a fresh in React, I really need this. Perfect timing
Thank you, i appreciate your guide.
Thanks for the video, it's awesome.
I think it will be good also to add a folder under the components for layouts since almost every application could have different layouts, so we can have for example BaseLayout/AdminLayout/etc..
yeah that's a great idea!
I would recommend adding the page name folder under pages and add partials for all sub-components related to that page
▼Pages
▼ Dashboard
▼partials
Chart.jsx
Index.jsx
Can you please explain what are these partials? I searched it but partials isn't a apart of React and neithwr is it in Next.js.
all sub-components related to that page@@chinmayghule8272
@@chinmayghule8272 it is just a name that he decided to give on the folder 😄
@@user-dd7kw3ym5i Thanks for the explanation man. So these partials directory contains components associated with the page which has the same name as the parent directory here, correct?
@@chinmayghule8272 exactly 💪
Super useful video that helped me a lot to summarize thoughts about this topic. Thanks! 👍😎
Found your channel by accident but damn, I love it and you're my new favorite UA-camr. Keep it going!
Thank you for sharing the content! This question had been sit in my head for many years. Now I can finally get rid of this nightmare🥳
00:37 Understanding the folder structure and architecture in React
01:34 Page folder determines the skeleton of the React application and user navigation.
03:08 Components folder to hold all UI reusable components.
04:35 Components/UI folder to hold all small reusable components by other components.
06:20 Hooks folder.
07:45 (optional) services/api or services/i18n for multi-language support (internalization), services/stat for state management like redux, 09:09 services/providers for app warppers or for context (rename it to services/context if it's just for context)
09:50 utils folder for small, useful, Others : utils/helpers.ts or utils/formatters.ts
12:00 subscribe😃
Thank you. This is vey much informative as a beginner in React, I believe this foundation will help me with my learning journey.
Great video and just like you, I love the utils folder, because I hate having logic inside the component files, everything looks neat when you can separate things.
Using an Atomic Design structure on your components folder helps with keeping things organized.
Best explanation I've ever seen about this topic..Thanks a lot sir 🥰
Can u plz make a video for react clean architecture
I think adding types(all typescript types can be defined here) folder and constants folder(in case of routes we can use same name through out the application) makes it better. Anyway thanks for sharing your knowledge
Great video
Fetching, loading state, error state, race condition
I would have enjoyed to learn about caching requests too, perhaps in its own custom hook
We do this exactly in the React course actually!
Thank you for the useful video. one folder that you haven't included is the test folder and also I think the component should be divided into smart and presentational components.
Helpful🙌
React Folder Structure, clearley explained. Thanks, Darius
{2024-07-01}
Thanks bro
Learnt a new thing. Thanks sir.
Thanks boss we really appreciate
Very helpful video, thank you!
@cosdensolutions Where did you put large components but not reusable?
Very helpful, thanks❤
What't the best aproach to name the ts/tsx files(use camel case, lowcase...)? And when use index.tsx instead of the component name like Button.tsx?
So much helpful, I appreciate this. Thank you
glad you like it! 🤙
Is the discord link still active?
how about the images? is it on the public folder or assets?
that depends on the framework usually and how they serve them
Thanks for this❤
one thing i dont understand is how is the form comoneent considered primitive ? doesnt it contain other sub componenets like textinputs , buttons etc , how is it different than a modal component
Thank you for this
Thanks a lot❤
Thank you so much
very nice. Where do you like your tests? I have seen a seperate folder for tests that mirrors the app folder structure and I have seen tests folders inside the structure folders.
it really depends on how you want to set it up. I've seen both and both are fine!
Great explanation, thanks!
I have one question left: What about static files like: fonts, svg, png, favico. Consider a Vite + React + TS app. Should it be placed in the public folder(vite created) or bundled within src/assets(React created)?
Thank you!
If it's a global thing (logo.svg, favicon, font) they can go to the public/assets folder yes. If you have a set of your own icons that you use inside your app (close.svg, avatar.svg) then you could transform them to components and put them inside src/components/icons for example
@@malekboukhari149 Thank you! Great answer :)
How do route through your pages? App.tsx?
thank u soo much bro
Hello, thank you for this really interesting content.
Where would you advise to locate the unit tests in this architecture ?
Would you do a separate folder /tests reproducting the tree withs **.specs/test.ts files, or would you put the test files near the .tsx / ts files, like formatting.spec.ts
depends on the kinds of tests. If it's e2e integration tests, I'd make a separate folder. If it's unit tests, I'd colocate the test file with the component
Thank you
Thank you so much for this video. It helps a ton!
🤙
I am using almost (80%) same structure❤
is it a good idea to group components in a features folder? For eg. features > todo > components, assets, index.js.
features > login > components, assets, index.js.
you can also do this yeah!
thank youuu.
Thanks
Where do you put the styling of each component?
using tailwind
Can you create a video about modular folder structure ?
I have a question
On the home page i have different sections
Should i put each section as component ?
yes, in general you should have your components as much granular as possible, but not "toooooo" granular. Each component should do only one thing. for example here on youtube, i would divide the navbar to 2 or 3 components. One for the logo+ toggling the sidebar, one for the search input + microphone and one for avatar + notifications + create. If for example the search input + microphone component ends up becoming too big because of the logic inside of it, then i would split it into 2 other components, one for the search field and one for the microphone and some sort of context/ store to handle the logic between them.
@@malekboukhari149 thank you for this suggestion. Now I have one more question should we put these granular components into the same file or in components folder? What would be the best practice?
Can you teach us multiple file uploading in react js
Hi, is it fine if I do this way?
app
home
components // components only used in home
page.tsx
auth
components // components only used in auth
page.tsx
....
components // I'll store commons/global components
modals
cards
....
yeah that's totally fine!
why isn't nobody talking about the public folder?
Oops :/ I've been literally dividing each section of the site into their own folders and then having that jsx/tsx file in the folder, the css file for that section in that and an images folder within in that for of the section imgs etc etc etc. I thought it was very organized lol but maybe not :/ lol I'll try this.
Where should we locate types and css
depends on the project, not all projects need it so I didn't include it. But you should follow the same patterns and general idea of this video!
I like to include a types folder and put my types/interfaces in there in alphabetical order
haha nice, same here actually
@@cosdensolutions one thing that I really try to wrap my head around, is the thought process before even starting a project. A lot of developers (myself included) love to just jump right into the code with very little planned and just wing it. What is your thought process to design process? Like, how do you choose what DB to use, what Architectures, etc. I would love to see you do a video on that. Maybe a video where you clone a website like Tiktok, but instead of simply cloning it, you can break down each part going over architectures, DB choice/choices, etc. It'll make your channel a lot different from all of these UA-camrs doing flat out clones.
@@netTraverser I usually plan quite a lot before doing a project. I'll try to make sure to know what the project will need and what directions it is going in, and then make decisions based off that. I am the type of person who will always advocate for spending more time initially to plan things, because in the long run that will be more beneficial.
And with regards to DB and things like that, to be fair I usually consult with backend devs as they know more about this than me. I've used mostly relational databases, and sometimes other types, but generally I don't take the lead in those as it's not what I'm concerned about in my day to day job. Sure that is slowly changing now with server components and stuff, but that's still quite a ways from being the norm. So I'm going with the flow
@@cosdensolutions Gotcha. Thanks for that. 🙏🏽
if you are affected by OCD like 😂
Naming things with generic name like utils and helpers is bad practice. Name things on what they do. Formatting is a good example.
where is the client and server folder located?
this was a general structure that would apply to all react, not any specific framework
:)
Nice vídeo
thanks
thanks