1 00:00:01,110 --> 00:00:02,430 ‫Let's now take a break 2 00:00:02,430 --> 00:00:06,780 ‫from building our project and build a small reusable, 3 00:00:06,780 --> 00:00:09,993 ‫and flexible, star rating component. 4 00:00:11,580 --> 00:00:15,720 ‫So what we want to build is a component like this one. 5 00:00:15,720 --> 00:00:18,090 ‫So it displays multiple stars 6 00:00:18,090 --> 00:00:19,950 ‫and then as we hover over them 7 00:00:19,950 --> 00:00:22,740 ‫it displays the currently selected rating 8 00:00:22,740 --> 00:00:24,600 ‫here, on the right side. 9 00:00:24,600 --> 00:00:27,960 ‫So as you see, as we hover over the stars, 10 00:00:27,960 --> 00:00:31,590 ‫it always shows the currently selected number of stars. 11 00:00:31,590 --> 00:00:35,670 ‫And if we click here, then that number stays fixed. 12 00:00:35,670 --> 00:00:37,380 ‫And if we then click again, 13 00:00:37,380 --> 00:00:40,080 ‫because this movie is definitely a 10, 14 00:00:40,080 --> 00:00:42,963 ‫then of course we can also change that rating. 15 00:00:43,920 --> 00:00:47,400 ‫Now, okay, now we will develop this component here 16 00:00:47,400 --> 00:00:49,380 ‫in complete isolation. 17 00:00:49,380 --> 00:00:52,110 ‫So outside of this current application, 18 00:00:52,110 --> 00:00:55,170 ‫so that we could reuse it anywhere we wanted, 19 00:00:55,170 --> 00:00:57,210 ‫and also make it really flexible 20 00:00:57,210 --> 00:00:59,670 ‫by allowing for different props. 21 00:00:59,670 --> 00:01:00,570 ‫For example, 22 00:01:00,570 --> 00:01:05,040 ‫here we can rate between zero and 10 right now, 23 00:01:05,040 --> 00:01:08,430 ‫but we will make it so that the user of the component 24 00:01:08,430 --> 00:01:12,240 ‫can choose what number of stars they want to display. 25 00:01:12,240 --> 00:01:14,740 ‫And that's just one of the things that we will do. 26 00:01:15,960 --> 00:01:18,910 ‫But anyway, let's now come here to our project 27 00:01:19,890 --> 00:01:23,373 ‫and then let's create a brand new component file here. 28 00:01:25,230 --> 00:01:30,230 ‫So, star rating and then export default function 29 00:01:35,400 --> 00:01:37,323 ‫and then the name of the component. 30 00:01:38,460 --> 00:01:43,460 ‫So star rating, and for now, we won't accept any props here. 31 00:01:44,040 --> 00:01:45,490 ‫We will leave that for later. 32 00:01:46,530 --> 00:01:51,273 ‫And now let's just return something here. 33 00:01:52,140 --> 00:01:53,670 ‫And now what I want to do, 34 00:01:53,670 --> 00:01:57,120 ‫is to actually come to the index, the js file, 35 00:01:57,120 --> 00:02:00,840 ‫and then no longer import the app here, for now, 36 00:02:00,840 --> 00:02:03,690 ‫and also not the CSS file, 37 00:02:03,690 --> 00:02:07,590 ‫because, again, this component should be completely reusable 38 00:02:07,590 --> 00:02:11,373 ‫and so it shouldn't depend on any external CSS files. 39 00:02:12,780 --> 00:02:15,360 ‫So instead, what I want to do now 40 00:02:15,360 --> 00:02:17,980 ‫is to import that star rating 41 00:02:19,440 --> 00:02:20,970 ‫and you see that VS code 42 00:02:20,970 --> 00:02:24,240 ‫automatically wrote our import statement here. 43 00:02:24,240 --> 00:02:27,120 ‫And if for some reason your VS code didn't help you 44 00:02:27,120 --> 00:02:28,530 ‫with this auto complete 45 00:02:28,530 --> 00:02:30,963 ‫then just make sure to type exactly this. 46 00:02:32,220 --> 00:02:33,053 ‫Then finally, 47 00:02:33,053 --> 00:02:36,330 ‫we also need to remove this one here, temporarily, 48 00:02:36,330 --> 00:02:39,903 ‫and, instead, include our star rating here. 49 00:02:41,430 --> 00:02:43,020 ‫And I'm doing it like this 50 00:02:43,020 --> 00:02:46,830 ‫just so that we don't have to create a brand new project 51 00:02:46,830 --> 00:02:49,230 ‫just for building this one component. 52 00:02:49,230 --> 00:02:51,423 ‫So for now we will just use this project 53 00:02:51,423 --> 00:02:52,860 ‫that we already have 54 00:02:52,860 --> 00:02:55,623 ‫instead of creating a new Create-React-App. 55 00:02:56,700 --> 00:02:58,980 ‫But anyway, let's give it a save now. 56 00:02:58,980 --> 00:03:03,210 ‫And now here you see that, hello, that's coming from here. 57 00:03:03,210 --> 00:03:05,100 ‫So from the star rating. 58 00:03:05,100 --> 00:03:08,010 ‫So let's close the app, and the sidebar, 59 00:03:08,010 --> 00:03:09,573 ‫and then let's get started. 60 00:03:10,440 --> 00:03:13,620 ‫So starting with the JSX here. 61 00:03:13,620 --> 00:03:15,480 ‫So just with the structure, 62 00:03:15,480 --> 00:03:18,510 ‫we see that we have basically two main elements. 63 00:03:18,510 --> 00:03:20,970 ‫So we have one container for all these stars 64 00:03:20,970 --> 00:03:23,730 ‫and we have then, like this message here, 65 00:03:23,730 --> 00:03:26,313 ‫so the current rating on the right side. 66 00:03:27,780 --> 00:03:29,430 ‫So inside our diff, 67 00:03:29,430 --> 00:03:33,150 ‫let's place another diff for those stars, 68 00:03:33,150 --> 00:03:36,843 ‫and then one paragraph for that message. 69 00:03:38,040 --> 00:03:40,830 ‫So for now, let me just place a number here and here. 70 00:03:40,830 --> 00:03:41,880 ‫For the stars, 71 00:03:41,880 --> 00:03:45,510 ‫we want to dynamically generate these star elements. 72 00:03:45,510 --> 00:03:48,570 ‫So instead of writing them by hand, one by one 73 00:03:48,570 --> 00:03:50,040 ‫because that's the only way 74 00:03:50,040 --> 00:03:52,950 ‫in which we could sometimes have five stars 75 00:03:52,950 --> 00:03:57,660 ‫in other situations, 10 stars or really any other number. 76 00:03:57,660 --> 00:04:00,510 ‫So let's use the technique that we used before 77 00:04:00,510 --> 00:04:02,700 ‫in the faraway app. 78 00:04:02,700 --> 00:04:04,470 ‫So entering JavaScript mode 79 00:04:04,470 --> 00:04:08,970 ‫and then we can write, array.from. 80 00:04:08,970 --> 00:04:11,370 ‫And here we can then specify an object 81 00:04:11,370 --> 00:04:13,500 ‫with the length property 82 00:04:13,500 --> 00:04:17,100 ‫and let's set it here to five, initially. 83 00:04:17,100 --> 00:04:19,230 ‫And so this then creates an empty array 84 00:04:19,230 --> 00:04:20,700 ‫with five elements 85 00:04:20,700 --> 00:04:23,190 ‫that we can then immediately loop over 86 00:04:23,190 --> 00:04:24,990 ‫by passing in a function. 87 00:04:24,990 --> 00:04:28,443 ‫So like a map function, here as the second argument. 88 00:04:29,550 --> 00:04:30,660 ‫So in this function 89 00:04:30,660 --> 00:04:34,470 ‫we are not interested in the elements themselves. 90 00:04:34,470 --> 00:04:36,600 ‫Let's just use a placeholder variable. 91 00:04:36,600 --> 00:04:39,513 ‫But we are interested here in the number. 92 00:04:42,840 --> 00:04:43,673 ‫All right, 93 00:04:43,673 --> 00:04:46,200 ‫and now here we can just render anything. 94 00:04:46,200 --> 00:04:48,660 ‫Let's just do a span element for now, 95 00:04:48,660 --> 00:04:51,570 ‫but later we will place the stars in here. 96 00:04:51,570 --> 00:04:54,540 ‫So let's just write S for star. 97 00:04:54,540 --> 00:04:56,463 ‫And then here the number, 98 00:04:57,450 --> 00:05:00,060 ‫and actually this should be S plus one 99 00:05:00,060 --> 00:05:03,483 ‫because I, of course, is zero based here. 100 00:05:04,860 --> 00:05:07,773 ‫Okay, and this should already be something. 101 00:05:08,670 --> 00:05:12,900 ‫And indeed we see star 1, 2, 3, 4, and 5. 102 00:05:12,900 --> 00:05:16,980 ‫Which of course, again, are just placeholders for now. 103 00:05:16,980 --> 00:05:19,830 ‫Here we have some error, which probably, yeah, 104 00:05:19,830 --> 00:05:22,140 ‫it's because of that key prop. 105 00:05:22,140 --> 00:05:24,240 ‫So let's add that key here. 106 00:05:24,240 --> 00:05:25,410 ‫Well, actually we don't 107 00:05:25,410 --> 00:05:28,083 ‫because this is just temporary anyway. 108 00:05:29,010 --> 00:05:32,610 ‫Now, okay, so now let's define some styles here. 109 00:05:32,610 --> 00:05:34,590 ‫And remember how I said initially 110 00:05:34,590 --> 00:05:38,520 ‫that we cannot depend on any external CSS file 111 00:05:38,520 --> 00:05:40,260 ‫or CSS classes 112 00:05:40,260 --> 00:05:44,250 ‫and, therefore, we need to define all our styles in line. 113 00:05:44,250 --> 00:05:48,903 ‫So, let's do that starting here with the parent element. 114 00:05:51,300 --> 00:05:54,300 ‫And so here we now need to specify an object, 115 00:05:54,300 --> 00:05:57,510 ‫and why not actually do that here 116 00:05:57,510 --> 00:05:59,763 ‫as a separate object outside. 117 00:06:00,840 --> 00:06:04,203 ‫So let's write containerStyle. 118 00:06:07,723 --> 00:06:11,027 ‫Then let's set the display property to flex. 119 00:06:13,050 --> 00:06:18,050 ‫So to place the two elements side by side, then align items. 120 00:06:22,110 --> 00:06:24,840 ‫Let's set that one to center, 121 00:06:24,840 --> 00:06:27,123 ‫which will align the items vertically. 122 00:06:28,410 --> 00:06:32,103 ‫And then let's also specify a gap of 16 pixels. 123 00:06:35,370 --> 00:06:39,123 ‫Okay, and now here we can just specify that, 124 00:06:40,200 --> 00:06:41,430 ‫give it a save, 125 00:06:41,430 --> 00:06:44,460 ‫and that looks already a bit better. 126 00:06:44,460 --> 00:06:46,920 ‫And now we can do even better 127 00:06:46,920 --> 00:06:49,500 ‫which is to take this entire object 128 00:06:49,500 --> 00:06:51,210 ‫which will never change. 129 00:06:51,210 --> 00:06:53,430 ‫And it doesn't depend on anything 130 00:06:53,430 --> 00:06:55,530 ‫that is here in the component. 131 00:06:55,530 --> 00:06:59,820 ‫And we can place it completely outside of the component. 132 00:06:59,820 --> 00:07:01,110 ‫And by doing so, 133 00:07:01,110 --> 00:07:04,350 ‫this object here will not have to be regenerated 134 00:07:04,350 --> 00:07:08,520 ‫by JavaScript each time that this component here rerenders 135 00:07:08,520 --> 00:07:12,810 ‫because, otherwise, each time that a component does rerender 136 00:07:12,810 --> 00:07:14,820 ‫dysfunction will get called again. 137 00:07:14,820 --> 00:07:18,750 ‫And so then this object would also get regenerated again. 138 00:07:18,750 --> 00:07:20,700 ‫And so that's not necessary. 139 00:07:20,700 --> 00:07:23,073 ‫And so we can just place it outside here. 140 00:07:26,040 --> 00:07:28,980 ‫Now, next, let's also create some styles 141 00:07:28,980 --> 00:07:32,010 ‫for the other container. 142 00:07:32,010 --> 00:07:34,263 ‫So this container here with the stars. 143 00:07:35,400 --> 00:07:37,000 ‫So let's say starContainerStyle. 144 00:07:44,576 --> 00:07:46,993 ‫So let's also do display flex 145 00:07:49,350 --> 00:07:54,350 ‫and then give it a gap here of just four pixels for now. 146 00:07:56,490 --> 00:07:57,453 ‫All right. 147 00:08:04,290 --> 00:08:08,643 ‫And finally, just some styling here for the text. 148 00:08:10,980 --> 00:08:13,940 ‫So text style, let's say lineHeight. 149 00:08:17,130 --> 00:08:21,303 ‫Yeah, I was trying to write some actual CSS, 150 00:08:22,680 --> 00:08:26,940 ‫but in JSX, remember we need to write our property names 151 00:08:26,940 --> 00:08:28,620 ‫camel cased. 152 00:08:28,620 --> 00:08:32,013 ‫So not a line-height, but lineHeight like this. 153 00:08:33,330 --> 00:08:37,770 ‫Let's also specify a margin of zero. 154 00:08:37,770 --> 00:08:39,420 ‫And here, let's actually say one. 155 00:08:40,320 --> 00:08:43,110 ‫So this probably won't change a lot yet, 156 00:08:43,110 --> 00:08:45,153 ‫but it's going to be important later. 157 00:08:46,140 --> 00:08:47,223 ‫So style, 158 00:08:50,340 --> 00:08:52,170 ‫okay, and now to finish, 159 00:08:52,170 --> 00:08:55,230 ‫let's do what I said right in the very beginning, 160 00:08:55,230 --> 00:08:59,310 ‫which is to basically allow the user of this component 161 00:08:59,310 --> 00:09:02,160 ‫to set the maximum amount of stars. 162 00:09:02,160 --> 00:09:04,650 ‫So the maximum rating. 163 00:09:04,650 --> 00:09:06,870 ‫So coming back here, let's say, 164 00:09:06,870 --> 00:09:09,510 ‫that as the user of this component 165 00:09:09,510 --> 00:09:14,510 ‫I wanted to pass in the max rating, for example, as five. 166 00:09:15,750 --> 00:09:18,360 ‫Now, then maybe I wanted to use this component 167 00:09:18,360 --> 00:09:21,060 ‫at some other place in my application, 168 00:09:21,060 --> 00:09:23,460 ‫but here I wanted 10 stars. 169 00:09:23,460 --> 00:09:25,620 ‫But now as we reload, of course, 170 00:09:25,620 --> 00:09:29,250 ‫both of these components will only have five stars. 171 00:09:29,250 --> 00:09:32,793 ‫Cause we hard coded that value here in our rating. 172 00:09:33,870 --> 00:09:35,190 ‫So what we need to do 173 00:09:35,190 --> 00:09:37,713 ‫is to now accept that prop here, 174 00:09:39,720 --> 00:09:42,993 ‫max rating, and then use that right here. 175 00:09:44,940 --> 00:09:48,360 ‫And so this is why we had to use this trick here 176 00:09:48,360 --> 00:09:53,040 ‫instead of manually writing the number of stars. 177 00:09:53,040 --> 00:09:56,400 ‫So instead of writing one element here per star, 178 00:09:56,400 --> 00:09:58,080 ‫and so if I save this now, 179 00:09:58,080 --> 00:10:02,087 ‫you see that indeed we get now 10 stars here, great. 180 00:10:04,560 --> 00:10:07,860 ‫But now what if someone used this component 181 00:10:07,860 --> 00:10:11,340 ‫without specifying the max rating property? 182 00:10:11,340 --> 00:10:14,340 ‫So since we're building a highly reusable component, 183 00:10:14,340 --> 00:10:17,520 ‫we need to account for all these situations 184 00:10:17,520 --> 00:10:18,960 ‫because we will never know 185 00:10:18,960 --> 00:10:21,630 ‫who is actually going to use this component 186 00:10:21,630 --> 00:10:24,180 ‫and what props they will specify. 187 00:10:24,180 --> 00:10:26,943 ‫So we need to account that this might happen. 188 00:10:27,870 --> 00:10:30,390 ‫So in this case, we have a problem 189 00:10:30,390 --> 00:10:33,813 ‫because then, well we have exactly no stars. 190 00:10:34,890 --> 00:10:38,880 ‫So what we need to do is to set a default value 191 00:10:38,880 --> 00:10:39,903 ‫for the rating. 192 00:10:41,250 --> 00:10:42,870 ‫So how do we do that? 193 00:10:42,870 --> 00:10:46,530 ‫Well, we can actually leverage the power of destructuring 194 00:10:46,530 --> 00:10:50,520 ‫in JavaScript because whenever we destructure an object, 195 00:10:50,520 --> 00:10:54,333 ‫we can actually set a default value as we do so. 196 00:10:55,789 --> 00:10:58,410 ‫So here we are actually destructuring the props object. 197 00:10:58,410 --> 00:11:01,350 ‫And so if max rating doesn't exist, 198 00:11:01,350 --> 00:11:04,980 ‫we can set a default simply by writing this. 199 00:11:04,980 --> 00:11:06,930 ‫And so if we save this now, 200 00:11:06,930 --> 00:11:11,190 ‫then we are back to having our five stars by default. 201 00:11:11,190 --> 00:11:14,970 ‫And so this is a very common way of setting default props 202 00:11:14,970 --> 00:11:16,740 ‫in React applications. 203 00:11:16,740 --> 00:11:19,623 ‫We will do this all the time as we go through the course.