WEBVTT 0 00:00.240 --> 00:00.630 All right. 1 00:00.690 --> 00:06.180 It's now time to put all of your knowledge that you've learned so far into practice. 2 00:06.180 --> 00:11.910 So in this lesson you're going to be completing a number of challenges in order to create a contact 3 00:11.910 --> 00:12.970 list app. 4 00:12.990 --> 00:16.620 Now as you can see from the preview, it's not looking quite right. 5 00:16.650 --> 00:22.350 So there's a couple of things that you have to do first in order to fix the CSS styles. 6 00:22.350 --> 00:28.080 This will involve going into the App.jsx and applying the necessary class names. 7 00:28.200 --> 00:34.830 Be sure to look through the styles.css file and looking at the class names that are available and 8 00:34.830 --> 00:41.940 then you can compare your current app against the completed one at this address here. And through that 9 00:41.940 --> 00:47.400 comparison hopefully you can figure out the right CSS styles to apply in order to get them to look the 10 00:47.400 --> 00:48.190 same. 11 00:48.210 --> 00:53.880 The next step is to extract the contact card as a reusable card component. 12 00:54.090 --> 00:57.760 The contact card currently lives inside the App. 13 00:57.810 --> 01:03.480 jsx file and that's basically everything that's inside this card div. 14 01:03.690 --> 01:08.970 And once you've gotten it as a reusable card component, you're going to be using what you learned about 15 01:08.970 --> 01:12.900 props in order to render the default Beyonce card. 16 01:12.900 --> 01:20.140 So deleting all of these hard coded bits of information and instead passing it over from the App. 17 01:20.160 --> 01:28.170 .jsx as the properties to that custom card component. Finally you're going to use the contacts.js 18 01:28.170 --> 01:34.440 file that we've got here which has all of these details pre populated for you including some images 19 01:34.830 --> 01:37.820 of these people I found on Google. 20 01:38.040 --> 01:41.700 So feel free to switch it up with your own information if you wish 21 01:41.700 --> 01:48.780 and by the end you should have a contact app that looks like this, with three cards each with a different 22 01:48.780 --> 01:57.120 contact but effectively repeating the same element which were going to create using React. Pause the 23 01:57.120 --> 02:03.630 video now, fork sandbox or download it as a zip file to use your local editor and give this challenge 24 02:03.630 --> 02:09.470 a go now. 25 02:09.640 --> 02:10.070 All right. 26 02:10.070 --> 02:10.850 How did you get on. 27 02:11.000 --> 02:13.460 Let's walk through the solution together. 28 02:13.460 --> 02:20.810 The first step was to apply the CSF styles to the app dot Jess x component so it starts looking a bit 29 02:20.810 --> 02:25.630 more like this as you can see we've got a little way to go. 30 02:25.820 --> 02:32.810 And the first thing you'll notice is that the name of beyond say it looks very different even in terms 31 02:32.840 --> 02:35.640 of color and also location. 32 02:35.660 --> 02:37.240 So let's take a look inside. 33 02:37.260 --> 02:42.900 Ah see ISIS file to see if there's something that might help us with that. 34 02:42.950 --> 02:50.600 So you'll find a class called name which changes the font size and changes the color and gives it some 35 02:50.600 --> 02:53.020 margin away from other components. 36 02:53.060 --> 03:02.050 So let's try applying this to r abduct Jess and we're going to add it as a class name to this H2. 37 03:02.120 --> 03:03.560 So it was called name. 38 03:03.920 --> 03:08.900 So there we go it's now much bigger the different color and it's now no longer touching the edge of 39 03:08.900 --> 03:10.130 the card. 40 03:10.220 --> 03:13.450 The next thing we want to fix is probably this image right. 41 03:13.460 --> 03:14.510 This is circular. 42 03:14.540 --> 03:17.200 It's got a nice border around it. 43 03:17.360 --> 03:22.620 The component that will probably want to add that class to is our image component here. 44 03:22.820 --> 03:29.960 And the class name we want to add is going to be something related to an image. 45 03:30.080 --> 03:32.770 So it could either be this one or it could be this one. 46 03:32.900 --> 03:39.340 But notice how this one is actually just targeting all the child images that are associated with a card 47 03:39.350 --> 03:40.220 class. 48 03:40.280 --> 03:48.320 So this is actually already applied by default because we have our card div that contains an image element. 49 03:48.320 --> 03:53.580 And so it's already getting those margins applied which is why it's being positioned where it is. 50 03:53.750 --> 03:59.930 But this circle image however seems to change the porter radius making it round which is 50 percent 51 04:00.290 --> 04:06.560 adding a whiteboard etc. So that seems like the one that we should apply to this image element. 52 04:06.860 --> 04:10.590 So let's add a circle image, hit save and refresh. 53 04:11.060 --> 04:15.530 And now we've got this nice circular avatar image. 54 04:15.530 --> 04:22.310 The final thing we want to do is probably to update these two lines because as you can see over here 55 04:22.310 --> 04:28.100 they have a different color and they're positioned a little bit differently. Again 56 04:28.100 --> 04:31.000 let's go on our journey of discovery through our styles. 57 04:31.010 --> 04:32.030 css 58 04:32.060 --> 04:37.440 and we've got this class called info which changes the color and adds a little bit of margin. 59 04:37.520 --> 04:42.810 So that is probably what we want to add to these two paragraph elements. 60 04:42.830 --> 04:49.670 So I'm going to hold down OPTION and click on these two places and let's add the class name of info. 61 04:50.630 --> 04:57.440 And once that refreshes you'll see that our card component now looks exactly the same as the completed 62 04:57.440 --> 05:01.960 version. So that's step 1 out of the way. 63 05:01.970 --> 05:08.390 Now step 2 is to extract the contact card as a reusable card component. 64 05:08.390 --> 05:15.650 So this is what React is all about, extracting components and simplifying them into smaller and smaller 65 05:15.650 --> 05:23.660 blocks. Everything that's inside this div with a class name of card corresponds to the card that's being 66 05:23.660 --> 05:24.460 rendered. 67 05:24.500 --> 05:30.270 The only thing that's left is this parent div and the h1 which is our heading over here. 68 05:30.710 --> 05:37.670 So let's go ahead and extract this div and let's create a new file inside our components folder which 69 05:37.670 --> 05:47.030 I'll call card.jsx. Inside here we'll have to do all the usual things, create a new card component 70 05:47.180 --> 05:52.440 and return the thing that we copied over just now. 71 05:52.700 --> 06:00.320 And finally let's go ahead and export this as the default export and it was called card. 72 06:00.350 --> 06:09.920 So now let's hit save and go back into our App.js and import our card component from ./card. 73 06:10.960 --> 06:18.490 And now we can add it in here as a custom React component with the Pascal casing and a self closing 74 06:18.490 --> 06:19.570 tag. 75 06:19.570 --> 06:28.530 And we've now got Beyonce tag back in here just as before. Now we're on to step 3 which is to 76 06:28.530 --> 06:34.500 use what we learned about props in order to render the default Beyonce contact card. 77 06:34.680 --> 06:42.400 And this will allow us to make our card component reusable so it doesn't always create a Beyonce card. 78 06:42.480 --> 06:48.660 So I'm gonna go ahead and review this card component looking for the parts which are custom to each 79 06:48.660 --> 06:49.630 contact. 80 06:49.860 --> 06:58.860 For example, the name or the image source or the telephone number and email, and I'm going to create them 81 06:58.950 --> 07:02.430 as properties on my card component. 82 07:02.430 --> 07:09.360 So I have a name and it's going to be equal to what we have here which is Beyonce. So let's paste 83 07:09.360 --> 07:15.960 that in there. And then I'll probably have an image which is going to be the image source that I've got 84 07:15.960 --> 07:23.150 over here. And then we've got a telephone number which will just copy over. 85 07:26.520 --> 07:29.360 And finally we've got a email. 86 07:29.370 --> 07:34.710 And remember that even though it seems like we're creating a new object and it does function as if we're 87 07:34.710 --> 07:43.020 passing this object over to create this card component as the input, the syntax is more like the HTML 88 07:43.050 --> 07:50.800 attributes where you have the key, equals sign and then a value. So let's copy over that last piece of 89 07:50.800 --> 07:52.030 information 90 07:52.150 --> 08:00.340 and now we can delete all the parts of our card component which are custom to each contact. 91 08:00.370 --> 08:04.530 So this way this card component can be completely reusable. 92 08:04.720 --> 08:10.870 But in order for it to actually work instead of giving us lots of syntax errors, we'll need to get a 93 08:10.870 --> 08:18.100 hold of all of these inputs being sent over to our card component. And we of course do that through the 94 08:18.100 --> 08:20.030 input called props. 95 08:20.020 --> 08:24.970 Now remember that you can name this whatever it is you want and it will still work because it's just 96 08:24.970 --> 08:32.050 going to be assigned as if it was a variable to this object that it contains all of these properties. 97 08:32.230 --> 08:38.920 But by convention in all of the React apps you'll see that people use the word props. So the places 98 08:38.920 --> 08:44.710 where we want to use those props or properties is firstly the name of the contact, 99 08:44.740 --> 08:50.650 so that's going to be a props.name. And you can refer back to over here where you created the card 100 08:51.040 --> 08:53.380 and passed over all of these properties 101 08:53.470 --> 09:00.760 if you forget what each of these names are. And you of course have to enclose these inside a set of curly 102 09:00.760 --> 09:01.630 braces 103 09:01.630 --> 09:07.990 so it actually recognizes this as Javascript instead of you just trying to create an h2 that says props 104 09:07.990 --> 09:09.470 .name. 105 09:09.610 --> 09:12.310 So the next one is our image source. 106 09:12.430 --> 09:19.900 So this is going to be props.image and then we've got our first info paragraph and this is going 107 09:19.900 --> 09:28.480 to be props.tel and as well as props.email. 108 09:28.510 --> 09:36.250 Now we are entirely using our properties that are passed over, properties which can contain custom values 109 09:36.250 --> 09:43.330 for name, image, telephone and email and it just so happens that we are creating a Beyonce contact 110 09:43.330 --> 09:49.810 card from our App.js. That's step 3 out of the way. 111 09:50.030 --> 09:57.800 And the final step is to use this file contacts.js to create the card components instead of typing 112 09:57.800 --> 10:03.860 it out by hand. In order to save you time from finding image URLs and telephone and emails whichever 113 10:03.860 --> 10:06.520 you want and making up a telephone and email, 114 10:06.530 --> 10:10.090 we created this contacts.js file. 115 10:10.100 --> 10:13.440 Now let's first take a look at the structure of this. 116 10:13.490 --> 10:16.670 Notice how it's inside a set of square brackets. 117 10:16.730 --> 10:22.250 So this is an array and it's an array of Javascript objects. 118 10:22.250 --> 10:29.480 Each of these objects have a number of properties such as name, image URL, phone, email. And these correspond 119 10:29.480 --> 10:37.190 to all the things that we need to fill each contact card. If we want to use this contacts constant inside 120 10:37.190 --> 10:37.780 our App. 121 10:37.790 --> 10:43.800 .js, you might have remembered our previous lessons on importing and exporting. 122 10:43.880 --> 10:52.760 So let's go ahead and export our contacts constant as the default from this file and inside our App. 123 10:52.770 --> 11:01.700 .js we can go ahead and import that constant contacts and we can specify the location. 124 11:01.700 --> 11:12.260 So it was ../contacts. And now we actually have access to that contacts constant and you can 125 11:12.260 --> 11:14.150 even log it if you want to. 126 11:17.150 --> 11:25.080 And you'll see it printed in here as an array with three objects each with all of these properties. 127 11:25.160 --> 11:31.490 So now we can go ahead and use these contacts to create each of our cards. 128 11:31.500 --> 11:38.500 So the first one will be contacts at position 0 .name 129 11:38.670 --> 11:40.790 and of course this is Javascript code 130 11:40.890 --> 11:49.840 so it needs to go inside a set of curly braces. And we can do the same with the rest of our contacts. 131 11:52.530 --> 12:04.730 And then we can simply just copy these cards and change the index of the item that we want. 132 12:04.870 --> 12:11.020 And now if you take a look at our app you'll see that we've got all of our contacts added in each in 133 12:11.020 --> 12:13.210 their own individual litttle cards 134 12:13.210 --> 12:17.780 and we've got all of the details filled in for each of the cards. 135 12:17.830 --> 12:24.280 Now we've saved ourselves a lot of effort by creating these custom components using React. 136 12:24.280 --> 12:31.270 But it does get a little bit tedious adding in contacts[0].name, contacts[0].imgURL 137 12:31.540 --> 12:34.010 and then going on through that array. 138 12:34.210 --> 12:39.220 Don't worry we have lots of fancy ways of dealing with this and you'll be discovering that in the coming 139 12:39.220 --> 12:42.280 lessons where we learn about map, filter and reduce. 140 12:42.310 --> 12:48.370 But for now I want you to be really comfortable with this idea of props and passing them over when you 141 12:48.370 --> 12:54.850 create your custom components and then receiving them through the input called props and accessing each 142 12:54.850 --> 13:03.870 of those properties inside in order to render a completely customized version of your component. In the 143 13:03.870 --> 13:04.730 next lesson, 144 13:04.740 --> 13:09.990 we're going to be looking at some React development tools that will help you see the structure of your 145 13:09.990 --> 13:15.830 app a little bit better as well as being able to see the current values of each of these properties. 146 13:15.840 --> 13:18.780 So for all of that and more, I'll see you on the next lesson.