Hello everyone and welcome back.
In this lesson we're going to learn how to use components in future yes components.
Allow us to divide our web apps into reusable blocks of code and weaving the components we can then
write both the javascript the logic and the HDMI code.
As you can see here in this scheme most of the times in every application each page that you see is
composed in fact by a number of components oftentimes nested within one another so that in such cases
we can actually talk about parent component and child component components are awesome because they
allow us to keep our code ordered and maintainable thus giving us the chance to create large scale projects
easily.
In this lesson we will also talk about props especially type of attribute that we used to pass the data
between parent and child components when a value is passed from one component to another job.
It becomes a property of a component Teamsters to which it has been passed.
So let's call some practical examples.
Okay.
So here we are invisible to your code.
And as you can see I've already written most of a boilerplate code for this lesson talking about components
and props in this lesson we're going to create a comment component that you're then going to use to
display all the details of an array of comments that are going to define in the detail object here inside
the main instance.
The comments from the array will then be passed to the comment component as a prop that we've defined
as a special attribute for a passing data into our components.
And so this component that we're going to create could be for example one of several components inside
a blog page.
So you could have the comment component and the Post component maybe an advertisement component and
so on.
So let's start by creating our data object and inside the detail object we can now define the comments
array and of course inside of the array we can now define all the single objects.
So first of all each comment is going to have a user name.
So a user name and we can said Alice and then content and we can set something like first comment so
let's add a couple more.
So two three four.
And yeah we can set Bob something like hello world and then I don't mean we were comments like new are
more coming soon and then yeah maybe just Superman something like kryptonite.
Is bad.
Let's now define the comment component and then we're going to use the V for directive from within our
aged PML file to show the comments component for as many objects as we have in the comments array.
There are several ways to create components in a future.
Yes because they are such an important part of the framework.
And in this lesson we are going to see one of the most common and easy ways to do so leaving a more
advanced alternative for the final project of the course we can relax so view dot component and Europe
first of all we need to pass a name for the component.
In this case we can just call it comment and then an object and then yeah instead of this object we
can find all sorts of different properties similar to what you've done here.
Interview instance if you're planning to use any prop with your component the first thing that you want
to do is to register the props that you intend to use.
This way the component will expect those props and you're actually going to be able to use them inside
the component itself.
So props which is an object and inside the props object.
We cannot define comment which is that prop that it s to expect and yet we can define the type type
of the prop in this case is an object.
Right.
And considering that the comments prop is necessary for the component itself to work we can set required
to true.
Sometimes depending on the case you might also want to pass it default value but at the moment we don't
need it.
As we've said view components are in fact reusable blocks of code and inside of them we can define both
the javascript the logic and d h the image code that is needed for them to work in the following lesson
we will see our components can become a really powerful.
And we can define instead of an for example data metals computed properties.
But right now let's keep things simple.
So I'm going to define template and instead of template of course we're going to define the HMO code
for our component.
So I'm going to use back Deeks which are very useful in this situation and one very important thing
to keep in mind is that the same way we had to put all the code related to our app inside the same deal
we've I.D. Apple.
So basically in say the same age AML root element the same thing.
We need to keep in mind when defining the HMO code for other components which often simply means that
we need to define the div element like so we can define another div class for example card body.
Remember using Bootstrap we can then close same tag like so India can now define two paragraphs to show
the details of a comment prop so simply I'm going to define comment dot username because comment is
the name of the prop then I'm going to close it and I'm going to define another paragraph with comment
that's content.
Let's see how we can now use that inside our age demo page.
So first of all remember inside this single root element we have a deep app you can use the name of
the component itself which is comment right.
And then here we need to tell you how we intend to use it.
So V for and yet I can define comment and index in comments by ending the comment put up like so equals
comment and as key we can use index and just to be clear.
Yeah I could have done something like these for comment in comments but considering that as we said
passing keep is always a good idea.
In this particular context using index is a perfect choice.
So let's explain what we're doing.
One more time we want to use the comment component that we've defined which is just a block of code
where we've defined how we want our comments to behave and look like.
And it really view dead.
We want to use this comment component for as many comments as we have in the comments array and we're
also passing the single comments of the array as proper to our component so that the component itself
can then use them inside for example of a template.
So it's finally time to move to Chrome which is always.
I've already opened here.
We can now refresh the page and we see our comments and in fact we can also then age our tag.
So going back here remember inside the main root element so error H.R. save.
Going back here refresh.
Much better.
They'll open up view dev tools.
So I'm going to move these aside and here view and as you can see we have our a root element of course
and inside of data we have an array of 4 comments which are objects and of course for each of them we've
got content and user name and then you can see that now we have each single component each single comment
component.
Notice also how they get highlighted on the left side of the screen if we click on them we can see their
props.
In this case comment which is an object with is two different properties and you could also see that
we have key so key one key to anchor three.
So this is in fact a good opportunity to actually show you our key gets assigned.
So going back to results in your code and specifically to the H table.
Yeah we can add key index plus 2 so saving Queanbeyan here.
Let's refresh how you see now that keep on the first comment.
Yes this is true but of course let's go back to the standard index like so okay so that was it for this
less on all about components in Georgia.
Yes.
As you can see there are really important and powerful feature of the framework and in this lesson of
course we've seen how we can send props from a parent component to each child which basically means
that we've seen how we can pass data from a parent component to a child component but we still need
to learn how to best data in the opposite direction meaning from the child component to its parent.
We will learn how to do so in the next lesson.
See you there.