Hello and welcome to another lecture. Great job McNichol here. So just to recap what we learned, we learned about what is Vue js, we learned about where to use Vue js, we learned about how to integrate Vue JS into a website, we learned about data properties, we learned about data binding, we learned about methods, computed properties, watch properties. We even learned about two way data binding. We even learned about events, even modifiers, input events, mouse events, etc. So we learned a lot.

So. So now with these fundamentals established now we can really jump into components. So what are components? Why do we use components, we can really understand what makes components so much great, and why do every front end framework prefers to use them. So not even not only just view, even if you go to Angular, or if you go to react? Because components are very much useful for code reuse.

If you have a piece of code and you want to reuse it, if you want to reuse the functionality, you don't have to rewrite everything. First example of component that we saw is HelloWorld component that we saw In the first lecture, right? When we said at the UCLA, by the way, you also learned the UCLA great job on that. So let's start off with the components. So what are components? To demonstrate what are components, we can take our website.

Let's take Amazon, for example, like we always do. So for Amazon, we have the navigation bar, and we have the footer. For each and every single page, these two, navigation bar and footer will be the same. So these two will have the same functionality, these two will have the same look. So what we can do is we can categorize them into components. The main advantage here we get by making them into components is we can make this data dynamic.

So let's see what we can do. So first, we'll remove the Hello World component. we'll delete it. Alright, so to create a new component inside a file structure We have a separate folder called components. You can right click it new file. And we can say, header dot view.

So the dot view indicates the view file. It's a view component. So we don't we already talked about the advantages of dot view extension, right? So dot view Extension has its own template, script tag and style, making it very much easier to maintain and very much easier to understand. So I created a new component. To start off with a basic template.

I can do that by typing a C, and you can see scaffold, and if I press tab, now this is the header component, right? So we want to have whatever is in the header. So one thing to note here is that each and every component needs to have one main div or one root div. So for this instance, we'll create an div that says header. Inside this div, we'll create a ul and Li right If I save it, we will not see anything because we haven't imported it to our app component. So as of now, our So as of now, our website is based on the app component.

So our app component is what is being rendered. So there is no trace of header component inside our app component to later to let our app component know that there is a header here. What we can do is inside the script, we can import it import header from date slash components header. So it the rate indicates the source directory. Alright, so if I save it, but still there is nothing being displayed here. That is because we haven't registered it yet.

So for registering a component, we have a separate tag that says components and inside the component, we can say header. Now the registration part is done. All right, now we have the component registered, we can use it in the template, we can go to the template can say Hello. With that, we have our header here. So what happens is that whenever I want to have this header on any page I want, I can just import the component and load it up. It's as simple as that.

So in the next lecture, we'll also talk about props, which will focus on sending data to the component. So remember how we talked about having dynamic data inserted component. So we can do that using props, that will be the next lecture. So one neat thing about components is that we can have nested components. So header is a component and inside header, we can have another component. So what we can do is inside components, we can create a new file that says data node download view, data component, right, so inside header, we can follow the same procedure.

First, we're going to import data from component components slash data. And inside the script tag is going to have a component stop it And inside components are going to register the data component. And we can use it using data. If I save it, I have a data component. So the data component is being rendered inside the header component. And this header component is being rendered inside the app component.

So no one's done header component. So once the header component and data component kalila. Alright, so that's it. Alright, so that's all so. All right. So that's it for the components introduction.

I'll see you in the next lecture.