React For Beginners #2 - Project Structure Walkthrough

Key Takeaways

[Music] hello everybody and welcome to the second video in this react tutorial series for beginners now in this video what i'm going to be doing is going through all of the folders and files that were created in the previous video when we kind of ran that script that pre-generated our react application for us all right so let's go ahead and get started the first folder that i want to look into is this public folder then we'll go into src and then we'll talk about node modules and what files we can actually delete from here that we don't need so the most important file inside of our public folder here is going to be our index.html now this is kind of the base template for our website if you want to think of it that way this is the html document that will actually be rendered to start and then react will kind of inject itself inside of this html document and control a certain part of it so you can see we have some things here like we have meta we are referencing our fave icon.ico we are defining the viewport we have a description we have our apple touch icon which is equal to the logo 192.png we have the manifest we're referencing the title no script and then we have this div now this div is the most important part of this file right here because this is actually where react is going to inject itself in so you can kind of think that this file is generated and then react will control this div so if you had other stuff that wasn't inside of this div react would not be able to control it and it would appear on the website no matter what so if i put like a p tag here it doesn't matter what my react components are rendering anything in this p tag will always be showing up on the website okay so hopefully that's kind of clear but that's the index.html file next we're going to just look at this icon this ico so if you want to change this icon this is like the icon of the website what you can do is just drag in a new icon it has to be dot ico and just name it the same thing and it will automatically update for you okay and then we have logo 192 and logo 512. obviously you don't need these logos but i'll just leave them in for right now because they're being referenced by our index.html file if you were to delete these logos then you would want to delete the links to them inside of this html file here now notice that we're actually referencing anything inside of this public folder by using this percent public url percent so that's how you can reference anything inside of this folder but for now kind of assume you don't really need to touch anything in here you don't need to move anything around delete anything it's totally fine the way it is next we have this manifest.json so actually i lied inside of here you can change the short name and the name of your application so actually let's go ahead and do that let's change this uh to be inventory like that and then we could just make this uh inventory management system or something so let me copy that and we'll put that here inventory management okay nice so i can save that now and then obviously the definition of all of your logos and your icons are here again if you were to delete those you would want to delete their respective entries inside of this icons list now what the manifest actually does is kind of just give a description of your application this is most useful for mobile applications there's a few things here like the default start url the display the theme color the background color you're welcome to mess around with those but not particularly important for what we're doing next we have the robots.txt file i won't really discuss this but this is something that kind of handles or defines something related to when a bot comes on your website you've probably seen these files before if you've worked on the web but i won't really get into it okay next we're going to go to src so src is a much more important folder than public public as i said we don't really need to touch and actually anything inside of this public folder is not going to be a part of our kind of compiled javascript when we actually run our application so if you're unaware of what i mean by compile javascript we'll talk about that as we talk about the src folder now so this src folder this is where we're going to put all of our source code anything that's actually going to be bundled up by webpack which is a technology that's kind of working under the hood i'll discuss really what that does in a second and well you want to put almost everything related to your application inside of this src folder there's very few exceptions for where you want to put something in the public folder rather than the src folder but any javascript files you have must go inside of here that is an absolute must in css and everything you have to put inside of this src folder now oftentimes you'll see people that kind of put another folder in here they'll maybe say like components like that and then they'll put all of their just raw javascript files that are rendering or that have react components in them inside of the components folder now you don't have to do that when your project gets larger you'll see that people kind of separate their components into different directory structures so it's really easy to figure out where stuff is and then they might have all their css and like a css folder and their logos and stuff in a different folder but for now we just have all of our files here all right so the most important file here is going to be index.js followed by app.js so let's go into index.js first uh index.js okay so you can see here we're importing a bunch of stuff we're importing react react dom we have index.css this is a style sheet that's going to be used for application and then we have app from app and then what we're doing is we're saying reactdom.render and in strict mode we are rendering our main app component now all of the stuff in react kind of the functions or classes that we're going to create are typically what are known as components now we'll get into components in the next video but just understand that when i say component i'm kind of referencing something that looks like this something that's like app like this is a component uh okay and then what we're doing is we're rendering this here inside of the document.getelementbyid root so we're finding the root div in our index.html file and then we're kind of injecting so this div right here we are injecting this app inside of that diff and so as i said we have control over this entire div we can render stuff inside of the div because the app component is going to be inside of it and then what this react.strict mode means is we're just going to have some more verbose output sorry in our console so we'll get some better warnings and error messages than we typically would get uh that's kind of what react strict mode does if you didn't use react strict mode like you could remove it and just go like this and this would work fine as well you don't need react strict mode okay so that is index.js now we have this report web vitals thing i'm actually going to delete this i don't really want to talk about this so we don't need this at all so just delete that import and then where it says report web vitals you can just delete that file inside of src okay so that is index.js this is kind of the entry point for our react application it takes our main component and it renders it inside of the html document okay so now we can go to app.gs so this is what i showed you in the last video we just changed this to say my website is running this is the main component for our application this is the first thing that's rendered inside of that div and this component here is what will render other components as well so you can think of this as kind of the main react app as it says app and then from here this will render all of the other stuff that will appear on the screen so as we saw we have this div named app we have a header we have an image we have a p tag we have a link and actually what i'm going to do here is just delete all of this i'm just going to put a p tag and just say uh maybe we'll go like bare bones bare bones app get rid of all that random stuff that we don't need also means we can remove the import from logo.svg and we can delete logo.svg because we don't need that anymore all right so again this is our main application and what this returns is html actually what's known as jsx that's going to be rendered inside of that div in any ways you might notice here this says class name rather than class this is a small change uh in react when you're using what's known as jsx which is this syntax here i know it looks just like regular html but you actually can write a kind of native javascript right inside of this html we're going to see that in the next video regardless one of the main changes whenever you have a class rather than just saying class you say class and then capital n name and then equal to whatever it is okay so then we are going to look at the style sheets so we have app.css you can see that was being imported right here these are obviously all the styles related to that app component we have like an animation and a few other things i'm actually going to delete all of this because now that we don't have these divs we're going to run into some issues so let's get rid of all that let's close that and then we can go back to index.js we see this is importing index.css if we go to index.css we can see we have more styles these are global styles for our entire application awesome so i'm going to delete that next thing we'll look at is this app.test.js and then setuptest.js so app.test.js what this is doing is just allowing you to run automated tests for your application so if you're working in like a real code base and you're actually working on a big project a lot of times you want to write some automated tests that will go through and do some testing of your user interface and so you could actually run this test and this would then tell you if the test ran successfully right so i'm not going to get into testing we're not doing that in this video you can delete this file if you want but we'll just leave it in for now so we will continue in one second we need to quickly thank the sponsor of this video and this series which is algo expert algo expert is the best platform to use when preparing for your software engineering coding interviews they have over 155 coding interview questions on the platform they have a data structures crash course mock interviews and a ton of other awesome features check them out from the link in the description and use the code tech with tim for a discount on the platform next i'm going to go to setuptest.js now this kind of does what it says it just sets up the testing environment for us by importing this library that's about it not much more to that file okay so that kind of covers the src folder and as i was saying everything inside of this src folder is kind of the source code for application any javascript needs to go inside of here any css you're probably going to want to put inside of here and all of this stuff is going to be kind of bundled and packaged up and compiled by a tool that we have called webpack all right so now let's talk about package.json so package.json kind of defines all the dependencies for our application so you can see it says dependencies and then all of the things that we need to actually make this work so if you were to install another dependency we'll do that later in the series you'll see it's automatically added to package.json now it also defines a few scripts you can see that this is actually the script we used to start our web server it's calling something called react scripts and then start we then have our build our test and our jack script which we won't end up using here but those are other scripts that you could use and you could actually define your own script inside of here for example you could say something like run api maybe you had an api attached to this project and then maybe that api is a python project and you say python3 run underscore api dot pi or something but that's totally valid you can define your own scripts that do really whatever you want we have a few other things in here uh some stuff related to our linters and development and that's about it we don't really need to talk about much more awesome next we have this readme.md file you can feel free to read this if you wanted just some information about this kind of default react application then we have this yarn.lock file i won't really talk about this too much just some more stuff related to dependencies and then we have git ignore so when you actually create this react application using that create react app script it will automatically initialize an empty git repository and then it gives you a git ignore file and the reason it gives you this git ignore is because you don't want this node modules folder and a bunch of other kind of temporary files to be a part of your github repository because they are usually really massive and there's no need to be transferring this level of files because we have this package.json file so now let me discuss this node modules and then kind of clarify a few things that i skimmed over so node modules this is where all of the dependencies for your project is this is by far the largest folder if you actually look at how large this is probably in the hundreds of megabytes there's tons of different stuff inside of here and the reason there's so much is because yeah your project may only have five or six dependencies but those dependencies may have you know hundreds of things that they depend on and so all of your dependencies and subdependencies are inside of this folder and so if you don't have this folder well your project is not going to work now the thing is though this package.json file defines all of the dependencies that are inside of this folder all of the main dependencies and so if you actually delete this folder you're able to kind of reinstall it or re-add it to the project by simply reading this package.json file running a very simple command that actually will install all of these dependencies for you so i'm going to show you that let's delete this file here it's going to take a second to delete once it's done i'll be right back all right so i've deleted the node modules folder you can see it's gone here now let me just show you if i try to start my application i say yarn and then start we should see that we get an error it says command failed with error code one react scripts not recognized as an internal or external command the reason it's not recognized is because well that was the dependency for our project and we no longer have it and so to reinstall all these dependencies what you need to do is type npm i or npm install it's the same thing and what this will do is install all of the dependencies for you based on your package.json file so it will read the package.json look at all the dependencies here and then automatically install it so if i run npm install you're going to see it will start creating the node modules folder and then it also will create a new folder this or sorry new file this is going to be called packagelock.json you'll see that created in a minute you don't really have to worry about this file this is kind of just defining what this npm command actually did so if you see package lock json don't worry about it you can leave it you can delete it doesn't matter it's you know it's not something that we really need to talk about okay so that is package.json and that is what the node modules folder does and with that that kind of wraps up all the different files inside of here now the last thing i'm going to discuss is kind of the technologies running behind the hood here so we have something called babel and we have something called webpack which are doing a lot of kind of the heavy lifting for us so that all of this stuff works and it's very efficient and we don't have to worry about it so you've probably heard of something called webpack before but maybe not essentially what happens when you run this react scripts if we look here react scripts start is it's using a webpack and what webpack will do is it will take all of your source code and it will bundle it together into one large javascript file the reason it does this is to make everything as efficient as possible it's kind of running a javascript compiler so taking all of your source code and compiling it down into stuff that well the browser can understand that's going to be the most efficient to serve and to run that's really the best description i can give without getting into too much detail that's kind of what webpack is doing and that's happening on the back end we don't really have to worry about how that happens but that is happening that was another thing that we're using here called babel in fact if you go into packagelog.json you're going to see babel all over the place and the reason for that is what babel will do is it will take your high level javascript code and when i say high level i'm talking about sorry you're like es6 es7 javascript code it will actually convert all of that code into es5 javascript code or like older versions of javascript codes that will work on pretty much any browser because if you try to use really new like state-of-the-art javascript stuff older browsers don't support that so you're going to have problems and so what babel does is it kind of makes sure that your application is going to be compatible with any browser that is being used okay with that that's going to conclude this video i'm sure this is still probably a little bit confusing for you guys this will start to clear up as we actually start working with these files but hopefully this just gave you an idea of what all of these different things are kind of how they link together and a little bit about how they work and maybe now this doesn't just look like a bunch of gibberish and you can kind of understand why we have all of these different files and folders awesome well i hope you guys enjoyed if you did make sure to leave a like subscribe i will see you in the next react tutorial you