WEBVTT 00:00.090 --> 00:02.430 Hello everyone and welcome back. 00:02.430 --> 00:07.500 In this lesson we're going to learn how to use components in future yes components. 00:07.500 --> 00:14.190 Allow us to divide our web apps into reusable blocks of code and weaving the components we can then 00:14.190 --> 00:18.690 write both the javascript the logic and the HDMI code. 00:18.690 --> 00:24.450 As you can see here in this scheme most of the times in every application each page that you see is 00:24.450 --> 00:31.440 composed in fact by a number of components oftentimes nested within one another so that in such cases 00:31.470 --> 00:37.770 we can actually talk about parent component and child component components are awesome because they 00:37.770 --> 00:44.160 allow us to keep our code ordered and maintainable thus giving us the chance to create large scale projects 00:44.360 --> 00:45.020 easily. 00:45.030 --> 00:50.490 In this lesson we will also talk about props especially type of attribute that we used to pass the data 00:50.520 --> 00:56.750 between parent and child components when a value is passed from one component to another job. 00:56.970 --> 01:00.750 It becomes a property of a component Teamsters to which it has been passed. 01:00.840 --> 01:03.830 So let's call some practical examples. 01:03.930 --> 01:04.160 Okay. 01:04.200 --> 01:05.970 So here we are invisible to your code. 01:06.000 --> 01:11.700 And as you can see I've already written most of a boilerplate code for this lesson talking about components 01:11.730 --> 01:17.550 and props in this lesson we're going to create a comment component that you're then going to use to 01:17.550 --> 01:24.520 display all the details of an array of comments that are going to define in the detail object here inside 01:24.540 --> 01:26.200 the main instance. 01:26.250 --> 01:32.190 The comments from the array will then be passed to the comment component as a prop that we've defined 01:32.250 --> 01:36.570 as a special attribute for a passing data into our components. 01:36.570 --> 01:42.360 And so this component that we're going to create could be for example one of several components inside 01:42.360 --> 01:43.770 a blog page. 01:43.770 --> 01:48.810 So you could have the comment component and the Post component maybe an advertisement component and 01:48.810 --> 01:49.490 so on. 01:49.500 --> 01:58.800 So let's start by creating our data object and inside the detail object we can now define the comments 01:59.370 --> 02:04.610 array and of course inside of the array we can now define all the single objects. 02:04.620 --> 02:08.330 So first of all each comment is going to have a user name. 02:08.550 --> 02:17.940 So a user name and we can said Alice and then content and we can set something like first comment so 02:17.970 --> 02:19.340 let's add a couple more. 02:19.440 --> 02:23.110 So two three four. 02:23.190 --> 02:33.470 And yeah we can set Bob something like hello world and then I don't mean we were comments like new are 02:33.470 --> 02:43.790 more coming soon and then yeah maybe just Superman something like kryptonite. 02:45.870 --> 02:46.420 Is bad. 02:46.680 --> 02:53.340 Let's now define the comment component and then we're going to use the V for directive from within our 02:53.400 --> 03:00.130 aged PML file to show the comments component for as many objects as we have in the comments array. 03:00.210 --> 03:03.080 There are several ways to create components in a future. 03:03.080 --> 03:05.940 Yes because they are such an important part of the framework. 03:05.970 --> 03:11.370 And in this lesson we are going to see one of the most common and easy ways to do so leaving a more 03:11.370 --> 03:19.800 advanced alternative for the final project of the course we can relax so view dot component and Europe 03:19.800 --> 03:22.400 first of all we need to pass a name for the component. 03:22.410 --> 03:29.250 In this case we can just call it comment and then an object and then yeah instead of this object we 03:29.250 --> 03:33.150 can find all sorts of different properties similar to what you've done here. 03:33.240 --> 03:38.890 Interview instance if you're planning to use any prop with your component the first thing that you want 03:38.890 --> 03:41.770 to do is to register the props that you intend to use. 03:41.790 --> 03:47.610 This way the component will expect those props and you're actually going to be able to use them inside 03:47.610 --> 03:48.790 the component itself. 03:48.930 --> 03:53.460 So props which is an object and inside the props object. 03:53.490 --> 04:00.540 We cannot define comment which is that prop that it s to expect and yet we can define the type type 04:00.540 --> 04:03.230 of the prop in this case is an object. 04:03.270 --> 04:04.200 Right. 04:04.230 --> 04:10.290 And considering that the comments prop is necessary for the component itself to work we can set required 04:10.740 --> 04:11.570 to true. 04:11.680 --> 04:18.680 Sometimes depending on the case you might also want to pass it default value but at the moment we don't 04:18.680 --> 04:19.770 need it. 04:19.770 --> 04:25.460 As we've said view components are in fact reusable blocks of code and inside of them we can define both 04:25.470 --> 04:31.400 the javascript the logic and d h the image code that is needed for them to work in the following lesson 04:31.410 --> 04:34.260 we will see our components can become a really powerful. 04:34.260 --> 04:38.810 And we can define instead of an for example data metals computed properties. 04:38.820 --> 04:41.220 But right now let's keep things simple. 04:41.220 --> 04:47.070 So I'm going to define template and instead of template of course we're going to define the HMO code 04:47.400 --> 04:48.590 for our component. 04:48.690 --> 04:55.470 So I'm going to use back Deeks which are very useful in this situation and one very important thing 04:55.500 --> 05:02.030 to keep in mind is that the same way we had to put all the code related to our app inside the same deal 05:02.160 --> 05:03.250 we've I.D. Apple. 05:03.480 --> 05:08.000 So basically in say the same age AML root element the same thing. 05:08.040 --> 05:13.680 We need to keep in mind when defining the HMO code for other components which often simply means that 05:13.770 --> 05:23.470 we need to define the div element like so we can define another div class for example card body. 05:23.520 --> 05:34.940 Remember using Bootstrap we can then close same tag like so India can now define two paragraphs to show 05:34.940 --> 05:43.110 the details of a comment prop so simply I'm going to define comment dot username because comment is 05:43.110 --> 05:48.810 the name of the prop then I'm going to close it and I'm going to define another paragraph with comment 05:49.890 --> 05:51.320 that's content. 05:51.390 --> 05:54.510 Let's see how we can now use that inside our age demo page. 05:54.540 --> 06:01.800 So first of all remember inside this single root element we have a deep app you can use the name of 06:01.800 --> 06:05.060 the component itself which is comment right. 06:05.160 --> 06:07.830 And then here we need to tell you how we intend to use it. 06:07.920 --> 06:19.710 So V for and yet I can define comment and index in comments by ending the comment put up like so equals 06:20.460 --> 06:27.010 comment and as key we can use index and just to be clear. 06:27.090 --> 06:32.730 Yeah I could have done something like these for comment in comments but considering that as we said 06:32.820 --> 06:34.890 passing keep is always a good idea. 06:34.920 --> 06:38.220 In this particular context using index is a perfect choice. 06:38.220 --> 06:39.840 So let's explain what we're doing. 06:39.840 --> 06:45.810 One more time we want to use the comment component that we've defined which is just a block of code 06:45.840 --> 06:49.670 where we've defined how we want our comments to behave and look like. 06:49.740 --> 06:51.010 And it really view dead. 06:51.030 --> 06:56.440 We want to use this comment component for as many comments as we have in the comments array and we're 06:56.460 --> 07:03.090 also passing the single comments of the array as proper to our component so that the component itself 07:03.090 --> 07:05.850 can then use them inside for example of a template. 07:06.360 --> 07:09.260 So it's finally time to move to Chrome which is always. 07:09.420 --> 07:10.610 I've already opened here. 07:10.800 --> 07:17.170 We can now refresh the page and we see our comments and in fact we can also then age our tag. 07:17.260 --> 07:26.560 So going back here remember inside the main root element so error H.R. save. 07:26.760 --> 07:29.840 Going back here refresh. 07:29.940 --> 07:31.260 Much better. 07:31.470 --> 07:33.890 They'll open up view dev tools. 07:34.050 --> 07:43.970 So I'm going to move these aside and here view and as you can see we have our a root element of course 07:44.420 --> 07:51.170 and inside of data we have an array of 4 comments which are objects and of course for each of them we've 07:51.170 --> 07:58.340 got content and user name and then you can see that now we have each single component each single comment 07:58.640 --> 07:59.660 component. 07:59.720 --> 08:05.750 Notice also how they get highlighted on the left side of the screen if we click on them we can see their 08:05.750 --> 08:06.460 props. 08:06.470 --> 08:11.570 In this case comment which is an object with is two different properties and you could also see that 08:11.570 --> 08:14.160 we have key so key one key to anchor three. 08:14.270 --> 08:18.880 So this is in fact a good opportunity to actually show you our key gets assigned. 08:18.920 --> 08:24.530 So going back to results in your code and specifically to the H table. 08:24.680 --> 08:30.570 Yeah we can add key index plus 2 so saving Queanbeyan here. 08:30.660 --> 08:34.240 Let's refresh how you see now that keep on the first comment. 08:34.250 --> 08:43.710 Yes this is true but of course let's go back to the standard index like so okay so that was it for this 08:43.720 --> 08:45.710 less on all about components in Georgia. 08:45.710 --> 08:46.160 Yes. 08:46.190 --> 08:51.290 As you can see there are really important and powerful feature of the framework and in this lesson of 08:51.290 --> 08:56.360 course we've seen how we can send props from a parent component to each child which basically means 08:56.360 --> 09:01.250 that we've seen how we can pass data from a parent component to a child component but we still need 09:01.250 --> 09:06.200 to learn how to best data in the opposite direction meaning from the child component to its parent. 09:06.200 --> 09:08.620 We will learn how to do so in the next lesson. 09:08.630 --> 09:09.110 See you there.