1 00:00:01,110 --> 00:00:02,340 ‫So, in this section, 2 00:00:02,340 --> 00:00:05,640 ‫we will start to learn about events and state 3 00:00:05,640 --> 00:00:08,130 ‫by building a very simple components 4 00:00:08,130 --> 00:00:11,370 ‫where we can navigate through a few steps. 5 00:00:11,370 --> 00:00:13,410 ‫And so let's now, in this lecture, 6 00:00:13,410 --> 00:00:17,433 ‫start by building out the static part of that component. 7 00:00:18,750 --> 00:00:20,970 ‫Now, in order to build that component, 8 00:00:20,970 --> 00:00:23,670 ‫we will actually create a brand new project 9 00:00:23,670 --> 00:00:26,100 ‫using Create-React-App. 10 00:00:26,100 --> 00:00:27,600 ‫So if you're on Windows, 11 00:00:27,600 --> 00:00:30,390 ‫go ahead and open up your command prompt. 12 00:00:30,390 --> 00:00:34,950 ‫And if you're on a Mac, then just open your terminal. 13 00:00:34,950 --> 00:00:36,990 ‫And remember that in the terminal, 14 00:00:36,990 --> 00:00:39,180 ‫you're always in a folder. 15 00:00:39,180 --> 00:00:41,550 ‫So you can see what folder that is here 16 00:00:41,550 --> 00:00:43,140 ‫in your command prompt. 17 00:00:43,140 --> 00:00:45,810 ‫And then from there, just navigate to the folder 18 00:00:45,810 --> 00:00:48,780 ‫where you want to create your new projects. 19 00:00:48,780 --> 00:00:52,410 ‫And for me, that is, again, the desktop. 20 00:00:52,410 --> 00:00:55,050 ‫So remember that you can see all the folders 21 00:00:55,050 --> 00:00:57,480 ‫that you can navigate to from here. 22 00:00:57,480 --> 00:01:00,450 ‫So I am here in this home folder, basically. 23 00:01:00,450 --> 00:01:03,930 ‫And so I can navigate to any one of these. 24 00:01:03,930 --> 00:01:06,333 ‫And so that's what I'm going to do with cd. 25 00:01:07,620 --> 00:01:09,510 ‫And just by the way, again, on Windows 26 00:01:09,510 --> 00:01:12,480 ‫that's dir instead of ls. 27 00:01:12,480 --> 00:01:15,330 ‫But anyway, I will now navigate to the desktop. 28 00:01:15,330 --> 00:01:19,380 ‫And so now here, let's create our new project. 29 00:01:19,380 --> 00:01:24,380 ‫So that's npx Create-React-App and now here, 30 00:01:26,580 --> 00:01:30,810 ‫remember to lock in the version number five 31 00:01:30,810 --> 00:01:33,630 ‫just so we are all building the same thing here. 32 00:01:33,630 --> 00:01:35,880 ‫So using the same versions. 33 00:01:35,880 --> 00:01:39,963 ‫And then I will simply name this project here, steps. 34 00:01:41,070 --> 00:01:42,360 ‫So then hit enter 35 00:01:42,360 --> 00:01:45,570 ‫and then Create-React-App is doing its thing. 36 00:01:45,570 --> 00:01:48,660 ‫And in the meantime, let's actually check out the component 37 00:01:48,660 --> 00:01:50,103 ‫that we are going to build. 38 00:01:51,480 --> 00:01:54,090 ‫So that's this one right here. 39 00:01:54,090 --> 00:01:56,520 ‫So it's basically this component where we have 40 00:01:56,520 --> 00:01:58,050 ‫these three steps. 41 00:01:58,050 --> 00:02:01,380 ‫And as I said in the beginning, we can basically navigate 42 00:02:01,380 --> 00:02:04,470 ‫through them by clicking here on these buttons. 43 00:02:04,470 --> 00:02:07,293 ‫So when we click next, we go to step number two. 44 00:02:08,160 --> 00:02:10,680 ‫And so then we get apply to jobs. 45 00:02:10,680 --> 00:02:14,250 ‫So first we had learn react, then apply to jobs 46 00:02:14,250 --> 00:02:16,863 ‫and then invest all your new income. 47 00:02:17,880 --> 00:02:20,100 ‫So we can click this buttons here 48 00:02:20,100 --> 00:02:22,200 ‫so we have some interactivity here 49 00:02:22,200 --> 00:02:26,853 ‫and we can then also close and open up this component again. 50 00:02:27,810 --> 00:02:31,410 ‫All right, so again, in this lecture, we will start 51 00:02:31,410 --> 00:02:34,740 ‫by building out the static part of this component. 52 00:02:34,740 --> 00:02:39,240 ‫So just the component basically without any interactivity. 53 00:02:39,240 --> 00:02:41,373 ‫So just writing the JSX. 54 00:02:42,360 --> 00:02:45,870 ‫But anyway, Create-React-App has now finished. 55 00:02:45,870 --> 00:02:49,890 ‫I will just quickly again rename the folder here 56 00:02:49,890 --> 00:02:54,240 ‫and then let's drag and drop it here onto VS code. 57 00:02:54,240 --> 00:02:57,543 ‫And as always, you can also open it right here. 58 00:02:58,920 --> 00:03:03,690 ‫Okay, so let's clean up our starter files a little bit. 59 00:03:03,690 --> 00:03:07,380 ‫And in fact, I will delete almost everything here. 60 00:03:07,380 --> 00:03:11,650 ‫So we will just leave app.js and index.js 61 00:03:15,600 --> 00:03:17,970 ‫so all of them can go to the trash. 62 00:03:17,970 --> 00:03:21,030 ‫And now let's open up index.js. 63 00:03:21,030 --> 00:03:23,670 ‫Now, this time we will actually not write all 64 00:03:23,670 --> 00:03:25,290 ‫of this here again by hand 65 00:03:25,290 --> 00:03:27,780 ‫because now you already know how that works. 66 00:03:27,780 --> 00:03:31,140 ‫And so we can basically keep the code here 67 00:03:31,140 --> 00:03:34,890 ‫that Create-React-App put there for us. 68 00:03:34,890 --> 00:03:37,410 ‫We just need to get rid of this part 69 00:03:37,410 --> 00:03:39,003 ‫and also of this import. 70 00:03:39,870 --> 00:03:43,800 ‫Now we also got rid of the index.css file. 71 00:03:43,800 --> 00:03:46,080 ‫So this import right now doesn't work 72 00:03:46,080 --> 00:03:50,463 ‫but I do actually have a CSS file in the starter files. 73 00:03:51,600 --> 00:03:55,350 ‫So let's open up the files that we downloaded 74 00:03:55,350 --> 00:03:56,520 ‫in the beginning. 75 00:03:56,520 --> 00:04:00,903 ‫Then here in the steps starter files, we have these two. 76 00:04:01,890 --> 00:04:03,063 ‫So let's copy them. 77 00:04:05,790 --> 00:04:10,440 ‫And then in steps, let's place them here in the source. 78 00:04:10,440 --> 00:04:13,860 ‫And then let's also just move this vanilla.HTML 79 00:04:13,860 --> 00:04:15,690 ‫into the public. 80 00:04:15,690 --> 00:04:19,113 ‫So we're going to check out later what that is. 81 00:04:21,060 --> 00:04:24,120 ‫Okay, then going back here 82 00:04:24,120 --> 00:04:29,120 ‫notice how we are importing this app from this file app.js. 83 00:04:29,370 --> 00:04:30,633 ‫And so that's this one. 84 00:04:32,130 --> 00:04:34,350 ‫But here, let's clean everything. 85 00:04:34,350 --> 00:04:36,990 ‫And let's once again start from scratch 86 00:04:36,990 --> 00:04:38,910 ‫by creating a new component. 87 00:04:38,910 --> 00:04:43,230 ‫And as always, that component will be the app component. 88 00:04:43,230 --> 00:04:47,910 ‫So function app and so you see that usually we use 89 00:04:47,910 --> 00:04:51,240 ‫a component called app as the root component 90 00:04:51,240 --> 00:04:52,650 ‫of our application. 91 00:04:52,650 --> 00:04:56,190 ‫So basically as the component that is the parent component 92 00:04:56,190 --> 00:04:58,083 ‫of all the other components. 93 00:04:59,310 --> 00:05:01,743 ‫Let's just return something here. 94 00:05:04,110 --> 00:05:05,760 ‫Hello React. 95 00:05:05,760 --> 00:05:09,840 ‫And finally all we have to do is to export this function 96 00:05:09,840 --> 00:05:10,673 ‫from here. 97 00:05:11,610 --> 00:05:16,610 ‫So export default, so that now index.js can import it here 98 00:05:18,780 --> 00:05:21,210 ‫and render it into the dom. 99 00:05:21,210 --> 00:05:24,570 ‫So just again, like we wrote before by hand 100 00:05:24,570 --> 00:05:26,640 ‫but now we will just leave the code here. 101 00:05:26,640 --> 00:05:30,330 ‫Of course, we don't always have to do everything manually. 102 00:05:30,330 --> 00:05:33,780 ‫Now let's come here to our integrated VS code terminal. 103 00:05:33,780 --> 00:05:36,810 ‫So just by clicking here, and as you see 104 00:05:36,810 --> 00:05:40,260 ‫this is already automatically in our project folder 105 00:05:40,260 --> 00:05:42,000 ‫or at least it should be. 106 00:05:42,000 --> 00:05:44,610 ‫So now there's no need to navigate anywhere. 107 00:05:44,610 --> 00:05:49,253 ‫All we need to do to start a project is to run NPM start. 108 00:05:51,030 --> 00:05:55,290 ‫So this will then automatically open up a new browser tab. 109 00:05:55,290 --> 00:05:57,510 ‫And yeah, here it is. 110 00:05:57,510 --> 00:06:00,783 ‫So this is the content of our app.js. 111 00:06:02,340 --> 00:06:06,660 ‫Alright, just giving ourselves a bit more space here. 112 00:06:06,660 --> 00:06:08,670 ‫And so you notice that the file name here 113 00:06:08,670 --> 00:06:12,117 ‫app.js is exactly the name of the component. 114 00:06:12,117 --> 00:06:14,250 ‫And so this is going to be a pattern 115 00:06:14,250 --> 00:06:17,010 ‫that we will see throughout the course. 116 00:06:17,010 --> 00:06:20,520 ‫But anyway, let's not together write the JSX here 117 00:06:20,520 --> 00:06:23,850 ‫so that we end up with something like this again 118 00:06:23,850 --> 00:06:26,193 ‫just without the interactivity. 119 00:06:28,050 --> 00:06:30,450 ‫So we actually start with a div 120 00:06:30,450 --> 00:06:33,543 ‫that has the class name of steps. 121 00:06:35,280 --> 00:06:38,280 ‫And if you're interested in the CSS, then of course 122 00:06:38,280 --> 00:06:41,943 ‫make sure to check out the CSS file that we just included. 123 00:06:42,930 --> 00:06:45,910 ‫And now this div here has three child elements 124 00:06:47,100 --> 00:06:51,753 ‫so it has a div with the class of numbers. 125 00:06:54,630 --> 00:06:57,450 ‫And so here we will have these numbers. 126 00:06:57,450 --> 00:06:58,833 ‫1, 2, 3. 127 00:06:59,970 --> 00:07:02,370 ‫And now to make this a bit faster, I will just 128 00:07:02,370 --> 00:07:06,990 ‫duplicate the code here, which as I explained to you before 129 00:07:06,990 --> 00:07:11,520 ‫we can simply do with this command here. 130 00:07:11,520 --> 00:07:14,940 ‫So copy line down, I think I actually personalized 131 00:07:14,940 --> 00:07:16,620 ‫this command right here. 132 00:07:16,620 --> 00:07:18,960 ‫So for you, it's probably another one, but you 133 00:07:18,960 --> 00:07:21,450 ‫should see which one it is right here. 134 00:07:21,450 --> 00:07:25,470 ‫And if you want, you can also personalize all your shortcuts 135 00:07:25,470 --> 00:07:26,373 ‫right here. 136 00:07:28,920 --> 00:07:33,300 ‫Okay. But anyway, let's now move on to the next one. 137 00:07:33,300 --> 00:07:35,700 ‫And here we actually want a paragraph, 138 00:07:35,700 --> 00:07:38,253 ‫so a paragraph with the class name of message. 139 00:07:42,450 --> 00:07:45,120 ‫Let's just use a placeholder for now. 140 00:07:45,120 --> 00:07:50,120 ‫And then finally a div again for the buttons. 141 00:07:52,740 --> 00:07:55,443 ‫So here we then will have one button element. 142 00:07:56,580 --> 00:07:57,573 ‫Let's see. 143 00:07:58,950 --> 00:08:01,210 ‫Yeah, this first one says previous 144 00:08:04,260 --> 00:08:08,940 ‫and then another one which says next. 145 00:08:08,940 --> 00:08:12,090 ‫So here basically we have the numbers 146 00:08:12,090 --> 00:08:14,430 ‫then the message and the buttons. 147 00:08:14,430 --> 00:08:16,860 ‫And so what we have here is already looking 148 00:08:16,860 --> 00:08:19,020 ‫pretty close to that. 149 00:08:19,020 --> 00:08:22,560 ‫Now the buttons here are not purple like in the demo 150 00:08:22,560 --> 00:08:25,230 ‫and that's because we will later have another button 151 00:08:25,230 --> 00:08:28,350 ‫which should not have that background color. 152 00:08:28,350 --> 00:08:31,410 ‫And so let's add those stylings here directly 153 00:08:31,410 --> 00:08:32,850 ‫to the two buttons. 154 00:08:32,850 --> 00:08:35,820 ‫And so with this, we can then also practice again 155 00:08:35,820 --> 00:08:40,443 ‫how we add styles to some individual JSX elements. 156 00:08:41,370 --> 00:08:45,210 ‫So remember that we do that by passing in basically 157 00:08:45,210 --> 00:08:47,523 ‫the style prop into this element. 158 00:08:48,390 --> 00:08:50,430 ‫So then we enter JavaScript mode 159 00:08:50,430 --> 00:08:54,093 ‫and then here we can define our object of styles. 160 00:08:55,260 --> 00:08:56,470 ‫So background color 161 00:08:58,800 --> 00:09:03,800 ‫and here the color is 7950F2. 162 00:09:06,210 --> 00:09:09,480 ‫And also the text color, let's set it to white, 163 00:09:09,480 --> 00:09:13,560 ‫which is FFF, and it needs to be a string of course, 164 00:09:13,560 --> 00:09:16,233 ‫since again, this is just a JavaScript object. 165 00:09:17,160 --> 00:09:19,680 ‫Now, in case you're wondering why these colors 166 00:09:19,680 --> 00:09:22,680 ‫are so nicely highlighted, that's simply because I have 167 00:09:22,680 --> 00:09:26,460 ‫this extension called color highlight. 168 00:09:26,460 --> 00:09:30,210 ‫So a very popular one with 5 million installs. 169 00:09:30,210 --> 00:09:33,730 ‫And so if you want to replicate the way this looks 170 00:09:34,590 --> 00:09:37,200 ‫then you can just also install that. 171 00:09:37,200 --> 00:09:39,340 ‫But here, let's just copy all of this 172 00:09:40,410 --> 00:09:41,763 ‫to make it faster. 173 00:09:43,620 --> 00:09:44,453 ‫Next. 174 00:09:46,440 --> 00:09:49,950 ‫And yeah, that's looking pretty close. 175 00:09:49,950 --> 00:09:52,470 ‫All we are missing now is the highlight here 176 00:09:52,470 --> 00:09:54,090 ‫of the current step. 177 00:09:54,090 --> 00:09:56,640 ‫So here we are in step number one, and therefore 178 00:09:56,640 --> 00:09:59,610 ‫it's now highlighted with this purple color. 179 00:09:59,610 --> 00:10:02,043 ‫And for that we have yet another class name. 180 00:10:03,030 --> 00:10:08,030 ‫So class of active now okay, now finally, let's also 181 00:10:11,790 --> 00:10:13,350 ‫add the message here. 182 00:10:13,350 --> 00:10:16,380 ‫And those messages are actually in the CSS file 183 00:10:16,380 --> 00:10:17,763 ‫that I provided for you. 184 00:10:19,320 --> 00:10:22,953 ‫So I placed this JavaScript object here as a comment. 185 00:10:26,760 --> 00:10:31,760 ‫And so let's paste that out here outside of the component. 186 00:10:31,980 --> 00:10:34,230 ‫So this data doesn't depend on anything 187 00:10:34,230 --> 00:10:36,000 ‫that is inside the component. 188 00:10:36,000 --> 00:10:38,400 ‫And so it should be located outside 189 00:10:38,400 --> 00:10:41,040 ‫because otherwise each time that dysfunction here 190 00:10:41,040 --> 00:10:46,030 ‫is executed, this data, so this array will be created again 191 00:10:47,190 --> 00:10:50,850 ‫but we will learn all about that a bit later, of course. 192 00:10:50,850 --> 00:10:52,650 ‫So when objects are created 193 00:10:52,650 --> 00:10:56,280 ‫and when these functions are executed and so on. 194 00:10:56,280 --> 00:10:58,560 ‫So right now we are only learning really 195 00:10:58,560 --> 00:11:01,140 ‫how we use these react features 196 00:11:01,140 --> 00:11:04,170 ‫but not yet how they work behind the scenes. 197 00:11:04,170 --> 00:11:07,650 ‫So the mechanics of react are still a bit hidden to us. 198 00:11:07,650 --> 00:11:11,193 ‫We are only just learning how we use the different features. 199 00:11:14,116 --> 00:11:17,787 ‫So now we need this message here basically. 200 00:11:18,630 --> 00:11:21,480 ‫So the first element of the array right here 201 00:11:21,480 --> 00:11:24,600 ‫but we're not going to just copy it, right? 202 00:11:24,600 --> 00:11:26,970 ‫So we want to read it dynamically. 203 00:11:26,970 --> 00:11:31,080 ‫And so let's hear inside this component, define a variable 204 00:11:31,080 --> 00:11:33,993 ‫which will tell us which step we are currently in. 205 00:11:36,510 --> 00:11:41,510 ‫So let's do const step and let's just set it to one. 206 00:11:41,670 --> 00:11:43,983 ‫And by the way, it is this step here 207 00:11:43,983 --> 00:11:46,530 ‫that we will want to update later 208 00:11:46,530 --> 00:11:48,210 ‫as we click on these buttons. 209 00:11:48,210 --> 00:11:51,030 ‫But for now we are just building here the static part. 210 00:11:51,030 --> 00:11:53,703 ‫So we are just manually setting it to one. 211 00:11:55,290 --> 00:12:00,190 ‫So then let's write step and then the number of the step 212 00:12:02,760 --> 00:12:07,470 ‫and then let's read the value out of the array. 213 00:12:07,470 --> 00:12:11,193 ‫So that's messages at position step. 214 00:12:12,030 --> 00:12:13,320 ‫And we need to minus one here 215 00:12:13,320 --> 00:12:16,173 ‫because of course the array is zero based. 216 00:12:17,760 --> 00:12:20,940 ‫Alright? Ah, beautiful. 217 00:12:20,940 --> 00:12:24,150 ‫So if we now manually change it here to two 218 00:12:24,150 --> 00:12:26,910 ‫then that will then change the message here. 219 00:12:26,910 --> 00:12:30,780 ‫But what didn't change is that this step number two 220 00:12:30,780 --> 00:12:33,600 ‫was not marked as active. 221 00:12:33,600 --> 00:12:36,930 ‫So basically we need to now set the styles here 222 00:12:36,930 --> 00:12:39,033 ‫on these elements conditionally. 223 00:12:40,770 --> 00:12:44,250 ‫So if we just add the class name active to all of them 224 00:12:44,250 --> 00:12:46,080 ‫then they would always be active 225 00:12:46,080 --> 00:12:47,970 ‫but that's not what we want. 226 00:12:47,970 --> 00:12:50,910 ‫So we need to basically determine this string here 227 00:12:50,910 --> 00:12:52,140 ‫based on a condition. 228 00:12:52,140 --> 00:12:54,693 ‫So just like we learned in the previous section. 229 00:12:55,560 --> 00:12:57,690 ‫So let's enter JavaScript mode 230 00:12:57,690 --> 00:13:00,300 ‫so that we can write a template literal. 231 00:13:00,300 --> 00:13:04,740 ‫And so here we will then produce either active or nothing. 232 00:13:04,740 --> 00:13:07,920 ‫So let's enter the JavaScript mode basically 233 00:13:07,920 --> 00:13:09,660 ‫of the template, literal. 234 00:13:09,660 --> 00:13:14,660 ‫And then let's just ask if the step is greater or equal one. 235 00:13:16,440 --> 00:13:20,520 ‫And if so, then the result of the operation 236 00:13:20,520 --> 00:13:22,560 ‫should be the string of active. 237 00:13:22,560 --> 00:13:25,443 ‫And if not, well then just nothing. 238 00:13:27,690 --> 00:13:31,860 ‫So you see that this one here already became purple. 239 00:13:31,860 --> 00:13:35,253 ‫And so that's of course because two is greater than one. 240 00:13:38,250 --> 00:13:42,573 ‫Right let's add this to all of them. 241 00:13:46,230 --> 00:13:50,970 ‫But then here, of course we need to adapt and yeah, 242 00:13:50,970 --> 00:13:53,310 ‫nice, that's working. 243 00:13:53,310 --> 00:13:55,590 ‫So if we had number three 244 00:13:55,590 --> 00:13:58,503 ‫then all three of them would become active. 245 00:14:00,780 --> 00:14:01,650 ‫All right? 246 00:14:01,650 --> 00:14:04,620 ‫And let's just quickly check this out. 247 00:14:04,620 --> 00:14:07,920 ‫So you see now this one has the class of active 248 00:14:07,920 --> 00:14:10,680 ‫and these ones still have the class attribute 249 00:14:10,680 --> 00:14:13,080 ‫because we specified it here 250 00:14:13,080 --> 00:14:15,780 ‫but then there is no string to it. 251 00:14:15,780 --> 00:14:19,320 ‫So that's basically just this empty string that we return 252 00:14:19,320 --> 00:14:20,793 ‫in these two cases. 253 00:14:21,750 --> 00:14:25,710 ‫Great. So that's the static part of the application. 254 00:14:25,710 --> 00:14:28,440 ‫But of course, we want to now navigate here 255 00:14:28,440 --> 00:14:30,180 ‫by clicking on these buttons 256 00:14:30,180 --> 00:14:35,180 ‫so not changing manually here, this step variable, right? 257 00:14:35,490 --> 00:14:38,400 ‫And so that means that it's now time to learn 258 00:14:38,400 --> 00:14:41,850 ‫how we can handle the click events on these buttons. 259 00:14:41,850 --> 00:14:43,710 ‫And so that's what the next lecture 260 00:14:43,710 --> 00:14:45,333 ‫is going to be all about.