Now we previewed this a little bit already, because we saw what was inside of the index html file, but we're going to walk through it again and go through each element. So the very first thing that you're going to see is this assets directory, and it has a helpful "README" in here. And so the "README" actually says what you would use the assets folder for. This is where you can put your static images or other types of code libraries.

Now I will say that I very rarely, if ever, place any type of libraries here. I will place some static images here and then you call those from the application. So say you have a profile picture or you have something that doesn't need to change, so this is not where you would have a user upload their files. Instead, this is just someplace where you might have your company logo or something like that. So that's the role of the assets directory.

The favicon here, this is the little icon that is at the top of web browsers. So, let me actually switch to a web browser right now, and let me show you one.

So here I actually have part of the React course outline. And so you can see what I'm going through as I'm filming. You see this little box right here, this little icon, this is what a favicon is if you're curious. If you were to go to, say, Google.com and you see the little 'G' right next to the title? That is the favicon.

So that is all that a favicon is. You get a default one whenever you create the application. You get a spot for it, but later on in the course I'm going to show you how you can have a custom one that will fit your logo, or it could be a couple of letters in your name, anything like that and so that's what we will do later on.

And then, lastly, the index.html file. Now we talked about this a little bit, but this is such a critical part of understanding React. I want to take one more look at it. If you went through the html course then you already know how to build a static html site. And we can create a just regular html document, and in that document, you have things like a document type.

And you have all of these tags, these beginning and closing tags, you have meta tags, titles, all kinds of things like that. And so that is really all a react application is. Or, I should say, that's the entry point for it, so, whenever someone is going and they're accessing your application, they're going to start by going to this index html file.

Now they're not going to realize that because React is so good at being able to capture the user coming in. So, when they come in, all that technically is going to be given to them is this little empty div. And then what React does is React intercepts it and then it starts to just dynamically slide in the data right here. And that is how users are able to see all of the content, that's how they can access forms, pages, anything like that.

As opposed to a static website and so years ago the way that we'd build an application is we would have an index.html file, that's the home page, then we'd have an about.html file, that'd be the "About Us" page, then a contact.html. So you'd have all of these documents and then you would have to link between each document and that's how you created a website.

Now with React, the way it works, is you'd technically just have a single page or a single document and then React does the work. And this also goes for other JavaScript applications like Vue or Angular or any of the other frameworks. And so they take in the single document and then they simply leverage JavaScript to slide in and out any of the data styles, components, anything like that. And so that makes it kind of nice because you only have this single html file to deal with.

And so this is a spot where you can place custom fonts, which we're going to do later on in the course. You can have some of your metadata, like your title and all of those kinds of things. So we'll make one little change here, inside of this title tag, we will simply say that this is going to be my own personal portfolio.

So this will be the Jordan Hudgens portfolio, you can put your own name there, and I'm going to hit save. Now I don't have the server running so let me start that up. So "npm run start" will get this going and I'm going to show you that whenever you make a change to the title that is not something that you see on the page.

But, instead, that's associated with the metadata of the document. And so we'll see exactly what that represents and, when you change it, what it does. So we're just waiting for the server to start up right here, it looks like everything should be loading up here in a second.

And, while that's going, let's switch over and I'm going to shrink this file, or this browser here, so that we can go and access it. So whenever it is loaded you can go to "localhost:3000" and there you go. So now, if you look up top, you can see that it now says "Jordan Hudgens Portfolio."

And don't get confused with the content we have here. So if I were to change this, and it could say anything, it could say "Jon Snow Portfolio" here. You hit save and you can see now it says "Jon Snow," but it didn't change the content on the page.

This content is coming from the component, this is actually in the index html file, I'm going to switch it back because this is what I would like to have. And you can dynamically change this in the application as well, but it's nice to have a starting title tag for your document, because that's the first thing that users are going to see, and it's also what is passed to places like Facebook or Twitter.

So if someone copies a link from your website and pastes it into social media, the way that they get the title is by using these types of tags and so we'll talk about that later on in the course, though.

So, in review, what we covered in this guide is we've walked through the different elements associated with the static folder inside of a React application. It allows you to have assets, your favicons, and then most importantly, the entire entry point for your application which is your index.html file.