1 00:00:01,110 --> 00:00:03,870 ‫So, moving on now, it's time to learn about 2 00:00:03,870 --> 00:00:07,260 ‫yet another fundamental concept that we use 3 00:00:07,260 --> 00:00:09,780 ‫all the time in React development. 4 00:00:09,780 --> 00:00:12,147 ‫And that is, "The Children Prop." 5 00:00:13,680 --> 00:00:16,800 ‫So we have finished this project right here, 6 00:00:16,800 --> 00:00:21,450 ‫and so we can basically finish this with control C. 7 00:00:21,450 --> 00:00:24,060 ‫And so now if we reload, you immediately see 8 00:00:24,060 --> 00:00:27,840 ‫that the connection has been lost, or you could also 9 00:00:27,840 --> 00:00:31,083 ‫simply have closed this VS Code window right here. 10 00:00:32,970 --> 00:00:37,020 ‫Okay? And now what I want to do in this lecture 11 00:00:37,020 --> 00:00:41,130 ‫and the next one as I introduce you to the children prop, 12 00:00:41,130 --> 00:00:44,913 ‫is to use the steps component that we built before. 13 00:00:46,140 --> 00:00:48,270 ‫So let's go back to the steps folder 14 00:00:48,270 --> 00:00:50,733 ‫and open it up in VS Code. 15 00:00:52,380 --> 00:00:55,653 ‫And again, you can do that in any way that you wish. 16 00:00:56,970 --> 00:01:00,360 ‫Now, I will now actually duplicate this file. 17 00:01:00,360 --> 00:01:04,500 ‫So this App.js in which we are working, I will copy 18 00:01:04,500 --> 00:01:08,760 ‫and then paste so that we can keep the first version 19 00:01:08,760 --> 00:01:10,950 ‫of the code that we wrote. 20 00:01:10,950 --> 00:01:13,980 ‫So calling this one, app version one. 21 00:01:13,980 --> 00:01:17,643 ‫And so now we can continue the work here in this file. 22 00:01:19,890 --> 00:01:24,270 ‫All right, so let's here come to the terminal 23 00:01:24,270 --> 00:01:28,260 ‫and then write, NPM start, 24 00:01:28,260 --> 00:01:31,593 ‫so that our project opens up again here in the browser. 25 00:01:33,540 --> 00:01:37,680 ‫All right, yeah, remember how we had actually 26 00:01:37,680 --> 00:01:40,560 ‫included the steps component here twice. 27 00:01:40,560 --> 00:01:44,013 ‫So let's remove or comment out one of them. 28 00:01:45,240 --> 00:01:47,610 ‫And so yeah, it's gone. 29 00:01:47,610 --> 00:01:51,030 ‫And as always, it's important to keep the console open 30 00:01:51,030 --> 00:01:53,670 ‫and maybe also the components tree. 31 00:01:53,670 --> 00:01:56,820 ‫But for now, let's stay on the console. 32 00:01:56,820 --> 00:01:59,610 ‫Okay, so the idea of this lecture 33 00:01:59,610 --> 00:02:02,790 ‫is to create a reusable button that we can use 34 00:02:02,790 --> 00:02:05,250 ‫instead of these two ones here. 35 00:02:05,250 --> 00:02:09,243 ‫And I want to add an emoji to these buttons here as well. 36 00:02:10,620 --> 00:02:13,533 ‫So let's take a look at where they are. 37 00:02:15,150 --> 00:02:17,820 ‫Yeah, so these two buttons here, 38 00:02:17,820 --> 00:02:21,240 ‫again, I now want to create a reusable button 39 00:02:21,240 --> 00:02:23,163 ‫that we use instead of these two. 40 00:02:24,120 --> 00:02:25,830 ‫So let's do that. 41 00:02:25,830 --> 00:02:28,683 ‫And we start by using the knowledge that we already have. 42 00:02:29,820 --> 00:02:33,183 ‫So let's say, function button. 43 00:02:35,477 --> 00:02:36,540 ‫And then all this will do 44 00:02:36,540 --> 00:02:41,340 ‫is to return a button element. 45 00:02:41,340 --> 00:02:43,770 ‫Which would also have this style here 46 00:02:43,770 --> 00:02:45,813 ‫and an onClick event handler. 47 00:02:46,650 --> 00:02:49,953 ‫So let's just copy these two here. 48 00:02:51,150 --> 00:02:55,233 ‫And also let's place some text here for now. 49 00:02:56,070 --> 00:02:57,420 ‫And so now the idea is 50 00:02:57,420 --> 00:02:59,910 ‫that we can pass in the background color, 51 00:02:59,910 --> 00:03:04,910 ‫the color, this onClick handler here, and the text as props. 52 00:03:06,450 --> 00:03:09,630 ‫So basically we want to accept some props here 53 00:03:09,630 --> 00:03:11,580 ‫for the text color. 54 00:03:11,580 --> 00:03:14,220 ‫So let's actually call that, text color. 55 00:03:14,220 --> 00:03:17,943 ‫So text color, background color, 56 00:03:19,170 --> 00:03:23,880 ‫the onClick handler, and also the text. 57 00:03:23,880 --> 00:03:28,880 ‫And so then here, let's use that button actually. 58 00:03:29,040 --> 00:03:31,500 ‫So before we keep working on the button 59 00:03:31,500 --> 00:03:33,213 ‫let's include it here immediately. 60 00:03:34,800 --> 00:03:36,903 ‫Let's right away delete this one. 61 00:03:40,380 --> 00:03:42,330 ‫Until we use our component 62 00:03:42,330 --> 00:03:43,880 ‫that we are building right now. 63 00:03:45,000 --> 00:03:47,350 ‫So let's say text color 64 00:03:48,960 --> 00:03:50,943 ‫should be this one here. 65 00:03:54,750 --> 00:03:58,050 ‫Or actually that's the background color, of course. 66 00:03:58,050 --> 00:03:59,583 ‫So BG color. 67 00:04:01,530 --> 00:04:03,483 ‫Then the text color, 68 00:04:05,190 --> 00:04:08,040 ‫this one should be FFF for white. 69 00:04:08,040 --> 00:04:12,300 ‫And then also the onClick prop. 70 00:04:12,300 --> 00:04:17,300 ‫And here we want to specify the handle previous function. 71 00:04:19,560 --> 00:04:21,510 ‫All right, then we close. 72 00:04:21,510 --> 00:04:23,400 ‫And also the text. 73 00:04:23,400 --> 00:04:26,793 ‫So here, this one said, previous. 74 00:04:28,530 --> 00:04:32,460 ‫And so now let's come to our button down here 75 00:04:32,460 --> 00:04:34,500 ‫and let's use these values here instead 76 00:04:34,500 --> 00:04:36,600 ‫of the hard-coded values. 77 00:04:36,600 --> 00:04:39,270 ‫So here, background color should be 78 00:04:39,270 --> 00:04:41,553 ‫the BG prop that we received. 79 00:04:42,870 --> 00:04:45,750 ‫And this one should be the text color 80 00:04:45,750 --> 00:04:48,000 ‫that we receive as a prop. 81 00:04:48,000 --> 00:04:50,793 ‫Then here we want onClick. 82 00:04:51,780 --> 00:04:56,610 ‫And here instead of just this generic text, we want, 83 00:04:56,610 --> 00:04:59,013 ‫again the text that we receive as a prop. 84 00:04:59,880 --> 00:05:03,960 ‫So let's give it a save, maybe reload even. 85 00:05:03,960 --> 00:05:07,620 ‫And, you see, as we use this button 86 00:05:07,620 --> 00:05:11,013 ‫it still works and looks exactly the same as before. 87 00:05:12,480 --> 00:05:15,873 ‫So let's then do the same thing with this one here. 88 00:05:17,670 --> 00:05:21,840 ‫So that's just copy and pasting this one 89 00:05:21,840 --> 00:05:26,840 ‫and then changing the onClick handler to, handle next. 90 00:05:26,940 --> 00:05:29,283 ‫And here, next. 91 00:05:30,510 --> 00:05:32,160 ‫Let's delete this button. 92 00:05:32,160 --> 00:05:33,210 ‫And so now with this 93 00:05:33,210 --> 00:05:36,870 ‫we have exactly the same functionality as we had before, 94 00:05:36,870 --> 00:05:39,900 ‫but we extracted these buttons that we had here 95 00:05:39,900 --> 00:05:42,330 ‫into a reusable button component 96 00:05:42,330 --> 00:05:45,240 ‫which right now accepts the text color, the background, 97 00:05:45,240 --> 00:05:48,300 ‫the onClick handler, and the text. 98 00:05:48,300 --> 00:05:50,820 ‫So passing all this data here as props 99 00:05:50,820 --> 00:05:54,210 ‫into this component should be pretty clear at this point. 100 00:05:54,210 --> 00:05:57,210 ‫So hopefully you understood exactly how that works 101 00:05:57,210 --> 00:05:59,730 ‫in previous lectures. 102 00:05:59,730 --> 00:06:03,663 ‫But anyway, let's now say that we also want to add an emoji. 103 00:06:04,740 --> 00:06:06,300 ‫So that's easy enough. 104 00:06:06,300 --> 00:06:08,373 ‫We just accept that here as a prop. 105 00:06:09,750 --> 00:06:11,130 ‫So, emoji. 106 00:06:11,130 --> 00:06:14,760 ‫And then let's add that here before the text. 107 00:06:14,760 --> 00:06:18,893 ‫And let's actually create a span element for this emoji. 108 00:06:20,070 --> 00:06:21,630 ‫So we create a span, 109 00:06:21,630 --> 00:06:26,103 ‫and then in there we put our emoji and then the text. 110 00:06:28,500 --> 00:06:32,703 ‫Okay, and then let's actually pass that emoji in. 111 00:06:36,060 --> 00:06:38,700 ‫And then let's here, maybe search for finger, 112 00:06:38,700 --> 00:06:42,723 ‫because I want this one here, for previous, 113 00:06:43,740 --> 00:06:48,190 ‫and then one finger pointing in the opposite direction 114 00:06:49,650 --> 00:06:50,673 ‫for next. 115 00:06:51,840 --> 00:06:53,463 ‫So that's this one. 116 00:06:54,990 --> 00:06:59,670 ‫Okay, give it a save and yeah, that worked nice. 117 00:06:59,670 --> 00:07:01,950 ‫So we have our emojis and our text, 118 00:07:01,950 --> 00:07:06,390 ‫and it works exactly as we specified our button down here. 119 00:07:06,390 --> 00:07:10,290 ‫But now let's say that I wanted this emoji here to be 120 00:07:10,290 --> 00:07:14,400 ‫on this left side, but the other emoji on the right side, 121 00:07:14,400 --> 00:07:15,840 ‫so that it would say next 122 00:07:15,840 --> 00:07:18,660 ‫and then pointing right to the right side. 123 00:07:18,660 --> 00:07:21,000 ‫So with this we kind of have a problem 124 00:07:21,000 --> 00:07:23,820 ‫because we already have so many props. 125 00:07:23,820 --> 00:07:28,020 ‫And so do you think that we should add yet another prop 126 00:07:28,020 --> 00:07:30,300 ‫basically for this direction? 127 00:07:30,300 --> 00:07:31,890 ‫Well, maybe not. 128 00:07:31,890 --> 00:07:34,500 ‫Maybe it's getting a little bit too crazy here 129 00:07:34,500 --> 00:07:36,030 ‫with all these props. 130 00:07:36,030 --> 00:07:38,250 ‫And we could keep adding more and more 131 00:07:38,250 --> 00:07:40,830 ‫to customize this button even more. 132 00:07:40,830 --> 00:07:45,540 ‫But I think at this point we should not add, for example, 133 00:07:45,540 --> 00:07:49,050 ‫this one here, like for the direction, 134 00:07:49,050 --> 00:07:51,660 ‫or for the side of the emoji, 135 00:07:51,660 --> 00:07:55,620 ‫and instead make use of the children prop that I mentioned 136 00:07:55,620 --> 00:07:57,600 ‫at the beginning of the video. 137 00:07:57,600 --> 00:08:02,190 ‫So instead of passing in this side here, this emoji, 138 00:08:02,190 --> 00:08:05,280 ‫and the text, which are basically the content 139 00:08:05,280 --> 00:08:07,350 ‫here of this button element, 140 00:08:07,350 --> 00:08:10,200 ‫what if we could simply pass the content 141 00:08:10,200 --> 00:08:12,450 ‫right into the button as well? 142 00:08:12,450 --> 00:08:16,530 ‫Or in other words, what if we could pass simply some JSX 143 00:08:16,530 --> 00:08:20,700 ‫into the component and then the component could use that JSX 144 00:08:20,700 --> 00:08:22,980 ‫and simply display it? 145 00:08:22,980 --> 00:08:25,953 ‫Well, we can actually do that in React. 146 00:08:27,360 --> 00:08:31,530 ‫So let's come up here, and notice how up until this point 147 00:08:31,530 --> 00:08:35,250 ‫all our components have always been self-closing. 148 00:08:35,250 --> 00:08:38,130 ‫So we never had, like this, 149 00:08:38,130 --> 00:08:42,630 ‫and then any content, and then closed the element. 150 00:08:42,630 --> 00:08:45,540 ‫So we never had this before, but in fact, 151 00:08:45,540 --> 00:08:47,910 ‫we can do exactly this. 152 00:08:47,910 --> 00:08:50,790 ‫So just like we do with HTML elements 153 00:08:50,790 --> 00:08:52,830 ‫where we have an opening tag, 154 00:08:52,830 --> 00:08:55,500 ‫then some content, and then a closing tag, 155 00:08:55,500 --> 00:08:58,833 ‫we can do exactly the same with React components. 156 00:09:00,450 --> 00:09:03,510 ‫So here, of course, I don't want that gibberish, 157 00:09:03,510 --> 00:09:05,283 ‫let's just put it back for now. 158 00:09:06,210 --> 00:09:09,480 ‫But basically what we want is to now here 159 00:09:09,480 --> 00:09:12,753 ‫write that span with the emoji. 160 00:09:13,740 --> 00:09:18,123 ‫So this one, and then, previous. 161 00:09:18,990 --> 00:09:21,000 ‫So this is exactly what we want 162 00:09:21,000 --> 00:09:22,950 ‫as the content of this button. 163 00:09:22,950 --> 00:09:26,910 ‫And if we were writing the button as a simple HTML button 164 00:09:26,910 --> 00:09:29,010 ‫this is what we would write. 165 00:09:29,010 --> 00:09:32,880 ‫So that's actually exactly what we did right down here 166 00:09:32,880 --> 00:09:34,500 ‫inside this button. 167 00:09:34,500 --> 00:09:35,340 ‫And so again, 168 00:09:35,340 --> 00:09:38,973 ‫we can do exactly the same thing with our React components. 169 00:09:40,170 --> 00:09:43,713 ‫So then we no longer need this, and this, 170 00:09:44,790 --> 00:09:47,403 ‫and let's then do the same thing here. 171 00:09:48,360 --> 00:09:50,640 ‫And so now comes that part 172 00:09:50,640 --> 00:09:53,640 ‫where we can very easily change the direction 173 00:09:53,640 --> 00:09:58,500 ‫or the side of the emoji, because we can simply write, next. 174 00:09:58,500 --> 00:10:02,523 ‫And then we put our emoji in the JSX on the right side. 175 00:10:04,650 --> 00:10:06,513 ‫So easy, right? 176 00:10:10,290 --> 00:10:13,263 ‫Well, I forgot to close our button here. 177 00:10:16,260 --> 00:10:19,230 ‫Okay. And now of course you don't see 178 00:10:19,230 --> 00:10:21,090 ‫any content here anymore, 179 00:10:21,090 --> 00:10:25,020 ‫because we no longer are passing in the text and the emoji. 180 00:10:25,020 --> 00:10:27,180 ‫And so now it's time to fix this. 181 00:10:27,180 --> 00:10:30,780 ‫So basically now it is time to give the button element 182 00:10:30,780 --> 00:10:33,600 ‫access to whatever content we wrote 183 00:10:33,600 --> 00:10:36,750 ‫into the opening tag and the closing tag. 184 00:10:36,750 --> 00:10:38,280 ‫And so that's where, finally, 185 00:10:38,280 --> 00:10:41,160 ‫the children prop comes into play. 186 00:10:41,160 --> 00:10:45,270 ‫So, the children prop is a prop that each React component 187 00:10:45,270 --> 00:10:46,980 ‫automatically receives. 188 00:10:46,980 --> 00:10:49,950 ‫And the value of the children prop is exactly 189 00:10:49,950 --> 00:10:51,750 ‫what is between the opening 190 00:10:51,750 --> 00:10:54,453 ‫and the closing tag of the component. 191 00:10:56,280 --> 00:10:58,890 ‫So let's remove all of this, 192 00:10:58,890 --> 00:11:01,443 ‫and then we simply need to write, children. 193 00:11:02,880 --> 00:11:07,350 ‫And so this really is a predefined keyword inside React. 194 00:11:07,350 --> 00:11:12,060 ‫And so as a final step, we can remove all of this 195 00:11:12,060 --> 00:11:15,510 ‫and simply use the children here. 196 00:11:15,510 --> 00:11:16,800 ‫Give it a save. 197 00:11:16,800 --> 00:11:18,750 ‫And there we go. 198 00:11:18,750 --> 00:11:20,220 ‫Beautiful. 199 00:11:20,220 --> 00:11:23,130 ‫So we have exactly what we set out to build. 200 00:11:23,130 --> 00:11:25,320 ‫We have the emoji here on the left side, 201 00:11:25,320 --> 00:11:27,180 ‫and here on the right side. 202 00:11:27,180 --> 00:11:30,660 ‫And of course we could do anything here. 203 00:11:30,660 --> 00:11:33,903 ‫So we could have even more emojis, even more elements. 204 00:11:37,350 --> 00:11:39,750 ‫And yeah, we could do really whatever we wanted. 205 00:11:41,130 --> 00:11:43,650 ‫Because, this content here of this element 206 00:11:43,650 --> 00:11:47,700 ‫would simply be passed as the children prop into the button. 207 00:11:47,700 --> 00:11:50,400 ‫And then here we use that children prop 208 00:11:50,400 --> 00:11:52,320 ‫and display all that content right here 209 00:11:52,320 --> 00:11:54,810 ‫inside this HTML button. 210 00:11:54,810 --> 00:11:57,540 ‫And with this, we just gained a brand new 211 00:11:57,540 --> 00:12:00,030 ‫and really, really important tool 212 00:12:00,030 --> 00:12:02,910 ‫that is used all the time in React. 213 00:12:02,910 --> 00:12:06,990 ‫It's actually one of its most useful features, I would say. 214 00:12:06,990 --> 00:12:08,280 ‫And the reason for that 215 00:12:08,280 --> 00:12:13,050 ‫is that it allows us to make our components truly reusable. 216 00:12:13,050 --> 00:12:16,590 ‫So with this children prop, I am now able to pass 217 00:12:16,590 --> 00:12:20,520 ‫whatever content I want into this button element. 218 00:12:20,520 --> 00:12:23,280 ‫And the button component doesn't even need to know 219 00:12:23,280 --> 00:12:25,920 ‫what content this is going to be. 220 00:12:25,920 --> 00:12:28,410 ‫All it does is to take the children, 221 00:12:28,410 --> 00:12:32,760 ‫so all the content and all the JSX that we just passed in, 222 00:12:32,760 --> 00:12:36,840 ‫and will simply then render it inside this button component. 223 00:12:36,840 --> 00:12:40,530 ‫And so because of that, we can think of the children prop 224 00:12:40,530 --> 00:12:45,530 ‫as a hole that can be filled by us passing in the content 225 00:12:45,720 --> 00:12:47,310 ‫into that component. 226 00:12:47,310 --> 00:12:50,880 ‫And if for some reason this seems strange, and don't worry, 227 00:12:50,880 --> 00:12:54,030 ‫we will use this children prop all the time, 228 00:12:54,030 --> 00:12:56,520 ‫all the way until the end of the course. 229 00:12:56,520 --> 00:12:57,690 ‫And now just to finish, 230 00:12:57,690 --> 00:13:00,423 ‫let's quickly recap what we just did here. 231 00:13:01,920 --> 00:13:05,730 ‫So, by using the children prop in the button component, 232 00:13:05,730 --> 00:13:08,400 ‫we basically left an empty hole 233 00:13:08,400 --> 00:13:11,310 ‫right in the component that we could then fill 234 00:13:11,310 --> 00:13:16,310 ‫with any JSX markup that the component receives as children. 235 00:13:17,010 --> 00:13:21,900 ‫But then the question is, how do we pass in these children? 236 00:13:21,900 --> 00:13:26,250 ‫Well, when we include the button component in some JSX, 237 00:13:26,250 --> 00:13:29,310 ‫instead of immediately closing the element, 238 00:13:29,310 --> 00:13:33,570 ‫we can write some more JSX into that element. 239 00:13:33,570 --> 00:13:36,690 ‫So just like we can write any HTML markup 240 00:13:36,690 --> 00:13:40,110 ‫inside other HTML elements, right? 241 00:13:40,110 --> 00:13:41,880 ‫So just like an HTML, 242 00:13:41,880 --> 00:13:45,120 ‫we can write anything that we want between the opening 243 00:13:45,120 --> 00:13:49,590 ‫and the closing tag of the component that we are using. 244 00:13:49,590 --> 00:13:54,300 ‫So, in this example, this piece of JSX creates the elements 245 00:13:54,300 --> 00:13:58,080 ‫that are then the children of the button component, 246 00:13:58,080 --> 00:14:01,290 ‫and they will then be accessible inside that button 247 00:14:01,290 --> 00:14:03,300 ‫as props.children. 248 00:14:03,300 --> 00:14:06,153 ‫So that's why we say it is the children prop. 249 00:14:07,110 --> 00:14:11,100 ‫So, basically, by defining child elements like this, 250 00:14:11,100 --> 00:14:13,500 ‫we are passing them into the button 251 00:14:13,500 --> 00:14:16,500 ‫just like we can pass in any other prop. 252 00:14:16,500 --> 00:14:18,060 ‫The difference is in the way 253 00:14:18,060 --> 00:14:20,220 ‫in which we specify other props. 254 00:14:20,220 --> 00:14:23,640 ‫So, the more regular props, and this one. 255 00:14:23,640 --> 00:14:25,260 ‫So by passing in content 256 00:14:25,260 --> 00:14:28,710 ‫between the opening and the closing tag of an element 257 00:14:28,710 --> 00:14:31,380 ‫we basically fill the hole that we left 258 00:14:31,380 --> 00:14:34,560 ‫in the component by using props.children 259 00:14:34,560 --> 00:14:39,540 ‫in the JSX of that button, so of that button component. 260 00:14:39,540 --> 00:14:41,400 ‫So, if we think about this, 261 00:14:41,400 --> 00:14:44,850 ‫the children prop is really an ideal way 262 00:14:44,850 --> 00:14:48,450 ‫of making reusable and configurable components. 263 00:14:48,450 --> 00:14:53,010 ‫Especially when it comes to the content of the component. 264 00:14:53,010 --> 00:14:55,830 ‫So for example, let's say that we wanted to create 265 00:14:55,830 --> 00:14:57,960 ‫a second, similar button, 266 00:14:57,960 --> 00:15:01,260 ‫but with some other emojis and text. 267 00:15:01,260 --> 00:15:04,200 ‫Well, now that we know about the children prop, 268 00:15:04,200 --> 00:15:05,850 ‫that is really easy. 269 00:15:05,850 --> 00:15:09,420 ‫All we have to do is to pass in some different JSX 270 00:15:09,420 --> 00:15:13,140 ‫and then the button gets completely different content. 271 00:15:13,140 --> 00:15:16,350 ‫And this technique is really, really useful 272 00:15:16,350 --> 00:15:20,130 ‫for building generic components that do not know 273 00:15:20,130 --> 00:15:23,640 ‫about their content before actually being used. 274 00:15:23,640 --> 00:15:27,570 ‫Like, for example, a model window, a generic slider, 275 00:15:27,570 --> 00:15:31,593 ‫or simply a generic button like the one that we just built. 276 00:15:32,550 --> 00:15:37,110 ‫So, again, this button component had absolutely no idea 277 00:15:37,110 --> 00:15:39,720 ‫about the content that it was receiving, 278 00:15:39,720 --> 00:15:43,710 ‫and therefore about the content that it was displaying. 279 00:15:43,710 --> 00:15:45,450 ‫And so this is really amazing 280 00:15:45,450 --> 00:15:49,230 ‫to create generic and reusable components. 281 00:15:49,230 --> 00:15:51,930 ‫So using the children prop like this 282 00:15:51,930 --> 00:15:54,840 ‫is really an extremely powerful technique 283 00:15:54,840 --> 00:15:57,840 ‫that you will need to master as you learn React. 284 00:15:57,840 --> 00:16:00,390 ‫But we will use this over and over again. 285 00:16:00,390 --> 00:16:03,390 ‫And so there will be plenty of time to practice, 286 00:16:03,390 --> 00:16:06,873 ‫and actually starting right in the next video.