Never organize by the tool you're using (enum, interface, redux). Things that change together should be next to each other. You don't want to be in 4 completely different places in the folder tree every time you touch a feature. What do you change more: Reducers for all features, or reducers and components for a single feature? This is why React has single-file components. People never learned from AngularJS.
Check the feature-sliced design, I use some patterns from it in my angular projects for example slicing components folder on entities, features, pages and always keeping everything near the feature. Cool thing
I appreciate ur comment because it gives a different perspective to the topic :) Like i mentioned, there is no exact answer, specially cause every project/developer is different. When i made this video (a year ago), i was using my dev experience at my first 2 jobs as a basis. Both followed similar structures as i showed in the video. Now, i think more aligned to what u mentioned in ur comment! But like i said, both options are equally correct, it depends on how u and ur team like to code.
First, congratulations for the video. For the next level, react *expert* you should explain the folder structure with patterns like HOC and Provider. Micro-frontends folder structure differences, differences between folders structures with different state managements and stuff like that should be good too.
Very good video. I would just add... I am new to react, angular is the must I use, but I usually think that structural organization should be present at the root and top levels, and functional organization from the third or forth level. That means that root is just for configuration of the technologies used (docker, git, typescript...etc). Inside src usually I have two folders ans some loose files to configure the application. Inside src I always add two folders shared (for shared things like assets, shared components,, shared styles... etc) and layout that contains all functionalities to be exposed and visible to the user. From then on every folder is functional, that means it holds multiple types of things that serve to a single functionality. Than means that file distribution may change, but as a rules of thumb, functionalities are always in a folder with a name that explain what they do (not what they are as in structural design). On the structural philosophy, things are groped by file type, in the functional they are grouped because they are part of the same functionality). If you have many functionalities that do similar things, they are grouped (pages, services, etc), If they are global are in the shared folder, if not, they are in the layout folder. As you say... this is just an opinion.
Cai e para-quedas aqui nesse vídeo e adorei a forma como você explicou como organizar um projeto no React. Já me inscrevi no seu canal para aprender mais sobre React. Vi que no seu linkedin você foi instrutor de React e isso só trouxe mais confiança para assistir e acompanhar seus vídeos aqui. Parabéns pela jornada. Meu sonho é me tornar um ótimo programador e me mudar para o Canadá. Forte abraço.
Eu sou também sou BR e gosto muito dos videos do @PedroTech. Continue estudando bastante que com certeza vc vai realizar seu sonho de ir morar no Canada!!! Força irmão :)
The comment on using typescript is spot on. Recently did a vanilla JS project after years of Typescript and the amount of typos and other simple things typescript would call out immediately was really terrible. Can never go back now
Hey, Pedro. Hope you doing well. Just passed by to say thank you for your work here on RUclips. Maybe you have no idea about how much they help people that are just starting out with React. Big hug, and keep up the amazing work 💯
Could you create a tutorial on building a react app. Basically something like CRUD but you display information in the form of a table and you can edit and delete each row.
Commenting while watching.. 1)damn.. beginner to intermediate was a big jump.. 2)the pages, can you make a vid explain in depth about it? 3)Tutorial on Redux, Redux toolkits, Redux-Thung, React-redux.. 4)Tutorial on Docker.. 5)Tutorial on TypeScript and how to use it.. I saw it can be use on the frontend and the backend.. not really sure how to use it.. Thx as always for the vid..
1) Hahaha yeah it is. I think its harder to go from beginner to intermediate than intermediate to advanced. 2) Yeah, but its just the routes. For example, when you have a home page, a login page, a profile page. I just put them in the pages folder. 3) I don't use redux hahaha but maybe I will learn it and make some videos on it :) 4) Planning on it ;) 5) I have some tutorials on it, but will definitely make more!
@PedroTech You said your goal was to hit 30k over the summer and you weren't sure it was possible. Either way you are at 37k now so good job man you deserve it!!
For the advanced I'd also recommend looking into atomic design (atomic methodology), i think it provides a very nice structure for the components and components interacting with other components. Also, for advanced + TS I'd recommend structuring your componets into folders (folder per component) and working of of index.tsx styles.ts interface.ts file structure for each of these component folders. It helps you keep things much more organised and removes the need to look into multiple different places to work on one bit of the UI. The interfaces folder then is only for generic stuff (api responses, constant types and so on).
@@PedroTechnologies If you do not use Redux, what do you use for state management , my friends use Redux but I find it difficult to learn , could you do a video on what state management system you use ?
Thank you for this video--I appreciate the honesty at the end, indeed every project is unique and the developers in the end can make the best judgment call. Videos like this are definitely helpful for getting there though.
Hey Pedro! Great video, thanks for that! I still have a question about this subject. What about the backend? Should we create a separate folder like backend or server? Do you have a folder structure suggestion for an App including frontend and backend?
@@marcoonlinetv7769 Yes I've used the context API in my React projects to date, which has been fine for those smaller projects. My understanding (impression) was if you want to become a mid/senior level React JS developer, using and knowing Redux was essential as many companies use it.
@@137dylan being senior is not about knowing redux, but rather than being able to learn new library in one weekend, it doesn't matter if is it redux, recoil, mobx or zustand, really
nowadays context with useReducer does the job that years before you could only achieve with redux or smth. I tend to avoid redux as much as I can, too.
Whilst not the main topic of this video I have to take issue with your statement regarding who prepares tests and at where level. Software engineers and test engineers bring very different mindsets to the development process, and all for the better of the product. Of course, on smaller teams these two roles are often performed by the same person but at different times. That does not mean developers on larger teams have no responsibility for testing, whatever level. Your (ancillary) comment that only senior developers need be concerned with writing tests is completely incorrect although I would limit their responsibility to unit testing. I am firmly of the opinion that no code can be called complete and fit for purpose without unit tests to prove it and the construction of such tests is the responsibility of the developer, irrespective if TDD was employed or not.
I understand ur point, but I respectfully disagree! I feel like there is a disconnect from very smart programmers to the rest of the coding community. Most programmers will find it EXTREMELY hard in the beginning, and a good amount of them will give up. My channel and videos are meant to help beginners move past this and start enjoying the process of learning. If I sat here and told them that they had to start testing since the beginning, I would be ignoring the struggle I went through when professors/courses told me the same. In my opinion, testing is not as important as finding your love/joy in programming, and it can easily be a burden if done right in the beginning. It does set good standards, but it doesn't matter if eventually the people learning will lose motivation and stop coding. In my opinion, testing comes later on in the journey, not when u are a senior dev, but when u start building stuff that will be used by other people (like an entry level job or a startup u are starting). Code doesn't need to have tests to be complete, code is code. Just because someone wrote bad code it doesn't mean it's not code. Also, I don't believe TDD is necessary for everyone, I personally leave my tests to the end of each component group/feature I add and it works great! This is an awesome topic to discuss :) I appreciate ur feedback!
what about features folder . I read redux document and they write : "We specifically recommend organizing your logic into "feature folders", with all the Redux logic for a given feature in a single "slice/ducks" file".
Hey, thank you so much for the video. I am checking on how to add the authentication in React. can you share the link in a comment if you have any video containing it please?
Sorry about that hahaha I planned on posting the last ep tuesday. But since it is a deployment video, I want to set up everything and prepare prior to it in order for the video to have the least amoutnt of mistakes possible (deployment is really annoying hahaha). And bc I was overwhelmed with work from my job, I couldn't finish recording it monday or tuesday, so I made this quick video since a lot of you asked. Next video is the last ep of the series!
So, is not a good practise to declare props' interface in the same component if we don't need to export them? E.g. if I have a card componente with title, body and function in props, would you put this props in Interface folder too?
Hi! Thanks for your video. Very helpful. I'd like to ask which folder we put the file for consuming web apis? Is it inside the services folder, like /services/apiCustomer.ts?
I disagree! Although testing is very important, it is mostly important later on in their dev journey (closer to when you are applying for jobs). Thousands of beginners give up when they start because they get scared, so making them write tests would only make them more scared. I learned testing 1 or 2 months before getting my first react job (so like 5 months after I started learning it), and never had issues with it. But everybody is different, so it depends on the person :)
With typescript you use 90% of the development time to guess the type, create types, find typings for your libraries, unlike the native js alternative where you just focus on going forward.
How do you manage larger states within your application if you don't use redux? I was curious to explore some alternatives. Btw the content is great. Keep going 👍
Hey! Thanks for your effort... By the way how I can interaction with Pages components. I mean when u import all file in index.js file in Pages folder then how can i show my content on website. Thank in advance
Should we keep our folders with a capitial starting letter? I noticed that in your intermediate example you had the initial letter capitalised on the folder (e.g. Helpers) but in the advanced example it was the opposite (e.g. helpers). Does it matter or is it preference based?
Never organize by the tool you're using (enum, interface, redux). Things that change together should be next to each other. You don't want to be in 4 completely different places in the folder tree every time you touch a feature. What do you change more: Reducers for all features, or reducers and components for a single feature? This is why React has single-file components. People never learned from AngularJS.
Check the feature-sliced design, I use some patterns from it in my angular projects for example slicing components folder on entities, features, pages and always keeping everything near the feature. Cool thing
I came here to say exact this. Great thing he shared, because you commented. Now we all learned :D
I appreciate ur comment because it gives a different perspective to the topic :) Like i mentioned, there is no exact answer, specially cause every project/developer is different. When i made this video (a year ago), i was using my dev experience at my first 2 jobs as a basis. Both followed similar structures as i showed in the video. Now, i think more aligned to what u mentioned in ur comment! But like i said, both options are equally correct, it depends on how u and ur team like to code.
@@PedroTechnologies vertical slice became popular in big react applications, separating the project into modules based on ddd
I didn't expect someone to have a video on *exactly* what I wanted to know. Thanks!
1:00 beginner
3:30 intermediate
13:54 advanced
Images are technically supposed to go into the public folder that comes with create react app . They can be accessed there easily
Not true anymore
images in the public folder her quite heavy because they are by-passed and not compressed by react
Thanks learned a lot. The more folders, the better the technology
First, congratulations for the video.
For the next level, react *expert* you should explain the folder structure with patterns like HOC and Provider. Micro-frontends folder structure differences, differences between folders structures with different state managements and stuff like that should be good too.
Very good video. I would just add... I am new to react, angular is the must I use, but I usually think that structural organization should be present at the root and top levels, and functional organization from the third or forth level. That means that root is just for configuration of the technologies used (docker, git, typescript...etc). Inside src usually I have two folders ans some loose files to configure the application. Inside src I always add two folders shared (for shared things like assets, shared components,, shared styles... etc) and layout that contains all functionalities to be exposed and visible to the user. From then on every folder is functional, that means it holds multiple types of things that serve to a single functionality. Than means that file distribution may change, but as a rules of thumb, functionalities are always in a folder with a name that explain what they do (not what they are as in structural design). On the structural philosophy, things are groped by file type, in the functional they are grouped because they are part of the same functionality). If you have many functionalities that do similar things, they are grouped (pages, services, etc), If they are global are in the shared folder, if not, they are in the layout folder. As you say... this is just an opinion.
Cai e para-quedas aqui nesse vídeo e adorei a forma como você explicou como organizar um projeto no React.
Já me inscrevi no seu canal para aprender mais sobre React. Vi que no seu linkedin você foi instrutor de React e isso só trouxe mais confiança para assistir e acompanhar seus vídeos aqui. Parabéns pela jornada.
Meu sonho é me tornar um ótimo programador e me mudar para o Canadá.
Forte abraço.
Eu sou também sou BR e gosto muito dos videos do @PedroTech. Continue estudando bastante que com certeza vc vai realizar seu sonho de ir morar no Canada!!! Força irmão :)
Great explanation. I am transitioning from beginner to intermediate, and this helps me a lot. Thanks again.
The comment on using typescript is spot on.
Recently did a vanilla JS project after years of Typescript and the amount of typos and other simple things typescript would call out immediately was really terrible.
Can never go back now
Hey, Pedro. Hope you doing well. Just passed by to say thank you for your work here on RUclips. Maybe you have no idea about how much they help people that are just starting out with React. Big hug, and keep up the amazing work 💯
A simple topic one that is very much needed.
This is truly Invaluable content
Thanks so much, really helpful stuff. As you say there’s definitely a lack of this type of info. 👌🏻
Thanks for the explanation, my current project is so messy that I not even want to open it anymore...
I will put some of your suggestion in use
Here comes the Guru! Thanks a lot, brother. such amazing content. looking forward to your AWS Lamda video.
Glad you are liking the videos! I am still learning more about AWS hahaha should make it as soon as I feel ready
Could you create a tutorial on building a react app. Basically something like CRUD but you display information in the form of a table and you can edit and delete each row.
You can use example like => import Navbar "../../../Navbar"
Long time ago I searched for a video as yours
Happy to hear I helped :)
Great vide0, and those 3 last minutes was gold advice, thx
who tf dare to unlike ur vids?! like, u r too damn coooooll buddy!!
Hahaha appreciate it :)
Commenting while watching..
1)damn.. beginner to intermediate was a big jump..
2)the pages, can you make a vid explain in depth about it?
3)Tutorial on Redux, Redux toolkits, Redux-Thung, React-redux..
4)Tutorial on Docker..
5)Tutorial on TypeScript and how to use it.. I saw it can be use on the frontend and the backend.. not really sure how to use it..
Thx as always for the vid..
1) Hahaha yeah it is. I think its harder to go from beginner to intermediate than intermediate to advanced.
2) Yeah, but its just the routes. For example, when you have a home page, a login page, a profile page. I just put them in the pages folder.
3) I don't use redux hahaha but maybe I will learn it and make some videos on it :)
4) Planning on it ;)
5) I have some tutorials on it, but will definitely make more!
@@PedroTechnologies Have you any particular reason to not use Redux, can you share your thought
about it
Very very good, smart and straight to the point. I was really looking for a short video ! Thanks👏👏👏
Thanks a lot brother, was waiting for this
Awesome! Thank you for watching
@PedroTech You said your goal was to hit 30k over the summer and you weren't sure it was possible. Either way you are at 37k now so good job man you deserve it!!
Thanks , Thanks. It's very Important .. 🔥❤️
For the advanced I'd also recommend looking into atomic design (atomic methodology), i think it provides a very nice structure for the components and components interacting with other components.
Also, for advanced + TS I'd recommend structuring your componets into folders (folder per component) and working of of index.tsx styles.ts interface.ts file structure for each of these component folders. It helps you keep things much more organised and removes the need to look into multiple different places to work on one bit of the UI. The interfaces folder then is only for generic stuff (api responses, constant types and so on).
This ^. I'm doing this for a client project and it has worked out wonderfully. Develop is extremely efficient and fast. Love TS
Damnn....u just teach different ly....and I love to learn different ly...whatta match ! Thank you ❤️
Exactly the channel I was looking for. Liked & subscribed !
wow Pedro, u are the one of the best react instructors, i really appreciate
Well explained!! Great work🙏
Do you have a tutorial on testing in react?
Awesome video!!! In need of this... Thanks
Thx! Consider adding tutorial about Redux structure ;)
Glad you liked it! I am not very experienced with redux so I don't know if I could make such video.
@@PedroTechnologies If you do not use Redux, what do you use for state management , my friends use Redux but I find it difficult to learn , could you do a video on what state management system you use ?
Keep pushing 💥
noob question but what should go inside the public folder? thanks
It is exactly the content i've been looking for. Would you suggest exactly the same pattern for Next too?
Thank you for this video--I appreciate the honesty at the end, indeed every project is unique and the developers in the end can make the best judgment call. Videos like this are definitely helpful for getting there though.
Thank you so much for this video.
The helpers folder is the same like the utils folder?
Good stuff man. Super helpful reference as I’m spinning up my first react app.
I like this kind of content! Quality: 👍
Thank you very much Pedro for sharing,
however, when is the training on typescript :)
Thank you! I have some videos on typescript!
Good work man keep it up!!!
Thank you man for sharing your experience it really helps a lot ❤❤
Hey Pedro! Great video, thanks for that! I still have a question about this subject. What about the backend? Should we create a separate folder like backend or server? Do you have a folder structure suggestion for an App including frontend and backend?
Hi Pedro, Do you have video how to configure your own boilerplate?
You mention you don't use Redux - what do you use instead? I was under the impression it was necessary for larger scale projects. Thanks
useContext + useReducer pattern .It is kind like Redux, but easier to work and you do not need to install anything !
@@marcoonlinetv7769 Yes I've used the context API in my React projects to date, which has been fine for those smaller projects. My understanding (impression) was if you want to become a mid/senior level React JS developer, using and knowing Redux was essential as many companies use it.
@@137dylan I do not speaking about context.api. But context with reducers. This is future and redux is in slow decline
@@137dylan being senior is not about knowing redux, but rather than being able to learn new library in one weekend, it doesn't matter if is it redux, recoil, mobx or zustand, really
nowadays context with useReducer does the job that years before you could only achieve with redux or smth. I tend to avoid redux as much as I can, too.
Excelente vídeo bro. Subscribed
Redux us kinda a pain in the ass but can see the use in it when it comes to managing a huge project with tons of state
can you make a video like this for the backend side?
Here it is: ruclips.net/video/oNlMrpnUSFE/видео.html
So question on the intermediate version, I see u have included your css file in with your pages so would you style your components in there as well?
Whilst not the main topic of this video I have to take issue with your statement regarding who prepares tests and at where level. Software engineers and test engineers bring very different mindsets to the development process, and all for the better of the product. Of course, on smaller teams these two roles are often performed by the same person but at different times.
That does not mean developers on larger teams have no responsibility for testing, whatever level. Your (ancillary) comment that only senior developers need be concerned with writing tests is completely incorrect although I would limit their responsibility to unit testing. I am firmly of the opinion that no code can be called complete and fit for purpose without unit tests to prove it and the construction of such tests is the responsibility of the developer, irrespective if TDD was employed or not.
I understand ur point, but I respectfully disagree! I feel like there is a disconnect from very smart programmers to the rest of the coding community. Most programmers will find it EXTREMELY hard in the beginning, and a good amount of them will give up. My channel and videos are meant to help beginners move past this and start enjoying the process of learning. If I sat here and told them that they had to start testing since the beginning, I would be ignoring the struggle I went through when professors/courses told me the same. In my opinion, testing is not as important as finding your love/joy in programming, and it can easily be a burden if done right in the beginning. It does set good standards, but it doesn't matter if eventually the people learning will lose motivation and stop coding. In my opinion, testing comes later on in the journey, not when u are a senior dev, but when u start building stuff that will be used by other people (like an entry level job or a startup u are starting). Code doesn't need to have tests to be complete, code is code. Just because someone wrote bad code it doesn't mean it's not code. Also, I don't believe TDD is necessary for everyone, I personally leave my tests to the end of each component group/feature I add and it works great! This is an awesome topic to discuss :) I appreciate ur feedback!
what about features folder . I read redux document and they write : "We specifically recommend organizing your logic into "feature folders", with all the Redux logic for a given feature in a single "slice/ducks" file".
Thank you so much Master Pedro
Woop woop! This is great content dude!
Great video; subscribed.
Awesome, thank you!
Hey, thank you so much for the video. I am checking on how to add the authentication in React. can you share the link in a comment if you have any video containing it please?
Why do you use caps on folder names? (Auth instead of auth, Components intead of components, etc)
It is just a preference, some people like to have files with caps and folders with lower. I like both :)
No Ep.17 of "Full Stack Web Development Course"? :(
Sorry about that hahaha I planned on posting the last ep tuesday. But since it is a deployment video, I want to set up everything and prepare prior to it in order for the video to have the least amoutnt of mistakes possible (deployment is really annoying hahaha). And bc I was overwhelmed with work from my job, I couldn't finish recording it monday or tuesday, so I made this quick video since a lot of you asked. Next video is the last ep of the series!
@@PedroTechnologies Thx man, we appreciate the hard wor!
So, is not a good practise to declare props' interface in the same component if we don't need to export them? E.g. if I have a card componente with title, body and function in props, would you put this props in Interface folder too?
How is it GOing, friend
Nice tutorials, thanks for the tips !
Thanks for the amazing content Pedro
Hi! Thanks for your video. Very helpful. I'd like to ask which folder we put the file for consuming web apis? Is it inside the services folder, like /services/apiCustomer.ts?
surely beginners should be learning about testing as early as possible? 1.53 'no beginner will write tests...'
I disagree! Although testing is very important, it is mostly important later on in their dev journey (closer to when you are applying for jobs). Thousands of beginners give up when they start because they get scared, so making them write tests would only make them more scared. I learned testing 1 or 2 months before getting my first react job (so like 5 months after I started learning it), and never had issues with it. But everybody is different, so it depends on the person :)
With typescript you use 90% of the development time to guess the type, create types, find typings for your libraries, unlike the native js alternative where you just focus on going forward.
Is it best practice to name the folder start with uppercase or lowercase?
I occasionally see others name it start with lowercases.
Nice Video! Do you have one with hexagonal architecture either just the front-end or back-end project?
Bro make video on react context fetching api. Two crud in single project
maybe you should rename Pages to Containers.. better understanding?
How do you manage larger states within your application if you don't use redux? I was curious to explore some alternatives.
Btw the content is great. Keep going 👍
you can use context or react recoil
What could i use instead of interfaces if i work with js
Great content 🗯
What about the backend portion? Where do you store those?
Thank you for sharing that :)
Hey! Thanks for your effort... By the way how I can interaction with Pages components. I mean when u import all file in index.js file in Pages folder then how can i show my content on website. Thank in advance
I wanted this...
Hope you enjoy it!
@@PedroTechnologies Yes project structure is very important and best Project structure helps in testing, development as well as it's easy to maintain
Hi,thank you for great video. Which icon extension for files ?
Material Icon Theme
what you use if you don't use redux?
Pedro de donde sos?
Brasil
I don't think there's any point in writing tests for a small react application, especially if no one else is gonna see/use it
Where would you put your endpoints like your api?
That should go into another project, like a backend project using nodejs, express, and whatever db (usually mongodb).
thanks you from Morroco
Out of curiosity what do you use instead of Redux?
context api + useReducer, probably
Does it matter if folder names are capitalized or not?
Should we keep our folders with a capitial starting letter? I noticed that in your intermediate example you had the initial letter capitalised on the folder (e.g. Helpers) but in the advanced example it was the opposite (e.g. helpers). Does it matter or is it preference based?
Please read about PSR concept then you will get your answer :)
I don't believe you can have react files with jsx named with a .ts extension.
Share your eslint settings
big thanks!
great thank you!
@PedroTech Hi, This is Vivek Sharma. I want this folder structure can you give me the link.
You are awesome
Thank a lot.
Am i the only one which hate capital letter on projects files and folders ?
I dislike it too hahaha but I knew a lot of beginners do this so thats why i did this for the beginner and intermediate.
very helpful for me
Pedro, você é Brasileiro?
Meu sotaque entrega demais kkkkkkk
@@PedroTechnologies Kakakakaka desconfiei desde o início, conteúdo bom demais, vídeos em inglês parecem mais técnicos por algum motivo.
Hi bro I need an API integration login on reactjs
Thank u😍
Thanks