1 00:00:01,050 --> 00:00:03,600 ‫Now just for fun I want to show you 2 00:00:03,600 --> 00:00:07,680 ‫how we can write React code without any modern tooling 3 00:00:07,680 --> 00:00:09,420 ‫and any build step. 4 00:00:09,420 --> 00:00:12,870 ‫So, right inside a regular HTML file. 5 00:00:12,870 --> 00:00:15,537 ‫So, this is what I call pure React. 6 00:00:15,537 --> 00:00:17,670 ‫And it will show you why the tools 7 00:00:17,670 --> 00:00:20,613 ‫that we will talk about next are so helpful. 8 00:00:22,050 --> 00:00:25,830 ‫So, to start let's create our very first project folder 9 00:00:25,830 --> 00:00:28,380 ‫which I'm doing right here on the desktop 10 00:00:28,380 --> 00:00:31,890 ‫where I also have the GitHub files that we downloaded 11 00:00:31,890 --> 00:00:34,230 ‫in the first section of the course. 12 00:00:34,230 --> 00:00:36,990 ‫But of course, you can do this anywhere you want. 13 00:00:36,990 --> 00:00:38,250 ‫And I'm simply going to call 14 00:00:38,250 --> 00:00:42,077 ‫this first one, "01-pure-React". 15 00:00:44,625 --> 00:00:45,840 ‫All right. 16 00:00:45,840 --> 00:00:49,050 ‫And now all we have to do is to open up this folder 17 00:00:49,050 --> 00:00:51,870 ‫as a project folder in VS Code. 18 00:00:51,870 --> 00:00:55,740 ‫And one way of doing that is to drag and drop this folder 19 00:00:55,740 --> 00:00:59,460 ‫onto the VS Code icon down here. 20 00:00:59,460 --> 00:01:02,195 ‫Or of course, you can open up the project folder 21 00:01:02,195 --> 00:01:06,360 ‫here from this menu or simply here. 22 00:01:06,360 --> 00:01:07,803 ‫So here, open folder. 23 00:01:09,960 --> 00:01:12,660 ‫So, right now we have an empty folder. 24 00:01:12,660 --> 00:01:17,400 ‫So, let's create index.HTML. 25 00:01:17,400 --> 00:01:21,420 ‫And to scaffold an empty HTML structure in VS Code, 26 00:01:21,420 --> 00:01:25,650 ‫we can simply write the exclamation mark, hit enter, 27 00:01:25,650 --> 00:01:28,683 ‫and then we have an empty HTML structure. 28 00:01:30,240 --> 00:01:35,070 ‫So, let's give it a title, "Hello React!". 29 00:01:35,070 --> 00:01:37,380 ‫And then here in the body, all I will do for now 30 00:01:37,380 --> 00:01:41,940 ‫is to create a div with the ID of "root". 31 00:01:41,940 --> 00:01:44,340 ‫And it could be any ID here of course, 32 00:01:44,340 --> 00:01:47,670 ‫but root is the standard for React. 33 00:01:47,670 --> 00:01:49,413 ‫And we will place nothing in here. 34 00:01:50,370 --> 00:01:51,480 ‫So, give it a save. 35 00:01:51,480 --> 00:01:52,470 ‫And maybe you noticed 36 00:01:52,470 --> 00:01:56,970 ‫how prettier automatically formatted the code as I saved it. 37 00:01:56,970 --> 00:02:00,450 ‫Okay, so let's now add React to this file. 38 00:02:00,450 --> 00:02:03,720 ‫And the way we do that when we write pure React 39 00:02:03,720 --> 00:02:08,340 ‫is by simply including the React library as a script. 40 00:02:08,340 --> 00:02:11,520 ‫Now, to get the URL of those scripts, 41 00:02:11,520 --> 00:02:15,900 ‫we can actually check out React's official documentation. 42 00:02:15,900 --> 00:02:19,290 ‫So, to do that, let's head over to our browser 43 00:02:19,290 --> 00:02:24,150 ‫and then check out React.dev. 44 00:02:24,150 --> 00:02:26,700 ‫So, that's the official React website, 45 00:02:26,700 --> 00:02:30,330 ‫and we will explore it a little bit in a future video. 46 00:02:30,330 --> 00:02:34,500 ‫But for now, let's just come here to this learn part. 47 00:02:34,500 --> 00:02:38,343 ‫And then right here, let's select installation. 48 00:02:39,570 --> 00:02:42,900 ‫So, right on this page, then you will find 49 00:02:42,900 --> 00:02:47,160 ‫this small part here which says, "Try React locally". 50 00:02:47,160 --> 00:02:50,400 ‫And then here, let's click on this link here 51 00:02:50,400 --> 00:02:53,517 ‫that says, "Download this HTML page". 52 00:02:54,540 --> 00:02:57,180 ‫Now if for some reason that link there 53 00:02:57,180 --> 00:02:59,970 ‫doesn't exist anymore in the future, 54 00:02:59,970 --> 00:03:04,680 ‫then you can just try to write these two things here by hand 55 00:03:04,680 --> 00:03:07,110 ‫because it is these two scripts 56 00:03:07,110 --> 00:03:11,220 ‫that we're now gonna add to our HTML file. 57 00:03:11,220 --> 00:03:15,360 ‫Now, okay, so let's move back to VS Code 58 00:03:15,360 --> 00:03:18,420 ‫and paste them right here. 59 00:03:18,420 --> 00:03:21,030 ‫And with this, we have actually included React 60 00:03:21,030 --> 00:03:24,390 ‫into this, let's say project. 61 00:03:24,390 --> 00:03:28,500 ‫Now, again, usually when we write React, we do not do this 62 00:03:28,500 --> 00:03:31,110 ‫but instead we use a modern build tool 63 00:03:31,110 --> 00:03:34,170 ‫such as the ones that we are going to talk about next. 64 00:03:34,170 --> 00:03:36,390 ‫But for now, we're doing it the pure way 65 00:03:36,390 --> 00:03:40,230 ‫just so you see why we actually need those tools. 66 00:03:40,230 --> 00:03:43,890 ‫Now in case you're wondering why we have two libraries here, 67 00:03:43,890 --> 00:03:45,900 ‫it's because this first one here 68 00:03:45,900 --> 00:03:49,140 ‫is basically the core React library. 69 00:03:49,140 --> 00:03:52,740 ‫So, this one is the one that works with components, state, 70 00:03:52,740 --> 00:03:55,440 ‫and really all the React stuff. 71 00:03:55,440 --> 00:03:57,120 ‫So, this is basically the interface 72 00:03:57,120 --> 00:03:59,910 ‫of how to interact with React. 73 00:03:59,910 --> 00:04:01,320 ‫And then this other one here. 74 00:04:01,320 --> 00:04:04,860 ‫So, React-dom is basically the rendering layer 75 00:04:04,860 --> 00:04:08,250 ‫which can render React components into the dom. 76 00:04:08,250 --> 00:04:10,800 ‫And so since we want to render in the browser, 77 00:04:10,800 --> 00:04:13,170 ‫we need to use React-dom. 78 00:04:13,170 --> 00:04:16,080 ‫But React can actually be rendered in other environments, 79 00:04:16,080 --> 00:04:20,520 ‫for example, as native applications using React Native. 80 00:04:20,520 --> 00:04:24,810 ‫But anyway, let's now create our very first component. 81 00:04:24,810 --> 00:04:28,920 ‫And of course that also needs to happen inside a script 82 00:04:28,920 --> 00:04:31,110 ‫because that is also a JavaScript. 83 00:04:31,110 --> 00:04:33,120 ‫And so after these two scripts here 84 00:04:33,120 --> 00:04:35,122 ‫where we include the React library, 85 00:04:35,122 --> 00:04:38,633 ‫let's open up another script. 86 00:04:38,633 --> 00:04:42,214 ‫And then in there we can create a function 87 00:04:42,214 --> 00:04:46,200 ‫and I will call it "App", just like this. 88 00:04:46,200 --> 00:04:48,870 ‫So, remember from the very first app that we built, 89 00:04:48,870 --> 00:04:51,240 ‫that React is based on components. 90 00:04:51,240 --> 00:04:53,401 ‫And a component is basically just a function 91 00:04:53,401 --> 00:04:56,703 ‫that starts with an upper case like this. 92 00:04:58,020 --> 00:04:59,520 ‫And so now from this function here, 93 00:04:59,520 --> 00:05:03,330 ‫we can return whatever we want to see on the UI. 94 00:05:03,330 --> 00:05:05,490 ‫Now, in that first application that we built, 95 00:05:05,490 --> 00:05:07,590 ‫we returned some JSX code. 96 00:05:07,590 --> 00:05:08,820 ‫Remember that? 97 00:05:08,820 --> 00:05:11,250 ‫However, that is not going to work here 98 00:05:11,250 --> 00:05:13,980 ‫because well, we don't have the tooling 99 00:05:13,980 --> 00:05:17,580 ‫that can convert JSX back to JavaScript. 100 00:05:17,580 --> 00:05:21,153 ‫And so here we need to use the create element function. 101 00:05:22,950 --> 00:05:27,923 ‫So, let's do, "return React.createElement". 102 00:05:30,300 --> 00:05:33,750 ‫And then simply the name of the HTML element. 103 00:05:33,750 --> 00:05:35,400 ‫So, let's say we want the header. 104 00:05:36,660 --> 00:05:40,230 ‫So, this React object here is the one that's coming 105 00:05:40,230 --> 00:05:42,150 ‫from this script right here. 106 00:05:42,150 --> 00:05:45,630 ‫So, this script will give us this React object. 107 00:05:45,630 --> 00:05:47,940 ‫And so from there we can then use 108 00:05:47,940 --> 00:05:50,160 ‫this create element method. 109 00:05:50,160 --> 00:05:52,620 ‫And if all this is really confusing to you right now, 110 00:05:52,620 --> 00:05:54,090 ‫then please don't worry. 111 00:05:54,090 --> 00:05:56,370 ‫So again, the goal here is to really not 112 00:05:56,370 --> 00:05:59,280 ‫for you to understand React at this point. 113 00:05:59,280 --> 00:06:01,110 ‫We're just doing some experiments 114 00:06:01,110 --> 00:06:04,440 ‫and just getting a first look at React here. 115 00:06:04,440 --> 00:06:06,780 ‫But we are not really learning it yet. 116 00:06:06,780 --> 00:06:07,650 ‫All right? 117 00:06:07,650 --> 00:06:09,600 ‫So, I'm really just trying to demonstrate here 118 00:06:09,600 --> 00:06:13,196 ‫how we write pure React without a build tool. 119 00:06:13,196 --> 00:06:17,820 ‫But anyway, let's now actually go back to that folder here 120 00:06:17,820 --> 00:06:21,850 ‫and open index.HTML in Google Chrome 121 00:06:23,310 --> 00:06:25,410 ‫just to see what happens. 122 00:06:25,410 --> 00:06:26,913 ‫And let's inspect. 123 00:06:28,590 --> 00:06:31,710 ‫And close down this. 124 00:06:31,710 --> 00:06:34,470 ‫We'll make it just a bit bigger here for you. 125 00:06:34,470 --> 00:06:35,760 ‫And so this is just to show you 126 00:06:35,760 --> 00:06:38,970 ‫that right now actually nothing happened. 127 00:06:38,970 --> 00:06:41,760 ‫So, we still only have this root div 128 00:06:41,760 --> 00:06:43,680 ‫and then of course our scripts. 129 00:06:43,680 --> 00:06:46,140 ‫And so the reason why that header that we created 130 00:06:46,140 --> 00:06:49,590 ‫is not here yet is because we didn't tell React 131 00:06:49,590 --> 00:06:52,560 ‫to actually render it onto the page. 132 00:06:52,560 --> 00:06:55,860 ‫So, basically to place that header into the dom. 133 00:06:55,860 --> 00:06:58,650 ‫And so let's now go back and do that. 134 00:06:58,650 --> 00:07:00,960 ‫And we do this here right at the very end. 135 00:07:00,960 --> 00:07:02,523 ‫So after the component. 136 00:07:05,040 --> 00:07:07,383 ‫So let's create a so-called root. 137 00:07:08,490 --> 00:07:10,590 ‫And so here and now we need 138 00:07:10,590 --> 00:07:14,220 ‫that React-dom library that I mentioned before. 139 00:07:14,220 --> 00:07:15,420 ‫So this one here. 140 00:07:15,420 --> 00:07:19,057 ‫So from React-dom, we now do "createRoot". 141 00:07:22,320 --> 00:07:24,060 ‫And now we simply need to select 142 00:07:24,060 --> 00:07:26,280 ‫this div element right here. 143 00:07:26,280 --> 00:07:28,470 ‫So, this div here, this element 144 00:07:28,470 --> 00:07:30,450 ‫will become the root of our application 145 00:07:30,450 --> 00:07:33,150 ‫which means that the application will be rendered 146 00:07:33,150 --> 00:07:35,340 ‫inside of this element. 147 00:07:35,340 --> 00:07:36,590 ‫So, basically right here. 148 00:07:37,890 --> 00:07:40,980 ‫So, let's simply select that 149 00:07:40,980 --> 00:07:43,983 ‫with "document.getElementById" 150 00:07:44,910 --> 00:07:47,790 ‫which is just normal dom manipulation, 151 00:07:47,790 --> 00:07:51,000 ‫or in this case just normal selecting elements 152 00:07:51,000 --> 00:07:53,010 ‫using dom methods. 153 00:07:53,010 --> 00:07:57,370 ‫So, we created our root, and now we can do "root.render". 154 00:08:00,090 --> 00:08:04,350 ‫And then again "React.createElement App". 155 00:08:06,660 --> 00:08:10,440 ‫And so here is where our App component comes into play. 156 00:08:10,440 --> 00:08:13,530 ‫So we render basically creating a new element 157 00:08:13,530 --> 00:08:16,230 ‫out of this App component. 158 00:08:16,230 --> 00:08:19,410 ‫And once again, please don't memorize any of this. 159 00:08:19,410 --> 00:08:20,243 ‫All right? 160 00:08:20,243 --> 00:08:21,963 ‫This is just to show you. 161 00:08:24,030 --> 00:08:26,790 ‫So, if you wanted, you didn't even have to write this code. 162 00:08:26,790 --> 00:08:29,190 ‫It would be perfectly fine just watching me. 163 00:08:29,190 --> 00:08:31,590 ‫But still I think it's probably a good idea 164 00:08:31,590 --> 00:08:34,680 ‫to just start typing a bit of code. 165 00:08:34,680 --> 00:08:36,840 ‫But anyway, when I reload this now, 166 00:08:36,840 --> 00:08:39,303 ‫we should see a header element here. 167 00:08:40,590 --> 00:08:43,383 ‫So remember, it's inside this root. 168 00:08:45,000 --> 00:08:47,700 ‫And yeah, there it is. 169 00:08:47,700 --> 00:08:50,670 ‫Now it's empty because we didn't actually 170 00:08:50,670 --> 00:08:52,440 ‫place any content in it. 171 00:08:52,440 --> 00:08:55,800 ‫But React did render this header right here. 172 00:08:55,800 --> 00:08:58,920 ‫So, this header element inside our dom. 173 00:08:58,920 --> 00:09:02,100 ‫And so let's now actually add something in there. 174 00:09:02,100 --> 00:09:04,203 ‫Now the way this works is a bit confusing. 175 00:09:05,100 --> 00:09:06,720 ‫So, this create element function 176 00:09:06,720 --> 00:09:10,170 ‫does not only accept the name of the HTML element 177 00:09:10,170 --> 00:09:14,190 ‫but also so-called props, which in this case are null. 178 00:09:14,190 --> 00:09:18,150 ‫And then as a third argument, the children of this element. 179 00:09:18,150 --> 00:09:21,510 ‫And in this case, let's just write it as a string. 180 00:09:21,510 --> 00:09:26,510 ‫Let's just do "Hello React!", give it a save, 181 00:09:27,660 --> 00:09:28,743 ‫and let's go back. 182 00:09:29,790 --> 00:09:33,840 ‫And yeah, there we go. 183 00:09:33,840 --> 00:09:34,860 ‫Beautiful. 184 00:09:34,860 --> 00:09:37,770 ‫So now this "Hello React!" is basically a child note 185 00:09:37,770 --> 00:09:39,633 ‫of this header note right here. 186 00:09:40,800 --> 00:09:43,192 ‫But let's go back and yeah, as I mentioned, 187 00:09:43,192 --> 00:09:46,410 ‫before we used JSX to write this. 188 00:09:46,410 --> 00:09:47,580 ‫And then we wouldn't have to write 189 00:09:47,580 --> 00:09:49,770 ‫this weird thing right here. 190 00:09:49,770 --> 00:09:53,070 ‫We would just write it as HTML basically. 191 00:09:53,070 --> 00:09:54,480 ‫But that doesn't work here. 192 00:09:54,480 --> 00:09:58,500 ‫And so that's one more reason why we do not write pure React 193 00:09:58,500 --> 00:10:02,190 ‫like this in a real development environment. 194 00:10:02,190 --> 00:10:05,010 ‫But anyway, right here in this function, 195 00:10:05,010 --> 00:10:08,223 ‫we can of course just write any normal JavaScript logic. 196 00:10:09,150 --> 00:10:13,443 ‫So let's, for example, create a string of the current time. 197 00:10:14,430 --> 00:10:17,130 ‫So, that's "new Date", 198 00:10:17,130 --> 00:10:19,530 ‫and of course this has nothing to do with React, 199 00:10:20,696 --> 00:10:22,363 ‫"toLocalTimeString". 200 00:10:24,900 --> 00:10:28,170 ‫And then let's add that here into the string 201 00:10:28,170 --> 00:10:30,603 ‫and we can just use a template literal for that. 202 00:10:31,950 --> 00:10:34,650 ‫And in case you're not familiar with that for some reason 203 00:10:34,650 --> 00:10:37,890 ‫there is the next section in which I will explain 204 00:10:37,890 --> 00:10:40,743 ‫all the essential JavaScript that we need for React. 205 00:10:42,090 --> 00:10:46,050 ‫All right, but here, let's just place now this time 206 00:10:46,050 --> 00:10:48,600 ‫and let's say "It's" 207 00:10:48,600 --> 00:10:50,880 ‫and then whatever the time is right now. 208 00:10:50,880 --> 00:10:53,430 ‫Let's go back and you see that we always 209 00:10:53,430 --> 00:10:55,410 ‫have to manually reload the page. 210 00:10:55,410 --> 00:10:57,510 ‫And of course, that also will disappear 211 00:10:57,510 --> 00:11:00,990 ‫as soon as we start using some modern tooling. 212 00:11:00,990 --> 00:11:03,420 ‫But anyway, here now we have our time. 213 00:11:03,420 --> 00:11:06,120 ‫And as a last small thing in this application 214 00:11:06,120 --> 00:11:08,640 ‫what I want to do is to now update this 215 00:11:08,640 --> 00:11:10,890 ‫every second with the new time 216 00:11:10,890 --> 00:11:14,553 ‫which then basically will make this function as a clock. 217 00:11:16,380 --> 00:11:19,230 ‫So, let's go back and let's do that. 218 00:11:19,230 --> 00:11:21,990 ‫And for that we need a concept of state. 219 00:11:21,990 --> 00:11:24,594 ‫So, maybe you remember from the first app that we built 220 00:11:24,594 --> 00:11:27,450 ‫that state is necessary whenever we want 221 00:11:27,450 --> 00:11:29,640 ‫to update something on the screen. 222 00:11:29,640 --> 00:11:32,640 ‫But of course we will go really deep into what state is 223 00:11:32,640 --> 00:11:35,490 ‫and how it works a bit later in the course. 224 00:11:35,490 --> 00:11:38,490 ‫For now, let's just create a new piece of state. 225 00:11:38,490 --> 00:11:40,740 ‫And then we don't need this anymore actually. 226 00:11:42,090 --> 00:11:45,840 ‫So, let's say, "const", and again calling it "time" 227 00:11:45,840 --> 00:11:48,900 ‫and then "setTime" which is a function 228 00:11:48,900 --> 00:11:52,530 ‫with which we can update that time state. 229 00:11:52,530 --> 00:11:55,593 ‫So then we need to say "React.useState" 230 00:11:57,210 --> 00:12:00,450 ‫and again the React object is that big object 231 00:12:00,450 --> 00:12:03,180 ‫that we got here from this script. 232 00:12:03,180 --> 00:12:06,210 ‫And then here we need to set the default value. 233 00:12:06,210 --> 00:12:08,133 ‫And so that's then going to be this. 234 00:12:09,960 --> 00:12:12,180 ‫Let's place that here, give it a save, 235 00:12:12,180 --> 00:12:15,450 ‫and if we update now, it will look just exactly the same, 236 00:12:15,450 --> 00:12:17,103 ‫so there's no updating yet. 237 00:12:18,390 --> 00:12:21,603 ‫So, it of course simply reflects the current time now. 238 00:12:23,244 --> 00:12:24,630 ‫And okay, so let's go back 239 00:12:24,630 --> 00:12:27,333 ‫and basically have it update every second. 240 00:12:30,060 --> 00:12:33,386 ‫So, for that, we need something called an effect. 241 00:12:33,386 --> 00:12:38,386 ‫So, "React.useEffect" and we also did that in the first app. 242 00:12:42,480 --> 00:12:44,910 ‫And now in here inside this effect we will simply 243 00:12:44,910 --> 00:12:48,930 ‫use the JavaScript "setInterval" function. 244 00:12:48,930 --> 00:12:51,000 ‫So, this is not a React function 245 00:12:51,000 --> 00:12:53,100 ‫but it's simply a JavaScript function 246 00:12:53,100 --> 00:12:55,710 ‫that we're going to use to set up a timer 247 00:12:55,710 --> 00:13:00,300 ‫that every second will update this time state here. 248 00:13:00,300 --> 00:13:03,280 ‫So, set interval also needs a function 249 00:13:05,370 --> 00:13:07,200 ‫and we could use arrow functions here 250 00:13:07,200 --> 00:13:09,693 ‫to make it a bit shorter, but nevermind. 251 00:13:10,830 --> 00:13:14,490 ‫So, this function should run every thousand milliseconds. 252 00:13:14,490 --> 00:13:16,020 ‫So, once a second. 253 00:13:16,020 --> 00:13:18,510 ‫And what should happen each time? 254 00:13:18,510 --> 00:13:21,570 ‫So each time that this function here will be executed 255 00:13:21,570 --> 00:13:23,553 ‫is that the time should be set. 256 00:13:25,800 --> 00:13:28,650 ‫So, "setTime" and then again this 257 00:13:28,650 --> 00:13:32,283 ‫because this will then always be the new current time. 258 00:13:33,810 --> 00:13:35,190 ‫So, paste that here. 259 00:13:35,190 --> 00:13:39,900 ‫And now finally here, we need to define this empty array. 260 00:13:39,900 --> 00:13:41,490 ‫And this will all make sense 261 00:13:41,490 --> 00:13:44,670 ‫once we start learning about effects. 262 00:13:44,670 --> 00:13:47,250 ‫But for now, just copy the code like this. 263 00:13:47,250 --> 00:13:49,800 ‫And this should now already work. 264 00:13:49,800 --> 00:13:51,183 ‫So let's check it out. 265 00:13:52,110 --> 00:13:55,260 ‫Of course, we need to, again manually update. 266 00:13:55,260 --> 00:13:58,470 ‫And yeah, beautiful. 267 00:13:58,470 --> 00:14:03,300 ‫So, we have a working clock that we coded only with React. 268 00:14:03,300 --> 00:14:05,670 ‫You see down here that the dom is actually updated 269 00:14:05,670 --> 00:14:08,100 ‫in this place once every second. 270 00:14:08,100 --> 00:14:10,443 ‫And so that's the work of React. 271 00:14:11,520 --> 00:14:12,660 ‫Nice. 272 00:14:12,660 --> 00:14:15,990 ‫Now this of course, is all very bare bones. 273 00:14:15,990 --> 00:14:19,680 ‫And yeah, as I said, this is really, really not 274 00:14:19,680 --> 00:14:22,770 ‫how we use React in the real world. 275 00:14:22,770 --> 00:14:24,510 ‫So, we have no modules here. 276 00:14:24,510 --> 00:14:27,600 ‫We have no way of converting JSX. 277 00:14:27,600 --> 00:14:29,580 ‫We have no HTTP server 278 00:14:29,580 --> 00:14:33,390 ‫which automatically reloads the application and so on. 279 00:14:33,390 --> 00:14:36,360 ‫But again, I still believe that it was quite useful 280 00:14:36,360 --> 00:14:40,484 ‫to shortly explore this pure React in this lecture. 281 00:14:40,484 --> 00:14:43,140 ‫But of course, now it's time to move on 282 00:14:43,140 --> 00:14:46,443 ‫to a more robust and real world setup.