1 00:00:00,000 --> 00:00:00,969 2 00:00:00,969 --> 00:00:01,760 TEDDY LIU: Hi guys. 3 00:00:01,760 --> 00:00:05,450 My name is Teddy and this is my seminar on Frontend Development with React. 4 00:00:05,450 --> 00:00:08,050 So let's just get started with it. 5 00:00:08,050 --> 00:00:10,260 So first, what is React? 6 00:00:10,260 --> 00:00:13,570 So officially on their website it's a JavaScript library 7 00:00:13,570 --> 00:00:15,680 for building user interfaces. 8 00:00:15,680 --> 00:00:17,740 But more unofficially, colloquially, it's 9 00:00:17,740 --> 00:00:22,630 a dope JS library that makes it really easy to build responsive web pages. 10 00:00:22,630 --> 00:00:25,360 So this was originally developed by Facebook 11 00:00:25,360 --> 00:00:30,880 and its rival is Angular JS, which has been developed by a rival company 12 00:00:30,880 --> 00:00:31,930 Google. 13 00:00:31,930 --> 00:00:34,450 But we're going to talk about React today. 14 00:00:34,450 --> 00:00:39,190 So some things that I'm going to assume is one, only one thing, 15 00:00:39,190 --> 00:00:43,000 it's like you have a basic, very basic understanding of JavaScript. 16 00:00:43,000 --> 00:00:46,870 And if you have a familiarity with any programming language, 17 00:00:46,870 --> 00:00:48,950 this should be pretty simple. 18 00:00:48,950 --> 00:00:51,130 So some things that I'm not going to assume. 19 00:00:51,130 --> 00:00:54,490 I'm not going to assume that you have Node and npm install. 20 00:00:54,490 --> 00:00:57,435 I'm not going to assume that you're familiar with ES6 syntax. 21 00:00:57,435 --> 00:00:59,560 I'm not going to assume that you have understanding 22 00:00:59,560 --> 00:01:03,000 of object oriented programming or functional programming. 23 00:01:03,000 --> 00:01:06,250 And I'm not going to assume that you've created a dynamic web site of any type 24 00:01:06,250 --> 00:01:10,270 before using JQuery, Angular, etc. 25 00:01:10,270 --> 00:01:10,810 OK. 26 00:01:10,810 --> 00:01:16,390 So some key takeaways from the talk today is how to actually get started, 27 00:01:16,390 --> 00:01:19,150 something called JSX, which we'll get into. 28 00:01:19,150 --> 00:01:23,020 Components along with their props and state. 29 00:01:23,020 --> 00:01:27,790 The render method, the Virtual DOM, and functional components. 30 00:01:27,790 --> 00:01:31,000 And also at the end I'll talk a little bit about the next steps 31 00:01:31,000 --> 00:01:33,270 after you learn the material from today's seminar. 32 00:01:33,270 --> 00:01:35,780 33 00:01:35,780 --> 00:01:36,280 OK. 34 00:01:36,280 --> 00:01:38,210 So how to actually get started. 35 00:01:38,210 --> 00:01:41,440 And I wanted to focus on this because I think a lot of tutorials 36 00:01:41,440 --> 00:01:46,210 tell you how to do something inside like a browser or inside a pre-built editor 37 00:01:46,210 --> 00:01:49,090 but no one is actually telling you how to create something and get 38 00:01:49,090 --> 00:01:51,170 it running on your personal computer. 39 00:01:51,170 --> 00:01:55,130 So I wanted to focus a little bit on that at the beginning today. 40 00:01:55,130 --> 00:01:57,970 So first you're going to want to install Node and npm. 41 00:01:57,970 --> 00:02:00,820 And before, just the disclosure, use your own computer. 42 00:02:00,820 --> 00:02:03,010 Don't run this on CS50 IDE. 43 00:02:03,010 --> 00:02:05,080 Eventually you're not going to support for that 44 00:02:05,080 --> 00:02:06,910 or you're not going to be allowed access to that anymore. 45 00:02:06,910 --> 00:02:09,650 So you're going to want to run this on your own computer. 46 00:02:09,650 --> 00:02:13,399 So first Node just allows us to run JavaScript on our desktop. 47 00:02:13,399 --> 00:02:15,190 Usually it runs only in our browser, that's 48 00:02:15,190 --> 00:02:18,160 what Google Chrome and all those other browsers are capable of doing. 49 00:02:18,160 --> 00:02:21,850 But Node lets us do this on our personal desktop. 50 00:02:21,850 --> 00:02:25,060 Npm stands for Node Package Manager and this 51 00:02:25,060 --> 00:02:28,750 lets us install useful things that people have created over time written 52 00:02:28,750 --> 00:02:31,490 in JavaScript, intended for Node. 53 00:02:31,490 --> 00:02:33,490 And you can find them here at this link and I'll 54 00:02:33,490 --> 00:02:37,200 make sure that these slides are shared afterwards with people. 55 00:02:37,200 --> 00:02:42,010 And for right now install 8.9.0 long term service 56 00:02:42,010 --> 00:02:46,090 rather than the newly released 9.0.0 since React is only 57 00:02:46,090 --> 00:02:50,230 supporting Node 8 at the moment. 58 00:02:50,230 --> 00:02:50,800 OK. 59 00:02:50,800 --> 00:02:53,017 Once you have those two things installed, 60 00:02:53,017 --> 00:02:55,350 we're going to install something called create-react-app 61 00:02:55,350 --> 00:02:57,730 and this is exactly one of those npm packages 62 00:02:57,730 --> 00:02:59,162 that I was talking about earlier. 63 00:02:59,162 --> 00:03:00,620 And so it's really easy to install. 64 00:03:00,620 --> 00:03:04,750 Just go to your command line and type these commands npm install. 65 00:03:04,750 --> 00:03:08,410 This -g is saying globally, so this is for all users. 66 00:03:08,410 --> 00:03:10,540 And then create-react-app. 67 00:03:10,540 --> 00:03:12,850 And this is just a tool that was created by Facebook 68 00:03:12,850 --> 00:03:16,720 to help you actually get started faster without doing all the initial grunt 69 00:03:16,720 --> 00:03:19,230 work. 70 00:03:19,230 --> 00:03:21,990 And then finally, we're going to create and view the project. 71 00:03:21,990 --> 00:03:23,960 So we're going to type in our command line 72 00:03:23,960 --> 00:03:26,629 again create-react-app react-seminar. 73 00:03:26,629 --> 00:03:29,420 This is going to create a folder and install the necessary packages 74 00:03:29,420 --> 00:03:33,410 in that folder to be able to run React. 75 00:03:33,410 --> 00:03:37,730 And then we're going to cd into that folder and type npm start. 76 00:03:37,730 --> 00:03:40,130 And this is going to launch a local server. 77 00:03:40,130 --> 00:03:42,110 And we're going to go to localhost 3,000, 78 00:03:42,110 --> 00:03:44,270 if that's not automatically redirected. 79 00:03:44,270 --> 00:03:46,640 And then you're going to have your first React app. 80 00:03:46,640 --> 00:03:50,530 So let's go do that right now. 81 00:03:50,530 --> 00:03:54,360 So here I'm going to type-- 82 00:03:54,360 --> 00:03:56,360 So I've already created the folder ahead of time 83 00:03:56,360 --> 00:03:58,235 since I didn't want to spend time downloading 84 00:03:58,235 --> 00:04:00,790 things just so that you can see. 85 00:04:00,790 --> 00:04:06,730 So I'm going to cd into react-seminar and I'm going to type npm start. 86 00:04:06,730 --> 00:04:09,950 And this is going to be starting a local development server. 87 00:04:09,950 --> 00:04:14,920 And you'll notice that I've opened up that browser and on localhost 3,000 88 00:04:14,920 --> 00:04:18,269 here, I already have a dynamic web site available to us. 89 00:04:18,269 --> 00:04:21,380 So congratulations you've gotten started. 90 00:04:21,380 --> 00:04:26,050 OK but now let's actually try and dig into the code. 91 00:04:26,050 --> 00:04:30,420 So if we go into Sublime Text here and we open up 92 00:04:30,420 --> 00:04:34,360 the code that was generated inside this react-seminar folder, 93 00:04:34,360 --> 00:04:37,230 we're going to find a lot of different things on the side. 94 00:04:37,230 --> 00:04:41,470 But most importantly, we're going to want to look in this source folder. 95 00:04:41,470 --> 00:04:45,570 And inside the source folder are going to be a bunch of different files 96 00:04:45,570 --> 00:04:50,400 but the most important of which is going to be act.js here. 97 00:04:50,400 --> 00:04:55,160 And let me just change something really quickly. 98 00:04:55,160 --> 00:04:58,180 And we're going to be confronted with a bunch of JavaScript code 99 00:04:58,180 --> 00:04:59,960 and right now, it's going to look foreign 100 00:04:59,960 --> 00:05:02,126 but we're going to talk about this in just a second. 101 00:05:02,126 --> 00:05:04,230 102 00:05:04,230 --> 00:05:07,240 So going back. 103 00:05:07,240 --> 00:05:11,450 So let's start digging into the code here. 104 00:05:11,450 --> 00:05:14,500 So what we just saw on the screen was something called JSX 105 00:05:14,500 --> 00:05:17,980 and usually we develop with JavaScript by itself. 106 00:05:17,980 --> 00:05:21,610 But JSX is like JavaScript extension and what this essentially 107 00:05:21,610 --> 00:05:24,130 lets us do is mix JavaScript and HTML. 108 00:05:24,130 --> 00:05:26,230 So whereas normally we would only be allowed 109 00:05:26,230 --> 00:05:30,370 to assign variables and return like integers, strings, lists, 110 00:05:30,370 --> 00:05:31,660 those standard things. 111 00:05:31,660 --> 00:05:36,730 In JSX we're allowed to return HTML tags like divs, buttons, inputs, 112 00:05:36,730 --> 00:05:37,750 all those things. 113 00:05:37,750 --> 00:05:40,630 And when we return those things, they'll be displayed properly 114 00:05:40,630 --> 00:05:42,220 inside the web page. 115 00:05:42,220 --> 00:05:44,780 116 00:05:44,780 --> 00:05:47,570 Another thing that we'll see is something called the component. 117 00:05:47,570 --> 00:05:51,040 And this is the fundamental building block for React. 118 00:05:51,040 --> 00:05:54,260 So these components have internal state and external props, 119 00:05:54,260 --> 00:05:56,682 we'll talk about what those things are later. 120 00:05:56,682 --> 00:05:58,390 And these are nested inside of each other 121 00:05:58,390 --> 00:06:02,680 and can be used across multiple files, and even across multiple projects. 122 00:06:02,680 --> 00:06:06,550 And so this component is like a contained view of the project 123 00:06:06,550 --> 00:06:09,400 and we're going to be changing the way this component is 124 00:06:09,400 --> 00:06:14,750 rendered based on the internal state and external props. 125 00:06:14,750 --> 00:06:18,350 So talking about that state, the state is within a component 126 00:06:18,350 --> 00:06:22,070 and it contains this internal information about components, the stuff 127 00:06:22,070 --> 00:06:24,470 that we're going to be changing dynamically. 128 00:06:24,470 --> 00:06:27,320 And we have some initial state, most of the time, 129 00:06:27,320 --> 00:06:30,290 and we're going to change this state instead of directly modifying it 130 00:06:30,290 --> 00:06:32,510 with a function called this.setState. 131 00:06:32,510 --> 00:06:35,900 And I can talk about the importance of this later. 132 00:06:35,900 --> 00:06:37,970 And then finally, there's a method called render, 133 00:06:37,970 --> 00:06:39,650 which every component must have. 134 00:06:39,650 --> 00:06:42,590 And this is called whenever the state changes. 135 00:06:42,590 --> 00:06:46,550 And here is where we decide what the user should see based 136 00:06:46,550 --> 00:06:48,680 on the current state and the props. 137 00:06:48,680 --> 00:06:52,580 And even though whenever we change the state we're calling render, 138 00:06:52,580 --> 00:06:56,150 not everything is getting re-rendered to the page or the DOM. 139 00:06:56,150 --> 00:06:58,520 And this is because of something called the Virtual DOM. 140 00:06:58,520 --> 00:07:01,610 And what's happening is render is changing the virtual DOM 141 00:07:01,610 --> 00:07:03,890 but React is doing extra work for us to be 142 00:07:03,890 --> 00:07:07,520 able to compute the most efficient way to change the actual DOM 143 00:07:07,520 --> 00:07:13,420 on the web page, such that your pages are loading really, really quickly. 144 00:07:13,420 --> 00:07:16,620 So with that, let's start testing a little bit, 145 00:07:16,620 --> 00:07:18,520 playing around with a bit of the code. 146 00:07:18,520 --> 00:07:22,080 So the first thing we're going to do is in this app.js file, 147 00:07:22,080 --> 00:07:26,520 we're going to delete pretty much everything inside and just 148 00:07:26,520 --> 00:07:28,250 start from scratch. 149 00:07:28,250 --> 00:07:28,770 OK? 150 00:07:28,770 --> 00:07:32,430 And so notice that we have something called app and an extends component. 151 00:07:32,430 --> 00:07:36,630 This is saying that we're creating a new React component. 152 00:07:36,630 --> 00:07:38,730 And notice that we're also exporting it such 153 00:07:38,730 --> 00:07:44,350 that other files can import this app component and use them directly. 154 00:07:44,350 --> 00:07:48,240 So one of the first things that every component needs is a constructor 155 00:07:48,240 --> 00:07:51,330 and we'll declare it just like this. 156 00:07:51,330 --> 00:07:57,800 And inside this constructor, we're going to want to first call super, 157 00:07:57,800 --> 00:08:01,610 this is what allows us to use the keyword this in JavaScript. 158 00:08:01,610 --> 00:08:05,960 And confusion about this is pretty common, but I won't go into that right 159 00:08:05,960 --> 00:08:06,920 now. 160 00:08:06,920 --> 00:08:09,270 And then we're going to want to set our initial state. 161 00:08:09,270 --> 00:08:12,980 So in this example, I'm going to create some kind of trivial application 162 00:08:12,980 --> 00:08:15,290 where I'm going to have a button and then a number. 163 00:08:15,290 --> 00:08:18,534 And as I click the button, it's going to increment the number by 1. 164 00:08:18,534 --> 00:08:20,450 And I'm just going to keep clicking the button 165 00:08:20,450 --> 00:08:22,408 and it's going to keep incrementing the number. 166 00:08:22,408 --> 00:08:27,440 So it's a pretty trivial application but it shows a bit of the power of React. 167 00:08:27,440 --> 00:08:32,270 So to set the initial state, we're going to say this.state equals. 168 00:08:32,270 --> 00:08:38,179 And then this.state is going to be a dictionary or an object in JavaScript. 169 00:08:38,179 --> 00:08:40,760 And so I'm going to have something called the count 170 00:08:40,760 --> 00:08:42,679 and it's going to start with values 0. 171 00:08:42,679 --> 00:08:46,520 172 00:08:46,520 --> 00:08:47,930 So that's the constructor. 173 00:08:47,930 --> 00:08:51,720 We've set up everything we want initially this component to display. 174 00:08:51,720 --> 00:08:56,010 Now we need to create the render method that I spoke about before. 175 00:08:56,010 --> 00:08:58,200 So this is the same thing. 176 00:08:58,200 --> 00:09:00,020 So in the render method we're going to want 177 00:09:00,020 --> 00:09:03,900 to return HTML that we want to be displayed on the page. 178 00:09:03,900 --> 00:09:07,370 So we're going to return in this fashion and we always put parentheses 179 00:09:07,370 --> 00:09:11,020 to group things together properly. 180 00:09:11,020 --> 00:09:15,460 And we're going to return a div. 181 00:09:15,460 --> 00:09:18,690 And inside this div we're going to return a button. 182 00:09:18,690 --> 00:09:24,850 183 00:09:24,850 --> 00:09:29,410 And then here, just like we would do in GINGA, if you're familiar, 184 00:09:29,410 --> 00:09:34,900 we're going to be able to inject the actual code values into the HTML 185 00:09:34,900 --> 00:09:35,530 element. 186 00:09:35,530 --> 00:09:37,482 So here we're going to use the brace. 187 00:09:37,482 --> 00:09:39,190 And this is saying that we want to access 188 00:09:39,190 --> 00:09:41,770 something that's a JavaScript variable. 189 00:09:41,770 --> 00:09:45,970 And we're going to say this.state.count. 190 00:09:45,970 --> 00:09:49,540 So we're just going to put the count directly inside HTML. 191 00:09:49,540 --> 00:09:52,280 And then finally with this close this div. 192 00:09:52,280 --> 00:09:53,930 So if I save this-- 193 00:09:53,930 --> 00:09:57,010 If I go back to the HTML page, we'll notice 194 00:09:57,010 --> 00:10:01,477 that it's a little uglier than before but we now have the two things that I 195 00:10:01,477 --> 00:10:02,560 wanted in the first place. 196 00:10:02,560 --> 00:10:05,920 We wanted an increment button and the number zero. 197 00:10:05,920 --> 00:10:08,110 But right now, when I clicked the increment button, 198 00:10:08,110 --> 00:10:11,410 nothing's happening because I haven't defined any behavior for what 199 00:10:11,410 --> 00:10:13,250 happens when the button is clicked. 200 00:10:13,250 --> 00:10:14,160 So let's do that now. 201 00:10:14,160 --> 00:10:17,580 202 00:10:17,580 --> 00:10:21,180 So when we click the button we want a method to be called, 203 00:10:21,180 --> 00:10:24,992 some function to be called, which increments the count. 204 00:10:24,992 --> 00:10:26,700 And to achieve this we're going to create 205 00:10:26,700 --> 00:10:30,300 a new function within our component and we're just 206 00:10:30,300 --> 00:10:32,640 going to maybe call it increment. 207 00:10:32,640 --> 00:10:36,540 And here I'm going to use something called arrow notation. 208 00:10:36,540 --> 00:10:38,700 And what this is essentially doing is creating 209 00:10:38,700 --> 00:10:42,000 a new function, which takes in the parameters that I'm going to specify. 210 00:10:42,000 --> 00:10:43,837 So in this case, it takes in no parameters. 211 00:10:43,837 --> 00:10:45,420 And then I'm going to draw this arrow. 212 00:10:45,420 --> 00:10:48,900 This is saying this goes to this code block. 213 00:10:48,900 --> 00:10:51,210 And then just use it like a normal function. 214 00:10:51,210 --> 00:10:58,380 Some advantages of this is that it preserves this, like this or this. 215 00:10:58,380 --> 00:11:01,020 And if I had done it in the traditional way, 216 00:11:01,020 --> 00:11:03,600 like I did with the other two functions, then 217 00:11:03,600 --> 00:11:06,360 this would actually be the function itself 218 00:11:06,360 --> 00:11:09,060 instead of the overall component. 219 00:11:09,060 --> 00:11:11,610 The specifics of this aren't exactly important, 220 00:11:11,610 --> 00:11:13,770 so I'll gloss over them for now. 221 00:11:13,770 --> 00:11:16,860 But just know that using this arrow notation will save you some headache 222 00:11:16,860 --> 00:11:18,220 in the future. 223 00:11:18,220 --> 00:11:22,620 So in increment, we want to be able to update the count of the state. 224 00:11:22,620 --> 00:11:27,510 So we might be tempted to just say this dot state dot count plus plus. 225 00:11:27,510 --> 00:11:30,540 But because of the way the React functions, 226 00:11:30,540 --> 00:11:34,920 and it's always computing this optimal difference between the virtual dom 227 00:11:34,920 --> 00:11:38,010 and the actual dom, we want to do this in a functional way 228 00:11:38,010 --> 00:11:41,420 such that we're creating a pure copy of the state. 229 00:11:41,420 --> 00:11:46,540 So instead, we're going to say this dot set state. 230 00:11:46,540 --> 00:11:48,730 And this is a function that takes in a dictionary. 231 00:11:48,730 --> 00:11:51,650 And we're going to specify which fields we want to change. 232 00:11:51,650 --> 00:11:56,200 So we're going to set the count to now be this dot state dot count plus one. 233 00:11:56,200 --> 00:11:58,662 234 00:11:58,662 --> 00:12:00,370 Now that we have this increment function, 235 00:12:00,370 --> 00:12:03,440 we still need to put it on the button itself. 236 00:12:03,440 --> 00:12:06,940 So the button has a property called on click. 237 00:12:06,940 --> 00:12:10,000 And this takes in a function that we're going to specify. 238 00:12:10,000 --> 00:12:13,300 And again, we're going to use these special braces, such 239 00:12:13,300 --> 00:12:16,720 that we know we're injecting something directly from the JavaScript instead 240 00:12:16,720 --> 00:12:21,790 of an actual string here. 241 00:12:21,790 --> 00:12:24,580 So we're going to pass in this increment function. 242 00:12:24,580 --> 00:12:29,630 And this increment is a method of this, or the component itself. 243 00:12:29,630 --> 00:12:34,230 So what we're going to do is we're going to say this dot increment. 244 00:12:34,230 --> 00:12:38,010 And now if we go back to our page, when we click the button, 245 00:12:38,010 --> 00:12:43,420 we notice that the number is in fact increasing every time. 246 00:12:43,420 --> 00:12:47,890 So this is a really trivial application, but I think it shows and highlights 247 00:12:47,890 --> 00:12:50,370 the powers of React, because we notice that even 248 00:12:50,370 --> 00:12:52,870 though I'm clicking increment, and we're calling this render 249 00:12:52,870 --> 00:12:57,440 function every single time, the button is not changing. 250 00:12:57,440 --> 00:13:01,150 So what could naively be done is we could rerender the button, 251 00:13:01,150 --> 00:13:04,030 and we render the text every time we click the button. 252 00:13:04,030 --> 00:13:07,600 But instead, we noticed that only the number is changing. 253 00:13:07,600 --> 00:13:10,600 And this is React, again, doing that efficient computation 254 00:13:10,600 --> 00:13:15,310 to compute the exact difference that it needs, such that the difference is 255 00:13:15,310 --> 00:13:18,490 as fast as possible, OK? 256 00:13:18,490 --> 00:13:21,440 So that's this very trivial example. 257 00:13:21,440 --> 00:13:26,690 But I wasn't here to just show you how to create cookie clicker from scratch. 258 00:13:26,690 --> 00:13:33,020 So let's jump into a more complicated example, creating a todo application. 259 00:13:33,020 --> 00:13:35,390 So again, we're going to want to scrap everything 260 00:13:35,390 --> 00:13:40,977 that we've done so far because we don't need this anymore. 261 00:13:40,977 --> 00:13:43,060 So we're going to do is we're going to start over. 262 00:13:43,060 --> 00:13:50,400 We'll just delete all of this, and just start from scratch. 263 00:13:50,400 --> 00:13:53,380 So, again, we're going to need a constructor for our app. 264 00:13:53,380 --> 00:13:55,771 265 00:13:55,771 --> 00:13:57,270 And we're going to call super again. 266 00:13:57,270 --> 00:14:00,600 These are just things that we have to do every time that we have a new React 267 00:14:00,600 --> 00:14:01,870 application. 268 00:14:01,870 --> 00:14:03,820 But now our state is going to be different. 269 00:14:03,820 --> 00:14:06,360 So I'm creating a todo list. 270 00:14:06,360 --> 00:14:11,310 And a todo list is essentially just exactly that, a list of todo's. 271 00:14:11,310 --> 00:14:13,920 So the state should hold all that information, all 272 00:14:13,920 --> 00:14:17,140 the todo's that we've added so far. 273 00:14:17,140 --> 00:14:21,060 So what we can do is we can say this dot state equals. 274 00:14:21,060 --> 00:14:22,290 And then we just have todo's. 275 00:14:22,290 --> 00:14:26,080 276 00:14:26,080 --> 00:14:29,270 And this is going to start as an empty list. 277 00:14:29,270 --> 00:14:31,550 So that's going to be our state. 278 00:14:31,550 --> 00:14:38,440 And then in render, we're going to want to return those todo's. 279 00:14:38,440 --> 00:14:45,690 And also, we're going to want to offer a way for the user to input new todo's. 280 00:14:45,690 --> 00:14:51,480 So we'll have an input for them, and we'll maybe put a placeholder. 281 00:14:51,480 --> 00:14:56,590 282 00:14:56,590 --> 00:15:00,620 And we're going to have a button for them to be able to-- 283 00:15:00,620 --> 00:15:03,950 sorry about this. 284 00:15:03,950 --> 00:15:09,010 We're going to have a button for them to be able to add the todo. 285 00:15:09,010 --> 00:15:10,930 And then finally, we're going to want to have 286 00:15:10,930 --> 00:15:13,940 a list of todo's available for them. 287 00:15:13,940 --> 00:15:17,440 So right now, we're going to gloss over this step. 288 00:15:17,440 --> 00:15:19,420 We'll come revisit it again. 289 00:15:19,420 --> 00:15:23,350 But because of React's nice syntax, we can actually 290 00:15:23,350 --> 00:15:25,750 put some conditional rendering here. 291 00:15:25,750 --> 00:15:28,930 So we can check using the ternary operator in JavaScript 292 00:15:28,930 --> 00:15:31,720 and the ternary operator in all languages 293 00:15:31,720 --> 00:15:38,560 whether this dot state dot todo's dot length is equal to zero. 294 00:15:38,560 --> 00:15:40,300 And we're going to ask, is it equal to 0? 295 00:15:40,300 --> 00:15:44,020 And if it's not-- if it is equal to zero, then let's return the string. 296 00:15:44,020 --> 00:15:46,390 No todo's yet. 297 00:15:46,390 --> 00:15:49,080 And otherwise, we're going to return-- 298 00:15:49,080 --> 00:15:55,090 you still have some todo left, OK? 299 00:15:55,090 --> 00:15:58,220 And let's see what this renders right now. 300 00:15:58,220 --> 00:16:03,500 So OK, we're having some problems here. 301 00:16:03,500 --> 00:16:07,220 Let's see, no todo's yet. 302 00:16:07,220 --> 00:16:09,740 Oh sorry, I forgot to put a closing tag on this. 303 00:16:09,740 --> 00:16:17,640 304 00:16:17,640 --> 00:16:23,492 OK, so we have a crude todo method, or todo list app now. 305 00:16:23,492 --> 00:16:26,200 However, we've typed something here, and we click the Add button. 306 00:16:26,200 --> 00:16:29,690 Again, we notice that same thing, that nothing is happening, 307 00:16:29,690 --> 00:16:34,100 and furthermore, that this is not changing. 308 00:16:34,100 --> 00:16:38,450 But notice still that this says no todo's yet instead of you have some 309 00:16:38,450 --> 00:16:39,150 todo's. 310 00:16:39,150 --> 00:16:41,580 So we have some logic going on here. 311 00:16:41,580 --> 00:16:45,270 And that's just highlighting a little bit of the power there. 312 00:16:45,270 --> 00:16:47,971 So now I'm going to start moving a little bit quicker since I 313 00:16:47,971 --> 00:16:49,220 don't want to run out of time. 314 00:16:49,220 --> 00:16:51,980 315 00:16:51,980 --> 00:16:53,980 So just to clean this up just a tad we're 316 00:16:53,980 --> 00:16:56,730 going to add a break here so that the todo's are in the next line. 317 00:16:56,730 --> 00:16:59,500 318 00:16:59,500 --> 00:17:05,180 So in this input, we want to hold the next todo that the people want to add. 319 00:17:05,180 --> 00:17:07,780 So that's also a part of the state, actually. 320 00:17:07,780 --> 00:17:09,920 And we want to include this in the state. 321 00:17:09,920 --> 00:17:13,410 So what we're going to do is we're going to say current todo. 322 00:17:13,410 --> 00:17:17,609 And this is going to be just some string, initially the empty string. 323 00:17:17,609 --> 00:17:24,750 And we'll let the value of this input be this dot state dot current todo. 324 00:17:24,750 --> 00:17:28,500 Now, if I go back to the application, and I now try and type, 325 00:17:28,500 --> 00:17:30,990 I'm hitting the keys now, but nothing is showing up 326 00:17:30,990 --> 00:17:33,220 because the state is not changing. 327 00:17:33,220 --> 00:17:37,770 So the input, the value of this input is being bound to a state, 328 00:17:37,770 --> 00:17:39,990 and that state is unchanging. 329 00:17:39,990 --> 00:17:43,672 So now we need to add a new method here. 330 00:17:43,672 --> 00:17:44,380 Sorry about that. 331 00:17:44,380 --> 00:17:48,600 332 00:17:48,600 --> 00:17:53,980 So we need to add a new method here such that when this is changed 333 00:17:53,980 --> 00:17:56,730 we are actually changing the value of the state. 334 00:17:56,730 --> 00:17:58,230 So we're going to add it on change. 335 00:17:58,230 --> 00:18:01,210 And this means that we're going to need to declare a new function. 336 00:18:01,210 --> 00:18:03,700 So on change is this going to trigger a function 337 00:18:03,700 --> 00:18:05,830 and pass in something called an event. 338 00:18:05,830 --> 00:18:09,480 And this event essentially tells what the input was changed to. 339 00:18:09,480 --> 00:18:15,030 This is very specific, but we'll say on input change equals e. 340 00:18:15,030 --> 00:18:17,370 So this is taking in an event. 341 00:18:17,370 --> 00:18:21,660 And, again, this is bringing up that es6 object or anonymous function 342 00:18:21,660 --> 00:18:22,770 definition. 343 00:18:22,770 --> 00:18:27,330 And we're going to say, OK, so this dot set state, again, 344 00:18:27,330 --> 00:18:29,610 calling that set state function. 345 00:18:29,610 --> 00:18:38,090 And we're going to say current todo becomes e dot target dot value. 346 00:18:38,090 --> 00:18:40,670 And so we're going to pass in the same function down here. 347 00:18:40,670 --> 00:18:43,840 348 00:18:43,840 --> 00:18:47,320 And now hopefully when we change the value of the input, 349 00:18:47,320 --> 00:18:50,800 we'll see that, in fact, OK, my typing is showing up. 350 00:18:50,800 --> 00:18:54,370 So now all we need to do to actually get some todo's to show up down here, 351 00:18:54,370 --> 00:18:57,010 or maybe to change this no todo's yet, is to implement 352 00:18:57,010 --> 00:18:59,949 some functionality on the Add button. 353 00:18:59,949 --> 00:19:02,240 So, again, we're going to want to declare a new method. 354 00:19:02,240 --> 00:19:06,280 And here, we're going to see something about, again, not 355 00:19:06,280 --> 00:19:11,570 doing pure changes to the state instead of mutative changes. 356 00:19:11,570 --> 00:19:13,960 So we're going to say on click. 357 00:19:13,960 --> 00:19:16,840 This is just going to be a function that takes in no parameters. 358 00:19:16,840 --> 00:19:20,140 We're going to want to create a new list of todo's, which 359 00:19:20,140 --> 00:19:25,310 is the old list with the new current to do appended to it. 360 00:19:25,310 --> 00:19:28,990 So we don't want to actually modify the list in place. 361 00:19:28,990 --> 00:19:30,800 Instead, we want to create a copy. 362 00:19:30,800 --> 00:19:37,400 So we'll say todo's copy is equal to this dot state dot todo's dot slice. 363 00:19:37,400 --> 00:19:41,590 And this will create an exact copy of the original todo's list. 364 00:19:41,590 --> 00:19:46,040 Then on the todo's copy, we're going to want to push 365 00:19:46,040 --> 00:19:49,720 this dot state dot current todo. 366 00:19:49,720 --> 00:19:53,390 So this is adding the new todo to the end of the todo list. 367 00:19:53,390 --> 00:19:57,090 And then finally, we're going to want to set the state properly. 368 00:19:57,090 --> 00:20:01,520 So we're going to say todo's is going to become the todo's copy. 369 00:20:01,520 --> 00:20:04,630 370 00:20:04,630 --> 00:20:08,740 And we're going to want to clear out the old todo or the current todo. 371 00:20:08,740 --> 00:20:13,540 So we're going to stay current todo becomes the empty string yet again. 372 00:20:13,540 --> 00:20:19,065 So now if we pass in this function on click to the button, 373 00:20:19,065 --> 00:20:24,140 and we say on click equals this dot on click, 374 00:20:24,140 --> 00:20:25,940 we're going to see something happen. 375 00:20:25,940 --> 00:20:31,630 So we're going to enter a todo here, and we're going to click Add. 376 00:20:31,630 --> 00:20:34,240 And notice that we haven't exactly displayed it, 377 00:20:34,240 --> 00:20:36,880 but now this has triggered some change in the state. 378 00:20:36,880 --> 00:20:40,960 And this conditional rendering is taking care of something behind the scenes. 379 00:20:40,960 --> 00:20:44,290 And we're starting to see the hint of something actually dynamic 380 00:20:44,290 --> 00:20:46,550 going on in our application. 381 00:20:46,550 --> 00:20:48,010 So let's continue on this trend. 382 00:20:48,010 --> 00:20:50,800 We have a bunch of todo's in our state. 383 00:20:50,800 --> 00:20:53,890 We just need to decide how we want to display them. 384 00:20:53,890 --> 00:20:57,070 So I think a natural way to display them is to create 385 00:20:57,070 --> 00:20:59,680 an unordered list, a bulleted list. 386 00:20:59,680 --> 00:21:02,590 And so we'll do exactly that. 387 00:21:02,590 --> 00:21:08,250 So in this render, we're going to say we want a list of all the todo's. 388 00:21:08,250 --> 00:21:11,760 So we can do this by doing a JavaScript map. 389 00:21:11,760 --> 00:21:15,160 And we're going to say let bulleted todo's-- 390 00:21:15,160 --> 00:21:19,410 391 00:21:19,410 --> 00:21:24,270 it becomes this dot state dot todo's dot map. 392 00:21:24,270 --> 00:21:31,092 And map is going to take in an element and an index. 393 00:21:31,092 --> 00:21:32,550 And it's going to return something. 394 00:21:32,550 --> 00:21:35,920 And now here, again, we're going to see this combination of HTML 395 00:21:35,920 --> 00:21:37,800 mixed with JavaScript. 396 00:21:37,800 --> 00:21:42,210 So we're going to, for each element, return some kind 397 00:21:42,210 --> 00:21:45,670 of JavaScript or HTML element. 398 00:21:45,670 --> 00:21:51,090 So we're going to return a list, and we'll let the value be e, 399 00:21:51,090 --> 00:21:52,940 and then we'll just close the list element. 400 00:21:52,940 --> 00:21:55,740 401 00:21:55,740 --> 00:22:00,060 And furthermore, when we do loops like this and React assisted 402 00:22:00,060 --> 00:22:02,460 with this computational difference, we're 403 00:22:02,460 --> 00:22:04,890 going to add something called the key. 404 00:22:04,890 --> 00:22:08,040 And the key can be anything as long as it's a unique per-iterated item. 405 00:22:08,040 --> 00:22:16,120 So in this case, I've chosen the i to be just the index inside this list. 406 00:22:16,120 --> 00:22:19,270 And then finally, we're going to want to inject this into the state. 407 00:22:19,270 --> 00:22:23,200 So here, where before I said if there are todo's then 408 00:22:23,200 --> 00:22:29,140 we'll see you still have some todo's, I'm going to change this to become UL 409 00:22:29,140 --> 00:22:41,330 and then followed by bulleted todo's, OK? 410 00:22:41,330 --> 00:22:43,240 And then we're going to see-- 411 00:22:43,240 --> 00:22:47,720 so now if we add, we're going to see that now we're 412 00:22:47,720 --> 00:22:49,160 adding things to the element. 413 00:22:49,160 --> 00:22:52,580 And notice again, that this is a rendering in exactly the way you would 414 00:22:52,580 --> 00:22:57,960 hope it would, such that when we add new todo's another thing to do, 415 00:22:57,960 --> 00:23:00,510 this is efficiently calculating the things that we 416 00:23:00,510 --> 00:23:02,940 need to do between each render. 417 00:23:02,940 --> 00:23:06,240 So even though I'm rerendering the whole page for the virtual dom, 418 00:23:06,240 --> 00:23:09,060 it's only appending exactly what the differences is. 419 00:23:09,060 --> 00:23:10,860 It's only appending the new todo. 420 00:23:10,860 --> 00:23:13,120 It's not redoing the whole entire list. 421 00:23:13,120 --> 00:23:20,400 So if I add a bunch of these rapidly, it's 422 00:23:20,400 --> 00:23:23,790 not going to recompute the whole entire thing. 423 00:23:23,790 --> 00:23:27,750 So that's, again, hinting at the power of what React can do. 424 00:23:27,750 --> 00:23:31,860 But I feel like this todo application is still missing some things. 425 00:23:31,860 --> 00:23:35,260 And that's the ability to delete things that we've already added. 426 00:23:35,260 --> 00:23:37,010 So again, this is a trivial functionality, 427 00:23:37,010 --> 00:23:38,450 but maybe we want to add it. 428 00:23:38,450 --> 00:23:40,710 So first, visually, how can we add this? 429 00:23:40,710 --> 00:23:45,080 So instead of in each list element, we can just say have a button. 430 00:23:45,080 --> 00:23:48,300 431 00:23:48,300 --> 00:23:51,120 And it just can show the value x. 432 00:23:51,120 --> 00:23:55,620 433 00:23:55,620 --> 00:24:00,000 And now this is going to show an x next to each thing. 434 00:24:00,000 --> 00:24:02,970 So if we-- supposedly, ideally we would want 435 00:24:02,970 --> 00:24:05,670 this to delete it when we click the x. 436 00:24:05,670 --> 00:24:08,829 Of course, that functionality hasn't been implemented yet. 437 00:24:08,829 --> 00:24:10,620 But now this is starting to get complicated 438 00:24:10,620 --> 00:24:13,052 because each list needs to-- 439 00:24:13,052 --> 00:24:14,760 each list element needs to have a button. 440 00:24:14,760 --> 00:24:16,920 And this button needs to know which thing to delete 441 00:24:16,920 --> 00:24:18,270 and when it needs to delete it. 442 00:24:18,270 --> 00:24:20,430 We need to know how to delete it from the state. 443 00:24:20,430 --> 00:24:23,100 So this looks like a good opportunity to create 444 00:24:23,100 --> 00:24:27,210 a new component, a new component to nest inside our larger app, 445 00:24:27,210 --> 00:24:30,700 such that this makes the development a little easier. 446 00:24:30,700 --> 00:24:31,960 So we'll do that as well. 447 00:24:31,960 --> 00:24:37,900 So we can go back to our folder in the command line. 448 00:24:37,900 --> 00:24:40,740 And if we create a new file in the source folder-- 449 00:24:40,740 --> 00:24:42,280 and we can call it single todo. 450 00:24:42,280 --> 00:24:45,610 451 00:24:45,610 --> 00:24:46,480 And we go back. 452 00:24:46,480 --> 00:24:49,870 And now we can-- again, in our search folder, 453 00:24:49,870 --> 00:24:51,600 we'll see that this has been created. 454 00:24:51,600 --> 00:24:54,100 And this is a good chance to create something from scratch 455 00:24:54,100 --> 00:24:57,310 and just see what exactly is going on. 456 00:24:57,310 --> 00:24:59,930 So let me quick make a quick change. 457 00:24:59,930 --> 00:25:03,307 So with every React component-- and I should've 458 00:25:03,307 --> 00:25:04,640 mentioned this at the beginning. 459 00:25:04,640 --> 00:25:12,900 But we need to import React and the component from React. 460 00:25:12,900 --> 00:25:14,490 And what this is doing is-- 461 00:25:14,490 --> 00:25:18,510 importing React itself lets us type in this JSX style language, 462 00:25:18,510 --> 00:25:21,510 this mixture of JavaScript and HTML. 463 00:25:21,510 --> 00:25:27,580 And then the component is what lets us create a new app, or a new component. 464 00:25:27,580 --> 00:25:31,230 And then we're going to have to create a class much like we did in here. 465 00:25:31,230 --> 00:25:33,140 So this was called class app. 466 00:25:33,140 --> 00:25:34,231 And it extends component. 467 00:25:34,231 --> 00:25:35,980 And we're going to do the same thing here. 468 00:25:35,980 --> 00:25:41,430 We're going to create a class single todo, which extends component. 469 00:25:41,430 --> 00:25:47,870 And we're going to do the same thing here where we create a constructor. 470 00:25:47,870 --> 00:25:50,630 And we don't actually need to do anything, because everything 471 00:25:50,630 --> 00:25:54,500 that this component has, we're going to be passing down to it via something 472 00:25:54,500 --> 00:25:56,060 called props. 473 00:25:56,060 --> 00:25:58,640 And so props are different than state because state 474 00:25:58,640 --> 00:26:03,020 is internal to the component, whereas props are passed in from the outside. 475 00:26:03,020 --> 00:26:06,390 And we'll see how exactly those are passed in later. 476 00:26:06,390 --> 00:26:10,936 And then, of course, this needs as well a render method. 477 00:26:10,936 --> 00:26:12,310 And so the same thing can happen. 478 00:26:12,310 --> 00:26:14,140 So we can just return. 479 00:26:14,140 --> 00:26:16,960 And for now, we'll just do something similar 480 00:26:16,960 --> 00:26:22,240 to what we did above, so a list element, but instead of e now, 481 00:26:22,240 --> 00:26:26,530 we'll just say this dot prop dot todo. 482 00:26:26,530 --> 00:26:33,250 And we'll have a button, which for now, again, just shows the thing x. 483 00:26:33,250 --> 00:26:36,860 And then we'll finish the list element. 484 00:26:36,860 --> 00:26:40,940 And then finally, for this to be able to be used in other components, 485 00:26:40,940 --> 00:26:43,070 we're going to want to export this. 486 00:26:43,070 --> 00:26:48,700 And so we're going to say export default single todo, 487 00:26:48,700 --> 00:26:51,520 much like we did in-- again, this is very similar to how 488 00:26:51,520 --> 00:26:55,760 we are working in app dot JS. 489 00:26:55,760 --> 00:26:59,540 So now that we have created this new component, 490 00:26:59,540 --> 00:27:05,809 we're going to want to import it inside of our other larger component, the app. 491 00:27:05,809 --> 00:27:07,100 So how are we going to do this? 492 00:27:07,100 --> 00:27:08,630 The syntax is as follows. 493 00:27:08,630 --> 00:27:15,870 At the very top, we're just going to say import single todo from, 494 00:27:15,870 --> 00:27:18,690 and then we'll say dot slash single todo. 495 00:27:18,690 --> 00:27:22,750 And what this is doing is it's looking in the source folder on the left here, 496 00:27:22,750 --> 00:27:25,780 and it's looking for something called single todo dot JS. 497 00:27:25,780 --> 00:27:27,550 The JS is optional. 498 00:27:27,550 --> 00:27:33,280 And it's going to import exactly what we exported by default, the single todo. 499 00:27:33,280 --> 00:27:36,490 And now inside of our render, we can call this. 500 00:27:36,490 --> 00:27:40,600 Instead of returning in this map the list element, 501 00:27:40,600 --> 00:27:46,130 we can just return a single todo. 502 00:27:46,130 --> 00:27:48,050 So essentially, by creating this component, 503 00:27:48,050 --> 00:27:51,590 we've created ourselves a custom HTML component 504 00:27:51,590 --> 00:27:55,160 that we can parametrised in exactly the ways that we want. 505 00:27:55,160 --> 00:27:58,630 And so now we can pass down this thing called a prop. 506 00:27:58,630 --> 00:28:00,780 And notice that this prop is called to do. 507 00:28:00,780 --> 00:28:03,620 And so what we have done by giving it this prop 508 00:28:03,620 --> 00:28:06,245 is we can pass in something called todo, and we 509 00:28:06,245 --> 00:28:08,430 can give it exactly what we want. 510 00:28:08,430 --> 00:28:12,230 And then we can close this and return. 511 00:28:12,230 --> 00:28:15,430 So I haven't added any additional functionality, but what I've done 512 00:28:15,430 --> 00:28:21,620 is abstracted away the features of this component into something else. 513 00:28:21,620 --> 00:28:26,180 And so, OK, I have a compilation error here. 514 00:28:26,180 --> 00:28:31,270 So it's advising I put super, and I will do that. 515 00:28:31,270 --> 00:28:33,920 OK, so now we're back to our original application. 516 00:28:33,920 --> 00:28:37,150 And again, if I add something-- 517 00:28:37,150 --> 00:28:41,236 it's saying this dot prop. 518 00:28:41,236 --> 00:28:43,240 Sorry, my apologies. 519 00:28:43,240 --> 00:28:46,820 This should be props not prompt. 520 00:28:46,820 --> 00:28:50,020 So if I go back here-- 521 00:28:50,020 --> 00:28:53,600 OK, so we see that we've achieved, again, our original functionality. 522 00:28:53,600 --> 00:28:58,259 And we're going to now want to pass in also a function that this-- 523 00:28:58,259 --> 00:29:00,050 we're going to want to pass down a function 524 00:29:00,050 --> 00:29:06,850 that this can use to achieve the deletion that we want. 525 00:29:06,850 --> 00:29:12,210 So in our top level app, we're going to let the state of this application 526 00:29:12,210 --> 00:29:14,550 be the single source of truth. 527 00:29:14,550 --> 00:29:18,210 So this top app is delegating everything and every bottom, 528 00:29:18,210 --> 00:29:20,740 every component that's nested within it. 529 00:29:20,740 --> 00:29:25,530 So here, we're going to say delete todo, and this 530 00:29:25,530 --> 00:29:28,680 is going to take in the index of a todo to delete. 531 00:29:28,680 --> 00:29:33,903 And again, we're going to want to create a copy of the current list of todo's. 532 00:29:33,903 --> 00:29:35,736 And so what we're going to do is we're going 533 00:29:35,736 --> 00:29:37,319 to do the same thing as we did before. 534 00:29:37,319 --> 00:29:44,465 535 00:29:44,465 --> 00:29:46,090 And then we're going to want to delete. 536 00:29:46,090 --> 00:29:48,920 And this is just a JavaScript syntax thing. 537 00:29:48,920 --> 00:29:54,340 But we can do this by doing splice i comma one. 538 00:29:54,340 --> 00:30:05,410 And then we're going to set the state to be this new list of todo's, OK? 539 00:30:05,410 --> 00:30:11,290 Then we're going to want to be able to pass this down to each of the smaller 540 00:30:11,290 --> 00:30:13,360 single todo components. 541 00:30:13,360 --> 00:30:17,160 So on this buttons click, we're going to want 542 00:30:17,160 --> 00:30:20,340 to just say this dot props dot delete. 543 00:30:20,340 --> 00:30:24,150 And this component has no idea what this actually does. 544 00:30:24,150 --> 00:30:26,880 But the global component, the parent component 545 00:30:26,880 --> 00:30:29,370 is going to tell it exactly what it should do. 546 00:30:29,370 --> 00:30:33,180 So now we're going to pass in a function or a prop called delete. 547 00:30:33,180 --> 00:30:36,135 And this prop can be whatever we want it to be. 548 00:30:36,135 --> 00:30:38,010 So in this case, I'm going to create it to be 549 00:30:38,010 --> 00:30:43,140 a new function, an anonymous function, such that when this is deleted, 550 00:30:43,140 --> 00:30:45,510 it's going to trigger this function, and this 551 00:30:45,510 --> 00:30:51,480 is going to call this dot delete to do with the variable i, 552 00:30:51,480 --> 00:30:56,800 because i is the current index of this, OK? 553 00:30:56,800 --> 00:31:05,490 And so now, if we go back, and we add a todo, and we add it, 554 00:31:05,490 --> 00:31:09,420 and we click the x, we notice that it's now been deleted properly. 555 00:31:09,420 --> 00:31:19,840 And so if we say something to do, something else, something thrice, 556 00:31:19,840 --> 00:31:23,240 we can delete them one by one in whatever order we want. 557 00:31:23,240 --> 00:31:28,330 And again, these are just triggering the things that we're passing down to it. 558 00:31:28,330 --> 00:31:32,260 And this is, again, I'm trying to express the power of React. 559 00:31:32,260 --> 00:31:36,790 But it's just this declarative way to describe the user interface 560 00:31:36,790 --> 00:31:38,200 that you want. 561 00:31:38,200 --> 00:31:43,150 So at any point, I'm just telling exactly what I want to be happening. 562 00:31:43,150 --> 00:31:46,790 OK, so one last thing on this single todo component, 563 00:31:46,790 --> 00:31:50,890 notice that this has no internal state because everything about this 564 00:31:50,890 --> 00:31:54,110 is determined by what the parent says it should be. 565 00:31:54,110 --> 00:31:57,790 And so instead of creating an actual class, we can do something 566 00:31:57,790 --> 00:32:00,100 called a functional component. 567 00:32:00,100 --> 00:32:03,850 And instead of creating a class, we'll now create a function. 568 00:32:03,850 --> 00:32:06,210 So we can say const single todo. 569 00:32:06,210 --> 00:32:09,460 And this const keyword is, again, just another feature of JavaScript. 570 00:32:09,460 --> 00:32:11,950 It just means that this cannot be changed. 571 00:32:11,950 --> 00:32:14,020 And it's going to take in only one argument. 572 00:32:14,020 --> 00:32:16,120 And that's the props. 573 00:32:16,120 --> 00:32:19,120 And then instead of doing a Render method, 574 00:32:19,120 --> 00:32:21,500 it just simply returns exactly what we want. 575 00:32:21,500 --> 00:32:24,050 576 00:32:24,050 --> 00:32:46,089 And so if we just copy/paste this line, and we comment out this, 577 00:32:46,089 --> 00:32:48,130 then again, we're going to get the same behavior. 578 00:32:48,130 --> 00:32:51,640 579 00:32:51,640 --> 00:32:55,290 OK, oh, yeah, sorry. 580 00:32:55,290 --> 00:32:59,980 So now because we're passing in the props as this argument to the function, 581 00:32:59,980 --> 00:33:02,040 There's no need to say this anymore. 582 00:33:02,040 --> 00:33:04,560 We can just call the props directly because the props 583 00:33:04,560 --> 00:33:06,330 are readily available to us. 584 00:33:06,330 --> 00:33:09,780 And they're not a property of this, but they're rather just an argument 585 00:33:09,780 --> 00:33:11,930 passed to this function. 586 00:33:11,930 --> 00:33:18,320 So we change this, and we try again, we'll now 587 00:33:18,320 --> 00:33:25,340 see that we have all these various things that we can delete, add, 588 00:33:25,340 --> 00:33:30,855 and so we have in just the course of 20 minutes, created from nothing 589 00:33:30,855 --> 00:33:33,120 a todo list in React. 590 00:33:33,120 --> 00:33:41,950 And so now just to wrap things up, so we created this simple todo application. 591 00:33:41,950 --> 00:33:44,410 And in the process, we learned about a couple of things. 592 00:33:44,410 --> 00:33:45,659 So we learned about the props. 593 00:33:45,659 --> 00:33:48,850 And these, instead of internal state, like something 594 00:33:48,850 --> 00:33:52,360 managed within a component, they're passed from the outside 595 00:33:52,360 --> 00:33:53,260 to the component. 596 00:33:53,260 --> 00:33:55,150 And we see that by creating this component, 597 00:33:55,150 --> 00:33:59,671 we're essentially creating a custom HTML tag that we can parametrise in any way. 598 00:33:59,671 --> 00:34:01,420 And the component in general should not be 599 00:34:01,420 --> 00:34:04,000 able to change the props that's it's given. 600 00:34:04,000 --> 00:34:07,750 And also, we've seen these functional components, which only accept props 601 00:34:07,750 --> 00:34:09,489 and they have no internal state. 602 00:34:09,489 --> 00:34:14,533 And in general, we want things to be as pure and as functional as possible. 603 00:34:14,533 --> 00:34:16,449 We want to have only a single source of truth. 604 00:34:16,449 --> 00:34:19,017 We don't want to have multiple things with multiple states 605 00:34:19,017 --> 00:34:20,350 and they can be in disagreement. 606 00:34:20,350 --> 00:34:22,900 Instead, we want to have a single source of truth, 607 00:34:22,900 --> 00:34:25,659 and then that delegates what everything else should look like. 608 00:34:25,659 --> 00:34:29,889 And React will handle all the rendering again. 609 00:34:29,889 --> 00:34:32,050 So some next steps-- so this is, of course, 610 00:34:32,050 --> 00:34:34,780 a very, very, very simple application. 611 00:34:34,780 --> 00:34:37,750 But there are limitless things that you can do with React. 612 00:34:37,750 --> 00:34:40,239 And Facebook and a lot of other companies 613 00:34:40,239 --> 00:34:42,580 have been exploring exactly these avenues. 614 00:34:42,580 --> 00:34:45,340 So something else to look into is called Redux, 615 00:34:45,340 --> 00:34:47,560 which is a global state container. 616 00:34:47,560 --> 00:34:50,260 And this is achieving exactly what I was describing before, 617 00:34:50,260 --> 00:34:52,150 this single source of truth. 618 00:34:52,150 --> 00:34:55,150 So instead of having different components managing 619 00:34:55,150 --> 00:34:58,270 different parts of the state, we just have a single container 620 00:34:58,270 --> 00:34:59,680 of all the state. 621 00:34:59,680 --> 00:35:04,180 And a particular component subscribes to a part of the state. 622 00:35:04,180 --> 00:35:07,180 And this is passed down to it as a prop. 623 00:35:07,180 --> 00:35:10,630 And also, we can look into something called React Router, which 624 00:35:10,630 --> 00:35:13,630 allows for things called single-page applications, where 625 00:35:13,630 --> 00:35:18,100 the URL is dynamically changing, but the page itself 626 00:35:18,100 --> 00:35:19,810 is actually never refreshing. 627 00:35:19,810 --> 00:35:23,920 And so this has huge implications about how web pages can load 628 00:35:23,920 --> 00:35:25,900 and how when we go to different web pages, 629 00:35:25,900 --> 00:35:28,680 we don't actually have to rerender the whole web page, 630 00:35:28,680 --> 00:35:32,980 we can only change the part that is actually changing, OK? 631 00:35:32,980 --> 00:35:36,450 So if you have any questions, you're free to ask them right now, 632 00:35:36,450 --> 00:35:38,070 or you can reach me at my email. 633 00:35:38,070 --> 00:35:39,960 This is my email here. 634 00:35:39,960 --> 00:35:43,660 Send me questions about my seminar, send me feedback, 635 00:35:43,660 --> 00:35:47,065 but this has been an introduction to front-end development with React. 636 00:35:47,065 --> 00:35:50,260 And thank you very much listening. 637 00:35:50,260 --> 00:35:51,235