Junior vs Senior React Folder Structure - How To Organize React Projects

knowing how to structure your folders and files in react is quite difficult because react doesn't give you any help they leave it entirely up to you how you want to do this structuring so in this video i'm going to go over three different examples of folder structures in react and these are going to be for beginner intermediate and advanced users but just because a folder structure is beginner or intermediate doesn't mean it's less good than the advanced version for example smaller projects definitely benefit from these more beginner approaches to folder structuring while larger enterprise style applications are going to benefit from the advanced section [Music] welcome back to web dev simplified my name is kyle and my job is to simplify the web for you so you can start building your dream project center and today we're talking all about react folder structures now to get started i'm going to be covering the beginner focused project layout then we're going to go into intermediate and then we're going to go into the advanced one but like i said at the beginning make sure you watch each one because smaller projects definitely benefit from a simpler more beginner focused approach now for most people when they get started in react their source folder is going to look something like this and the whole crux of this video is going to be focused entirely on this source folder because really all the other components like your public folder your node modules and any package json and eslint files those are going to be very project dependent but the source folder is where all of your main code is going to go and you see here that we have three main folders inside of the project we have a components folder we have a hooks folder and a tests folder and this is very indicative of lots of react projects they just shove all their components inside the components folder any hooks that you have go in this hooks folder and then everything else just kind of sits inside the source folder so you can see we have like utility functions like format date format currency we have our css inside of here and inside this components folder you can see we have components for everything from like a simple button all the way to more complex things like a form input or like the new to do modal or nav bar so everything from like super complex things like the entire home page all the way to simple things like a single button are going to be inside of this one components folder and when you're working with a smaller project you know like a simple to-do list like that this project that's just a simple to-do list it's fine you only have you know 10-20 components they can all fit inside of this components folder and it's pretty easy to understand what's going on also you can see we have our hooks separated out which is just kind of a handy feature to have all your hooks in one place to make it easy to reference those in your components and that way you know which were components and which things are hooks now this is like i said good for smaller projects but as you start to scale up this components folder is going to get really unruly because you're going to have so many components shoved into this one single folder it's going to be hard to know what are pages what are small components what are stateful components presentation components so with all your components one place it's hard to distinguish what is what also you'll notice we only have a couple folders so things like our you know format currency and format date these are like library methods or util methods these are all shoved inside of our source folder and if you get a lot of utilities such as tons of different formatters and different things like that this source folder is going to become very large very quickly which is a huge mess to work with another important thing to note is also our context is in here so our to-do context is inside this source folder and our test folder here contains test for everything all in one folder so you can see we have our test for all of our components our test for our hooks and so on you can imagine there's more tests inside these folders but this is one thing that i see in a lot of beginner focus projects is they put all their test code in one location and then all the rest of their code in a different location so it's kind of hard to know which tests are associated with which files because you have to like go into all this different nesting and your tests are not anywhere near your components so if you have test it's generally better to put them next to the actual code that is testing so it'd be better to have your test in this components folder or in this hooks folder for example but again since this is such a small project it's fine because there's only like 20 30 files total so it doesn't really matter that they're laid out like this and when i'm breaking small you know little to-do list applications and so on this is how i format my code generally but let's say you want to step it up to the next level to a slightly more advanced project not super large but still quite a bit larger than this toy application to do that you're going to want to jump up to an intermediate level code structure like we have here as you can see the first thing that immediately jumps out is we have a lot more folders and also there's a lot less files inside of our source folder that aren't in a different folder and this does two things for us first it helps separate out all of our different concerns here so we have assets components context data hooks pages utils so we can separate out all of our files and also it makes it so our source folder is a lot cleaner when we open it up we just have a few really basic files that have to do with like our index and app page and all the rest of the entire code for our application is inside of these folders now first i want to go through the folders that are new and then i'm going to go through the older folders as well so the first new folder we have is an assets folder this contains things like images svgs global css any type of asset that you're importing that's not like actual javascript code that's going to go in the assets folder pretty self-explanatory but it's great to have this folder because it means you can store all of those files in one location so they're easy to access wherever you need them next we're going to go down to our context folder this folder here has our off context or just any context you can think of so anytime that you have a context that you want to have just put it inside of this context folder right here also you'll notice inside of these folders i have the test directly there so my test file for this off context is directly inside this test folder and that's going to be for every single one of my different folders i'm going to have the test directly inside the folder for those tests so they're as close as possible to the file it's testing next we're going to go down to a data folder this is a folder that's great for containing like any json data that you have like if you have a store for example you might have a store json file or maybe you have some constant variables that don't change you can store all those in this data file or this data folder super convenient books folder this is exactly the same as before but now we have our test localized inside this folder this page is what i'm going to skip over real quick because it's the largest change by far and then we have our utils folder and this just moved all those utility functions that were inside of our source folder and put them in one location so that it's easy to save them in one place and access some other places now an important thing about this utils folder is the code i put in here is generally very small and simple functions and generally i want them to be a pure function if you're not sure what a pure function is i have a full tutorial covering it i'll link in the cards and description but the general idea behind a pure function is that no matter what input you give it it always gives you the same output for the same input and it doesn't have any weird side effects so it's really just a small function that is very simple to understand that's what's in that utils folder now moving on to the pages folder inside of here we have some changes as well as inside the components folder and they actually link to each other so the thing about our components folder is now you can see that it's broken down into different folders instead of being just a bunch of files and each of these folders has you know a purpose so here's all of our form components here you can see we have all of our ui components like a modal and a button and we just have our random navbar component as well so the reason we're doing this is because now it structures our components folder because as it gets larger we make more components they're going to be slotted into these different folders but also you'll notice we're missing some of our components like where's our to-do list where's our to-do item where's our form for our to-do's none of those live in our components anymore and instead those live inside of our pages so each page in our application is generally going to have some components to it that are shared and some components that are unique and a lot of the shared components are things like a check box or things like a button those are shared between all your pages but if we go to our homepage here for example you can see things like our new to do modal that doesn't show up anywhere except for on our homepage same with our to-do form our to-do item our to-do list all of those are specific for our home page right here so it makes sense that we only include those components inside this home page and that's the idea behind using this pages folder you have one folder inside our pages folder for each page on your screen for example home login settings and sign up and then for each one of those pages you put all the code that is unique only to that page inside of here so our to-do context is only used on the home page so all the code for that is inside this home page folder same thing with login we have things like our login form and a hook for using login same thing for settings we have a settings context a settings form a use settings hook all that stuff that is only for that particular page goes inside this pages folder by doing this you're able to break down your components and your pages and separate them from one another so now your components are like general small components a lot of times these are just presentational components they don't even store any state you just give them data and they render out some output to the screen they're really straightforward components and you use them everywhere in your application a lot of these things are like ui components and form components and things like that and then your pages this is for each individual page on your screen so that means that you know this new to-do model like i said it's only used on the home page so we're not storing that in the components folder where you could use it other places or where it can get confused where it's used you know for a fact since it's in this folder it's only used in one single place another important thing about these pages is you'll notice it contains everything it's not just components it's also hooks it's context it's everything that is only for that page even if we have like utility functions that are only used on our home page we put them inside of this home page folder and this is great for like medium sized applications where you have you know a handful of pages maybe 10 15 pages it's pretty easy to handle and each of the pages are fairly unique from one another that is where this type of structure is going to be perfect it takes it away from that beginner focus structure where everything was shoved in like two folders but now we have separated out folders for everything and it's pretty easy to follow exactly what's going on but as you scale up to really large enterprise style applications that have tons of different features and tons of different editions you'll quickly run into problems with this structure and the number one problem you're going to run into is more and more things are going to be shared across multiple pages so now as you start to add more and more components and more and more features you're going to have to start pulling things out of your pages and putting them into components so they can be shared across your entire application and this is a bit of a problem because then as your application grows your pages are going to become more simple and your components folder becomes more complex which is the problem we're trying to avoid with this which is where we need to move into the next step which is the advanced folder structure for larger applications and here we come to the final version which is the advanced version and this version is very similar to the previous versions but the one big difference you're going to notice is this folder called features there's a few additional folders but this features folder is the most important now we're going to cover all the folders here but this features one is the one you want to keep in your mind is the most important and we have our assets folder that's the same we have our components folder exactly the same context folder again the same data folder the same skip features for now go into hooks which is also the same with this new layouts folder which is specifically for components that deal with laying things out so like nav bars sidebars footers those kinds of things that are used across a lot of components in a lot of pages that's what this layouts folder is for this is optional if you don't have that many layouts just put them in your components folder and it's fine but if you have a page with lots of complex layouts using the layouts folder is really helpful now we have this lib folder this lib folder is really important because in most projects you're going to build especially larger projects you're going to pull in a lot of third-party libraries whether you're using like fetch which is built into browser using axios or any other third-party library you're going to want to implement that in your code and generally you're going to put that in many places in your code but what if you need to update the version of that library well now you need to update it all over your code base the idea of this lib folder is essentially an implementation of the facade pattern now if you're unfamiliar with the facade pattern i have a full video cover and i'll link in the cards and description for you but the idea is you take a library for example axios and you wrap the entire library in your own code that exposes the library in its own way so you essentially have a facade that you put over top of this axios library and then you use that facade everywhere in your application so now if you need to update axios you only have to update it in one single file in your application and everywhere else is just going to work so this makes working with large scale applications way easier because instead of changing in a million places you change it in one single location now we're going to skip pages again go down to services services is about integrating with an api for most applications you're going to have some type of api you're going to integrate with so services is where you put all your services for calling your api for example like logging analytics for that's what this is doing so you put all the different service based api calls inside this services folder and you can use them across your application and then we have utils same as it was before i mentioned features pages are going to be our big change let's open up pages real quick and you'll notice one interesting thing is we no longer have folders we just have individual files for each of our pages for example home login project settings sign up super basic super straightforward and it's really easy to work with so how do we go from that folder structure of pages to this file structure the way we did that is by implementing features in application development generally what you're going to do is you're going to add new features to a website you know the user is like you know what i liked your to-do app but now i want the ability to like list my to-do's under a project so now you need to add a project-based feature this features folder is all about taking all of the code for a feature and putting it in one single place so let's look at authentication for example authentication handling signup login user data all that kind of stuff it's all in this feature folder and you notice in this feature folder we have another set of folders like components hooks services and if you remember those are the same folders we're using inside our source folder so features is almost like a mini version of your source folder for each one of your different features so in our authentication we have different components we have different hooks and we have different services and those are the reasons that we have these three folders but if we had for example assets or context data we would have folders for those inside our authentication so in your application think of all the features that you have in your application create a folder for it in this features folder and then inside that features folder it's an exact replica of your source folder minus the features folder obviously because your features won't have their own features so you're just kind of duplicating that file structure to make everything as laid out as possible and you do this with all your different features for example here we have components and services here we have components context hooks and services and our to-do's we have some assets for example so each one of our different features are going to be inside these feature folders and all the code for those features is going to be contained inside of this one single folder and the important thing is we have this index.js file and the idea behind this index.js file is that we export all of the things we want to use from this feature from this index.js and then we only ever import from this index.js file right here in our application that means if we want to have you know a bunch of components in our to-do's but we only want to be able to export a couple of those components to be used we export them into index.js and you just make sure you never actually import from any other files or folders inside this features folder this is a great way of encapsulating all the logic for those features in one single location instead of having it all spread out throughout your entire application now everything to do with to-do's is right here everything to do with projects is right here and this makes it easy to add new features you just add a new folder or to change a feature you just go into that folder and make those changes and everything outside the features folder is really straightforward for example our hooks this is only going to contain hooks that are like global used across the entire application every feature for example every feature could use the local storage hook and same thing with our lib here this is only for libraries that are used across all of your features same thing with services utils and so on because most often these outside folders for like utils lib and so on they're going to be really small pretty straightforward and 99 of your code is going to be in this features folder so each feature is going to have its own code right there which means you don't have to worry about a lot of global code that's the hard thing with making a good folder structure is a lot of time all your code just seems to be global it's just imported and exported from all over the place but with a structure like this we have kind of self-encapsulated features and they only export certain code and they only import certain code and they don't communicate with each other from within each other which makes it really easy to keep them separated from one another and then finally when we go to our pages this is just going to be taking our different features and implementing them where they belong so our pages are actually super straightforward because again all the logic is inside of our features now like i said at the beginning of this video just because this is the advanced folder structure doesn't mean it's the right folder structure for you this is really only applicable if you have a large scale project because if you try to implement a small to-do list application using this folder structure you're going to have tons of empty folders and tons of wasted space and complexity when you could just do it with that beginner-focused folder structure so really you have to think about how large is your project and which of these folder structures is going to best work for your project if you enjoyed this video and want to take your react skills to the next level check out my completely free react hooks course linked in the description below it covers every single react hook as well as how to create 30 different unique custom hooks in react so make sure you check out that course linked in the description below because it's completely free with that said thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 306,570

Keywords: webdevsimplified, react folder, reactjs folder, react js folder, react folder structure, react js folder structure, reactjs folder structure, react javsascript, react js, reactjs, react, react javascript folder, react javascript folder structure, react folder system, react file system, react organization, react js organization, reactjs organization, reactjs folder system, react js folder system, reactjs file system, react js file system

Id: UUga4-z7b6s

Length: 16min 15sec (975 seconds)

Published: Tue Jul 12 2022

Reddit Comments

[u/charliematters]

The last bit of the code block at the top of this page shows how to export from another module

https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export

[u/neuralSalmonNet]

export { default as myDefault } from "/modules/my-module.js";

one liner for import and export.