Original subtitles

Hello, welcome back in the annual lecture in Dallas lecture, we have initialized stylings of application.

In this lecture, we'll take a look at our main template and it will analyze it.

OK, let's start in Abelard view and let's see what we have here.

We have here lots of age HTML parts.

They are separated by the comments.

OK, so you can see here is a header part, which is a basically our navigation bar.

You can see up here.

Is this part here?

OK, I can also draw it.

Here it is.

This is a navigation bar.

I can draw with those three lines.

All right.

Let me use this, though.

And yeah, so that's a navigation bar.

OK.

Well, we have here next to next here navigation bar here as a hero.

Here are components starting here and ending somewhere down here.

Here are a component is the component this the part.

Here is a background image with that also the search bar here.

So that this is this part here.

Here is the hero component.

Oops.

Here is a hero component, this part here is in between here also have this background image.

This is the hero part, then we have a post to list post, this is a list of all of the Post's posts

here, which are basically products that users can exchange between each other.

OK, it can be, for example, cars and can be computers, some utility stuff, and so on.

OK.

Nevertheless, despite a few details, as you can see, we'll be displaying here.

Let me change the tools here.

OK, so what is displayed here?

Will be the title of the post, as you can see up here.

There is a title he will be the author of The Post the Time, but it was supposed that the image of

the post and there should be some image to make it the wish list.

But this will be handled later.

OK, so that's our posts, the list of all of the posts here and the down here is our last pagination,

and I think it should be also noted down here, pagination, pagination here and is the pagination.

As you can see, it's a quite huge templates, lots of html, very hard to read.

Then you go step by step here and you go through the one story line.

It's very difficult to know what part belongs to the what part of the layout.

That's why you know the O.J. as you are separating the small parts of your layout into smaller parts

of the components.

So not to go to another component here, they'll go to the hero component and so on.

And then in the end, you will connect it together and place it in your or the view.

OK, here.

The the view that you mentioned before, there is one morphologies and is it just a normal JavaScript

file?

And you are important in your view component here to this file, and you are calling to create a functional

from the view framework itself.

This create up function, you are providing your up component and you are mounting it.

So basically, what does it mean that you basically just means that you will take all of these a.m.,

you will take all the JavaScript you collected together and you will mount it into this part up, which

is located into the public folder indexed HTML this here.

So all of this, the entire content of your upload view and its components is mounted here into this

idea of the app and you can see here.

Then you will right click or it will press control option at your command option I.

Just to inspect it, and you will see it here when you go here.

You see, that's all of your HMO.

And you will see that it's mounted into this side of the app.

OK, this ID here.

Maybe it's better.

You can go to Abdulah View and you can create here Dief

X Exchange Area Exchange Area to see the better.

And you will see that all of this is mounted there.

You can see the idea of X injury was mounted to this here.

So this entire content glued together.

Each component by each component joined together into the adult view and upload view.

Entire content joined to the display of tidy up.

That's basically it.

And yeah, that's I had to introduce you this.

And now it's time to separate it into its own components.

Have you got to going to do it?

OK, let's go to our SRT folder on the left hand side, and let's create here a new folder.

He'll be calling it components.

Components will be a folder for all these smaller parts, for all the smaller components components.

You'll write in the components folder.

I will create a new component of visual called NAV Bar in the view.

Jazz is conventions to value a component of the uppercase letter, so no enough bar that you need another

of the two of you.

If you want to provide a view to your component, you need to have a template template like this.

OK.

Just simply template, you don't need to even write a script here now just to provide a template, OK,

so let's go to upload, view and let's get here is A. A header here ending here.

Let's get it and copy it, and you can remove it from here.

You can go to the Nevada review and you can paste it, as you can see, is not intended to very nicely.

What I'm doing in such a case is I will just get the indented part of this here enough and the header

tag.

So I'll get this all of this under the header.

So I click select it and I will press shift and the at the same time shift and adapt the movie to the

left side.

Like this?

Now, everything is great, but ahead there itself through the intended in relation of a template.

So I will select the interim head there just like this and I will press the top to end and date to the

right side.

Now it looks good enough, but it's in on component, and also we'll do one more thing here, too.

We are going to export activity only to export when we don't have any scripts here.

We don't have anything just here, template for now.

Like this and go to your Apple TV, you.

And get to hear this component.

So let's go down to this script part in the script party.

You can import your component, you can do it like this.

Import, import, enough bar.

No.

From act like nothing a string, guys, my mistake.

Import number from.

We are going that currently in the up up fold up file.

They'll go that slush.

Components and enough power like this.

So they're going to the components folder.

No file, the important thing here, no, it's complaining here you can see here this red line is that

we need to we need to provide it here, OK, because we are importing, we need to use it to use it.

You need to register it in an exporter default.

You will provide your components, prop components field and you will provide their your number like

this.

OK.

It's like complaining because you need to use it in your template now.

And also, guys, there is such that if you are using such a common name such as nav bar or I don't

know, footer and so on that it can be same as the HTML elements names to prevent the the duplication

of the components.

You should always prefix it with some keyword specific to your application, so all of my components

will have a prefix of exchange.

So I will not import your number, but I will call.

I will call it exchange enough bar.

I mean for importing the familiar components nav bar.

OK, I'll get to exchange number, and I will pass it here.

Now, when you look at the exchange bar and you can use it so you can go up here and there, the before

was your entry into the old enough bar you will provide here now opening stock exchange and closing

exchange enough bar.

Now, you can imagine that everything quality in your exchange view are actually in enough bar code,

feel this enter ahead that I hear from a template is mounted inside of here.

So this is basically removed and it's replaced with all of these enter content here.

OK.

That's what they are doing here, but you can see it's nicely separated into its own component, and

now we don't even need comments because we know that immediately here it's an extension of power here.

There is also a UN convention, how to variety or how to specify our components because you have two

options here.

You can either buy the exchange number like this, but the first uppercase letter and every other the

other word starting with the uppercase leather, or you can start as in HTML with a lowercase letters.

And you can separate the parts with the Duchess.

Like this and that's the convention you are going with.

Every component will be like this exchange.

There's enough butter.

OK, so every.

Every.

Vaught is separated by Desch, and everything is okay, so that's the convention.

OK, now we can say the guys and we can try it out, if it's if it of course works.

Please verify your entire template.

It didn't change.

Anything could just be that it wouldn't.

No, and it and it's all a component.

Save it.

Go to your browser refresh.

And you should see that exactly.

Place looks as before.

Perfect.

That's a very good start.

Guys in the next lecture will continue with the rest of our components.

So I will see you there, guys.