Best React Folder Structures | Beginner - Intermediate - Advanced

[Music] hey guys how's it going i'm back here with another video and today i decided to bring this video which was requested by a lot of my subscribers which i completely understand because it is indeed an interesting topic and i'm really excited to bring this video for you guys and today i'm going to be going over my opinions on a beginner intermediate and advanced folder structure for any react application now obviously there isn't a right answer all of this is going to be based on my opinion and also backed up by some research that i did for this video and together with the experience that i have uh coding react applications and building large-scale react projects now before we actually get into the video if you guys could leave a like i would massively appreciate it because it will help push my video to more people and we just hit 10k which i i'm very grateful for that uh so i would massively appreciate if you guys could leave a like or subscribe if you're not subscribed and yeah that's basically it let's get into the video so initially i'm gonna start by going over a beginner uh a beginner folder structure so what i consider is a beginner is someone who has never quoted a react project before in their life so i'm just gonna show you right here uh for someone who never coded a react product in their life i don't think they should worry that much about the folder structure however it is nice to already start implementing some best practices um into their project so that their code isn't that as like very messy right so initially you see that our folder structure will be pretty simple um on this side over here because we'll just focus all of our um all of our organization into the src folder and when you click on it you can see clearly that the first thing i did was i deleted some of the initial files that come with react so i deleted the index.css the all the test files and i think that's i think that's it and the reason why i did that is because no beginner will write tests right um i i don't even think intermediate people will write tests i will only include uh somewhere to write tests if you're an advanced or if you're developing a large scale react application and for a beginner you shouldn't worry that much about it so that's why i deleted those files and also you can see that i created two folders over here well you if you're if this is your first direct application most likely you will be coding most of your project in this app.gs but is it is already very important that you start implementing some of the core components of react which are for example um separating your project into various different components and that's why i created this components folder inside of it you can put whatever you want i can put the foo like a footer component a network component um i can put whatever else i want right just components that i want to import in my app.js and use it over here and then if you want to write any css or anything related to styling it is also nice to create a folder over here called styles or whatever you want to call it where you can store all of the css files now a beginner at least in my experience shouldn't worry that much about organization however as i mentioned before this is a good way to structure a very simple react application uh which will like at the very least it won't like make your code as messed as usually a beginner code might look like so um that's that's kind of my take on a beginner folder structure now most of the people who watch my videos are actually intermediate i believe so i think that will probably be the folder structure that will be more applicable for your case okay guys so now we actually got into a more intermediate folder structure and as you can see right off the bat um a lot of changes were made uh from beginner to intermediate there's a lot of things you should learn uh and it's it's it's a hard process however i honestly believe that it's harder to get started and react and get used to just building a very simple react project than to actually transitioning from a beginner to intermediate and the reason for that is because you got to get used to the react um environment right you got to be used to what components are used to using hooks um all the different stuff so in the beginning it's very different it's very difficult however when you reach a point where you feel comfortable it will be much easier to learn new topics so for uh intermediate folder structure i decided to go with the following folders so the first one is and i'll go in order from what like it appears over here the first one is assets and this one over here it's it's not totally necessary together with all the other ones it's it depends on each case but with assets you would want to store all the audios um images videos that you might want to have inside of your react app so usually at least in my opinion for images audios and videos i like to actually store them in a different not in the file system like to store them either in a i don't know in a bucket or store them in aws or in some sort of service that provides storage however it doesn't need to be that way forever right for example if you just need a single image into your project then obviously you wouldn't need to spend your money to put those into a cloud provider you would just put them inside of your file system so uh in that case you would use uh you can create an assets folder and just store them like this i like to differentiate them like this because it just makes it so much easier and by the way i know many of you guys are wondering why why my my folders look like this it's because i use an extension it's called material theme i believe it is used to just highlight your folders to look a lot better than what they normally look like so that's why my my folders as you can see over here the icons look a lot better so this is the first folder that will probably add to my application and again it's based on necessity so only if you have audios or images or videos in your project you would need to put those folders in inside of it so let's go to the next one which is off so if you're creating a project which includes authentication and especially in react you might want to have a folder specifically dedicated to that and the reason for that is because for example um if you're using authentication you will probably need to hold some sort of context right some sort of global state that holds information everything regarding your authentication process so instead of here you might want to create your of context uh if you're using the context of api obviously and here you might also store some functions that for example the login function or something like that that are very important and need to be dealt very carefully especially because authentication and authorization or stuff that are needs to be carefully crafted because it basically dictates the security of your website so i would definitely make it so that it is very easily accessible for the developer to access those files so that's why i would create an auth folder over here and it is present in most of my new applications whenever i use some authentication in my react project i do it like this then you would create a components folder and this is a standard for any react application i didn't put it on actually but i actually put it in the beginner folder structure sorry about that um and it will probably stay for for most projects because um whenever you want to create a reusable component and when i mean a component this time actually means something like a button or an input or something more specific like um i don't know a button that does a specific thing that you might want to reuse many times in your project then you definitely want to create a separate component for it put it inside of this folder over here and then whenever you want to reuse this component just import it to the file directly from this folder and yeah that's that's kind of it's pretty self-explanatory and that's very important in any project now we have the helpers folder which i actually didn't put anything inside of it because um it it actually just serves to it doesn't necess like it doesn't necessarily need to be in a project however you easily will encounter yourself needing um or writing a file that you don't know where to put so if you're in doubt just create a helpers folder and put that file there an example of this is for example i had a project where i consistently needed to um i actually needed to use a function which converted strings into specific date formats and i didn't want i wanted to reuse that function many times but i didn't know where to put it right and you might say oh if you're reusing it just put it in the components folder but it wasn't a component it was just a function so that's a good use case for the helpers folder because i could just make that function inside of here export it directly from the file and whenever i want to access the function again i can just import it directly from this folder now after that we have the hooks folder and again if you did this it depends if you have hooks in your project uh some hooks that might be useful in a react app would be a use query hook where you basically make requests and you can customize every kind of request api like every kind of specification that you might want to have in your application uh whenever you make api requests instead of that hook and then just use it whenever you want to make an api request uh this is more a little bit more advanced uh i would say but get used to creating your own custom hooks because it will definitely help out with most react apps now i can't stress enough that many beginners who are transitioning to intermediates don't put enough time on learning about hooks and their use cases and i would just say that there's a reason why they transition like the react developer team transition from class components to integrating functional components using hooks because it is very powerful it will make your code look a lot better it will make your code act a lot it will be more it will make your project more scalable in many different ways so i'll definitely try to implement um hooks into your project and store them in a folder like this one and then finally we have a very very common folder in many applications and the naming again it doesn't matter it just depends on yourself i call it pages whenever i make a project but i know many people call it routes many people call it i don't know navigation whatever you want it's just a folder that will contain all the different pages you have in your application if you're using react router dom for example uh this is where your routes would be and for each router specifically for example if i want to have a login page a main page a profile page i will create an individual folder for each one of them where inside of it it would have both the css or and the like the actual component that renders the page and you can see that right now actually i didn't in the previous in the beginner um project character i didn't use jsx as an extension i used js as an extension and i just named everything in capital letters but um if you're intermediate i would recommend i would highly recommend using jsx and using this naming convention a convention where you just put dashes between each word and the reason for this is because you really want to be able to differentiate the components from just individual files that you use to help in your application for example uh the in the auth folder the auth context is a gis file because it isn't a component but about us is a component so it would probably be a jsx and i just realized that i called both of this js as well i'm sorry about that call them jsx because they will probably return a component they would return a component so it would probably be jsx as well so each of them each page would contain their css and any other file or whatever like any other file that is specific for this page individually i would put here too and you can see that i created one for each folder and that's kind of the idea and i also put an index.js down here at the bottom because uh you don't want to whenever you want to import the about us component maybe you don't want to actually just import this like have to write the path to like this folder individually and then reach this file over here what i like to do is i like to have all of these folders over here and at the bottom of this pages folder i just have an index.js where as you can see i write a little bit of logic where i import each component inside of your each page from here and at the bottom i just export this pages as a single object which means that whenever i want to import a page or a route all i have to do is i just have to import from the pages and i just determine the route that i want to import if you're confused about that i can i can make a different video on what this means but it just makes it so much easier to import stuff it saves you a lot of lines of code whenever you want to import many files so that's a little trick that i would definitely recommend and finally for the intermediate folder structure we have redux which um i'm actually i just put this here because i know a lot of people use redux i don't i don't personally use redux but if you use um i know that there are many configuration files many files that you might want to put inside of a redux folder and that's why i added over here but normally i wouldn't have this inside of you and now again this is my opinion so um there you might have um different opinions and i would definitely like to hear them if you want to put them in the description in the comment section i'll definitely be reading all the comments and actually i there's some stuff that i would still add to the intermediate folder structure for example if you want to add validations to your to your uh your project you want to you might want to create a folder for that right but i didn't put it over here because i believe that for an advanced pro like for an intermediate project it wouldn't be completely necessary but for an advanced project those would be completely necessary so that's kind of the distinction that i want to make and taking that into account let's segue into the advanced folder structure and now we move on to the advanced folder structure so i even had to zoom out a little bit so you guys can see everything better and straight off the bat you can see that we added some stuff outside of the src folder so one thing that i added was the config folder which is pretty self-explanatory if you need any configurations for your project you might want to put it over here you can also have this inside of the src folder i usually put it outside but it doesn't really matter it's just anything that really that relates to configuration then um one thing that i want to you guys to keep in mind is when i'm building an advanced project i can't imagine a reason why you would build an advanced project in react without using typescript now that's kind of controversial because a lot of people because there are a lot of people who don't use typescript and there are a lot of people who don't want to transition to typescript but i would encourage them a hundred percent to if you're getting to a point where you feel like you're prepared to start building more advanced stuff i would definitely recommend to put typescript as something in your skill set because um it's definitely beneficial many companies use typescript because um it saves a lot of development time it doesn't have any impact i believe on like speed or anything it's more about the fact that you'll be able to debug a lot easier because um you're defining your types your your your building your application exactly how you believe it should be while typescript infers a lot of stuff so it opens up holes for bugs to appear and i just think that if you use typescript it would be very beneficial for your project so for that reason most of the files inside of an advanced folder structure will be either in typescript or so ts or in in tsx which is the typescript version of jsx and also an advanced project i would probably be using docker so i created a docker file and a docker ignore file over here and i would be using something such as eslint i would be using prettier so i edit those files over here so that it can like obviously i didn't actually implement those i didn't configure anything um you can see my docker file has nothing inside of it but those are just visual representation to show you guys that this is kind of how it would look like and inside of my src folder which is where everything starts happening you can see that we added a few more folders but not a lot and the reason for that is because i want to emphasize this point which is it isn't it isn't it really isn't about how many folders you have in your project you shouldn't be just creating folders for no reason uh but at the same time you gotta you gotta agree like this should be your project you shouldn't be putting everything into the same folder everything into the same file so the important thing here and this will come with experience is you need to find a balance between um how you're going to organize your project because at the end of the day you're not organizing it for yourself you're organizing it for other people if you're building a large project probably more developers will come in and look at your code and you want to be able to make it as easy as possible for them to look at it and understand what's happening so i'm not going to talk about the folders that already existed i already talked over about assets but you can see in the components i changed my my components to be ts instead of js which just to emphasize the fact that i'm using typescript then i also created a constant folder this is because you might have some constants in your application that's that's something that happens with time um it isn't like necessary again um but it's something that i encountered uh needing i encounter myself needing to create such folder later on in my react developer journey um i definitely didn't use any constants or even find the need to create a folder for that in the beginning but uh in the latest projects that i've been coding uh i definitely created one so i wanted to include it over here then i'm actually going to skip this core ui because i'll explain it in a bit um then obviously the helpers the hugs folder um all of those are actually necessary now interfaces this is specifically for typescript you know that in typescript if you want to declare an object or if you want to press past props for example you need to declare an interface now i wouldn't put the interfaces for props inside of here unless they are shareable between many different components i would actually put inside of the individual component i would at the top before you actually declare the component i would declare the interface that represents its props and again this is all typescript language so if you're not familiar with typescript don't worry but this is kind of the idea these are all the interfaces that would probably be shared so i would say something like um if you have an object called user that you want to be using throughout your application declare its interface over here and whenever you haven't you're going to be using that object you just import this interface the user interface and use it inside of there so this is kind of the idea of what the interfaces folder means and then we have the pages which again it's the same thing but there's a slight change um first of all you can see that i'm using typescript right so tsx again i changed it from jsx to tsx and the next thing is i actually removed my css file and that's kind of like um that's just something that i find i found myself uh i don't know with time i i don't like using css like pure css anymore i like to use some sort of library that will or some some sort of css framework that will help me grab my code better and in my case i love using styled components so for that to happen you have to make a file which is either a typescript file or a js file so what i like to do is i like to inside of the component where i'm going to be writing my styles i like to create a style file which is just the name of the component dot styles dot ts and inside of here i create my style component style right my my component and again if you're using any other css framework don't worry this isn't uh like you don't need to do it this way i i want to i want to emphasize this um but i'm just showing you how i would probably do it and then for tests um test is a bit tricky because uh i like to think that i'm from that i'm experienced with tests and i'm currently using tests at my job however testing is something that you never get really really good at it and it comes with time and i feel like i'm i'm good at it but i i would say that i'm not as experienced as many people around the world right obviously but i like to put my test files inside of my like my test folders inside of each component that will require some tests some people like to put it in the srt folder but i like to separate it this way because i guess it's it's how i was taught when my first job at a startup this is how they did so i just kind of followed what they did and nowadays this is how i organize my folder but you can see i did the same thing for my login um just tests unit testing um test your components whatever you want uh this is what you will probably put over here and this is basically it for all the pages then we have a services folder which if you recall in the in the previous um in the intermediate version i had an auth folder which in this case i put it inside of the services folder because you might have different services in your application which might require um some sort of folder to store them and authentication is a service in your application so that's why i put it over here some examples um let me think about it it's just different different things that that are independent from most for from the rest of our application but are really important to it so authentication is an example of that and i'm sure you can come up with other examples i usually create a services folder and i usually put my auth folder inside of it and then finally i have the validations which um this is for any forms that you have in your project i would definitely recommend validating each form and making sure that the va that the inputs that the user are inputting into those inputs or those forms are actually what you want so over here i would probably create a schemas folder which represents all the different schemas throughout my project for example if i'm registering for a registering user in my application i will put the registration schema inside of you if you're not familiar with this i have some videos on validation i have a video on um how to validate using formic which is a very very famous library and yup which is a validation library so i would recommend you guys watching it obviously but that's kind of the idea i would probably i'll definitely have a validations folder inside of my application and then i go back to my core ui folder over here which i didn't mention initially because i hadn't mentioned yet that i was using i like to use type components and this would be any css or any um styled ui component that is shared throughout the application i would put it over here for example uh if i this components over here which are reusable if i had some sort of specific style that i wanted to use for this button over here i could put the style inside of this core ui folder and it would it would be pretty well organized now this is the idea i again want to say that this are all opinions i i'm using my experience to to tell you guys this this isn't a standard you shouldn't be like i'm not saying that you should do this i'm just saying that uh when i was a beginner developer when i throughout my journey i always loved to watch this kind of videos and i think youtube kind of lacks this kind of videos so what i used to do is i used to just go over github and search as many projects as i could and just try to replicate their folder structures and that works to some extent however like if something works for you you shouldn't be changing just because someone else is doing that so i know it's kind of um contradicting the point of this video but uh i think that at the same time you can learn but not underestimate your own ability to work through your own project you know what i mean um most of what i know most of what i use are actually side effects of my previous job experiences how we organized in the industry how how we organized in a large scale project so i'm just giving some examples that i hope you guys actually got some value out of it so that's basically it for this video if you enjoyed it please leave a like down below and comment what you want to see next subscribe because i'm posting three times a week and i'm putting a lot of effort into this channel we just hit 10k as i mentioned and i'm really grateful for that so i actually have a plan for this summer i want to hit 30k i don't know i don't know if that's even doable but um you know get your hopes high and stuff will happen i i got to 10k which was a dream and i would never expect that so who can say that we're not going to reach 30k right so to do that i would really appreciate if you guys could subscribe and yeah that's basically it hope you guys enjoyed it and i see you guys next time

Channel: PedroTech

Views: 15,178

Rating: 4.9359536 out of 5

Keywords: computer science, crud, css, javascript, learn reactjs, nodejs, programming, react tutorial, reactjs, reactjs beginner, reactjs tutorial, typescript, react js, node js, pedrotech, traversy media, traversymedia, clever programmer, tech with tim, freecodecamp, deved, pedro tech, folder structure, react folder structure, react best practices, react best practices project structure, react large project, react project, react folder structure explained, web developer, web development

Id: XEO3mFvrDx0

Length: 24min 55sec (1495 seconds)

Published: Wed May 19 2021