1 00:00:00,000 --> 00:00:02,958 [MUSIC PLAYING] 2 00:00:02,958 --> 00:00:17,270 3 00:00:17,270 --> 00:00:19,640 JORDAN HAYASHI: Hello, and welcome for Lecture Two-- 4 00:00:19,640 --> 00:00:22,040 React, Props, and State. 5 00:00:22,040 --> 00:00:25,760 So last week, we talked about a bunch of different topics, one being ES6 6 00:00:25,760 --> 00:00:28,450 and beyond and the syntax that comes with each of those. 7 00:00:28,450 --> 00:00:31,070 We talked about closures, the process by which 8 00:00:31,070 --> 00:00:36,200 a function can reference variables declared in a parent function. 9 00:00:36,200 --> 00:00:39,880 We talked about IIFEs, Immediately Invoked Function Expressions. 10 00:00:39,880 --> 00:00:43,555 We talked about using functions as first-class citizens. 11 00:00:43,555 --> 00:00:45,680 We talked about the execution stack and event loop, 12 00:00:45,680 --> 00:00:48,500 and how JavaScript actually executes in browsers. 13 00:00:48,500 --> 00:00:51,800 We talked about callbacks, promises, and async/await, all of the different ways 14 00:00:51,800 --> 00:00:53,690 to handle asynchronous actions. 15 00:00:53,690 --> 00:00:57,650 And last, we talked about this and the way that this is bound. 16 00:00:57,650 --> 00:01:00,880 This week, we're going to start with classes, which 17 00:01:00,880 --> 00:01:04,519 is a syntax I was introduced in ES6. 18 00:01:04,519 --> 00:01:09,486 It simplifies the defining of complex objects that have their own prototypes. 19 00:01:09,486 --> 00:01:11,360 And with that, you have two different things. 20 00:01:11,360 --> 00:01:12,890 You have classes and instances. 21 00:01:12,890 --> 00:01:16,620 Classes is basically an abstract thing that you can declare, 22 00:01:16,620 --> 00:01:19,400 basically saying, hey, by the way, any of these objects 23 00:01:19,400 --> 00:01:22,430 that you create will have these methods associated with them. 24 00:01:22,430 --> 00:01:26,570 Or they might have these things attached to them that you can use. 25 00:01:26,570 --> 00:01:29,210 And then when you actually turn an abstract class 26 00:01:29,210 --> 00:01:33,630 into an instance of that object, that is called an instance. 27 00:01:33,630 --> 00:01:39,750 An example of that would be the difference between the date, 28 00:01:39,750 --> 00:01:42,410 which is a function-- it's a class-- 29 00:01:42,410 --> 00:01:43,640 or a new date. 30 00:01:43,640 --> 00:01:48,180 So if you do something like const d equals new date, 31 00:01:48,180 --> 00:01:51,560 then now you have a date object itself. 32 00:01:51,560 --> 00:01:54,697 And so Date with a capital D would be a class in that case, 33 00:01:54,697 --> 00:01:56,405 and the lowercase D would be an instance. 34 00:01:56,405 --> 00:02:00,610 35 00:02:00,610 --> 00:02:04,150 These instances have things attached to them, like methods and properties, 36 00:02:04,150 --> 00:02:06,550 and the classes have things like static methods. 37 00:02:06,550 --> 00:02:08,620 And so methods are basically anything that's 38 00:02:08,620 --> 00:02:12,740 a function that can be invoked on any of the instances. 39 00:02:12,740 --> 00:02:18,980 You can think of that as a function on the classes prototype. 40 00:02:18,980 --> 00:02:21,580 A static method, on the other hand, is basically 41 00:02:21,580 --> 00:02:24,880 a method that doesn't really care about the particular instance of a class. 42 00:02:24,880 --> 00:02:35,020 Instead, it cares about all instances of the class, so something like Date.now, 43 00:02:35,020 --> 00:02:38,800 where you don't really care about a specific instance of a date 44 00:02:38,800 --> 00:02:40,720 if you just want to get the time. 45 00:02:40,720 --> 00:02:43,340 Whereas something like turning a date to a string-- 46 00:02:43,340 --> 00:02:46,965 in this class, d.toString-- 47 00:02:46,965 --> 00:02:49,090 in that case, you do care about the particular date 48 00:02:49,090 --> 00:02:50,560 object that you're working on. 49 00:02:50,560 --> 00:02:53,470 And so when you do capital Date.now, that's 50 00:02:53,470 --> 00:02:56,440 considered a static method, since it's attached to the class. 51 00:02:56,440 --> 00:02:58,960 And if you do something like date-- 52 00:02:58,960 --> 00:03:03,340 lowercase d-- dot toString, that really matters which instance you're attached 53 00:03:03,340 --> 00:03:06,050 to, and therefore, that's a method. 54 00:03:06,050 --> 00:03:09,910 Lastly, we have properties, which are like methods. 55 00:03:09,910 --> 00:03:13,590 But rather than being functions, they're actually just values, 56 00:03:13,590 --> 00:03:18,140 and they are associated with a particular instance of a class. 57 00:03:18,140 --> 00:03:20,410 And so with classes come a few different keywords. 58 00:03:20,410 --> 00:03:24,320 We have new, which you saw me type over here, which is basically saying, 59 00:03:24,320 --> 00:03:27,310 hey, give me an instance of this particular class. 60 00:03:27,310 --> 00:03:30,630 You invoke the class like an object, in case you want to pass anything into it. 61 00:03:30,630 --> 00:03:35,992 And so say we want to do new const d2 equals new date, 62 00:03:35,992 --> 00:03:37,825 and we actually want to pass in some number. 63 00:03:37,825 --> 00:03:40,690 64 00:03:40,690 --> 00:03:44,620 That gives us a new date from a very long time ago. 65 00:03:44,620 --> 00:03:45,910 So d.toString. 66 00:03:45,910 --> 00:03:48,784 67 00:03:48,784 --> 00:03:50,380 Oh, d2.toString. 68 00:03:50,380 --> 00:03:53,800 69 00:03:53,800 --> 00:03:57,580 Since we passed in the number 1, 2, 3, 4, that's basically saying, 70 00:03:57,580 --> 00:04:10,810 give me a date that's 1,234 milliseconds after date 0, which is back in 1969. 71 00:04:10,810 --> 00:04:12,810 So a constructor is basically something that you 72 00:04:12,810 --> 00:04:16,529 define within a class that says, hey, when you create a new class, 73 00:04:16,529 --> 00:04:22,440 invoke this method such that you create a new instance of a class. 74 00:04:22,440 --> 00:04:24,900 So let's actually practice this a little bit. 75 00:04:24,900 --> 00:04:27,975 So is everybody here familiar with a data structure called a set? 76 00:04:27,975 --> 00:04:33,850 77 00:04:33,850 --> 00:04:36,970 So basically what a set is, is it's a list, 78 00:04:36,970 --> 00:04:41,470 a data structure that supports things like add, delete, and inclusion, 79 00:04:41,470 --> 00:04:45,090 where you cannot have multiple things of the same value. 80 00:04:45,090 --> 00:04:47,930 Or in other words, it's a list of unique values. 81 00:04:47,930 --> 00:04:50,440 And the methods that it should support are 82 00:04:50,440 --> 00:04:52,900 add, which is basically add to this list; 83 00:04:52,900 --> 00:04:55,960 delete, which is basically get rid of something from this; 84 00:04:55,960 --> 00:05:01,930 or inclusion, which is saying, hey, does this list have a particular value? 85 00:05:01,930 --> 00:05:04,470 And it should also have the ability to get its size. 86 00:05:04,470 --> 00:05:08,470 And so down at the bottom of the file, I defined a few tests 87 00:05:08,470 --> 00:05:13,120 that we're going to run after we implement this, such as line 7 here, 88 00:05:13,120 --> 00:05:17,290 we have const s gets a new set with an array from 1 to 5, 89 00:05:17,290 --> 00:05:20,500 which is basically saying, give me a new set with five values, 1, 2, 3, 4, 90 00:05:20,500 --> 00:05:21,590 and 5. 91 00:05:21,590 --> 00:05:23,800 We're going to try to do S.add1, and so we're 92 00:05:23,800 --> 00:05:27,170 going to try to add 1 three times to the set. 93 00:05:27,170 --> 00:05:31,480 And when we do S.size, we want it actually to only have five members, 94 00:05:31,480 --> 00:05:35,650 because you shouldn't be able to add 1 multiple times. 95 00:05:35,650 --> 00:05:40,720 Down here, we do S.add6, and then we try S.has6, 96 00:05:40,720 --> 00:05:43,390 and it should contain the number 6. 97 00:05:43,390 --> 00:05:46,570 That thing should not be there. 98 00:05:46,570 --> 00:05:50,322 We try to see the size of it, and it should have added another member. 99 00:05:50,322 --> 00:05:52,780 And then down here, we tried to delete that and do a couple 100 00:05:52,780 --> 00:05:54,630 of associated checks with that. 101 00:05:54,630 --> 00:05:57,850 And so how are we going to go about implementing this class? 102 00:05:57,850 --> 00:06:01,220 103 00:06:01,220 --> 00:06:05,020 So as per the slide over here, we use a method called constructor 104 00:06:05,020 --> 00:06:09,200 in order to go ahead and construct an instance of this class. 105 00:06:09,200 --> 00:06:15,510 And so within the class, we should have a method called constructor, 106 00:06:15,510 --> 00:06:19,060 which takes a single argument. 107 00:06:19,060 --> 00:06:23,384 It should take an array or some sort of list to be created with. 108 00:06:23,384 --> 00:06:24,550 And what are we going to do? 109 00:06:24,550 --> 00:06:30,560 Well, we should attach to the instance the array. 110 00:06:30,560 --> 00:06:32,940 And that's basically saying, when I'm constructed, 111 00:06:32,940 --> 00:06:35,940 I expect to have one argument, which is just an array. 112 00:06:35,940 --> 00:06:39,810 And the only thing I'm going to do when creating this set object 113 00:06:39,810 --> 00:06:43,140 is just store a reference to that array. 114 00:06:43,140 --> 00:06:44,820 By doing this.arr = arr. 115 00:06:44,820 --> 00:06:47,330 116 00:06:47,330 --> 00:06:50,040 And so in this case, the this keyword is referring 117 00:06:50,040 --> 00:06:54,400 to the instance of the object. 118 00:06:54,400 --> 00:06:57,840 Cool, so let's try adding a couple of different methods to this. 119 00:06:57,840 --> 00:07:03,720 So we should be able to support add, which should take a value. 120 00:07:03,720 --> 00:07:09,110 We should be able to support delete, which also takes a value. 121 00:07:09,110 --> 00:07:15,730 And we should have something called has, which checks for inclusion. 122 00:07:15,730 --> 00:07:18,930 So how might we do something? 123 00:07:18,930 --> 00:07:20,524 How might we add to this class? 124 00:07:20,524 --> 00:07:21,690 Does anybody have any ideas? 125 00:07:21,690 --> 00:07:26,780 126 00:07:26,780 --> 00:07:30,540 AUDIENCE: [INAUDIBLE] 127 00:07:30,540 --> 00:07:31,540 JORDAN HAYASHI: Exactly. 128 00:07:31,540 --> 00:07:35,140 So we should use something like push to add to the array. 129 00:07:35,140 --> 00:07:39,490 But before we do that, we should make sure that that number does not already 130 00:07:39,490 --> 00:07:40,340 exist. 131 00:07:40,340 --> 00:07:44,966 And so maybe we should implement the has method first, which is a great idea. 132 00:07:44,966 --> 00:07:46,090 Let's go ahead and do that. 133 00:07:46,090 --> 00:07:49,480 So how might we do has? 134 00:07:49,480 --> 00:07:51,670 Well, it turns out on the array prototype, 135 00:07:51,670 --> 00:07:54,892 we already have something called includes, which tells us 136 00:07:54,892 --> 00:07:57,100 if an array includes a value, so we can just do that. 137 00:07:57,100 --> 00:08:00,080 We can do return this.arr.includes(val). 138 00:08:00,080 --> 00:08:06,230 139 00:08:06,230 --> 00:08:08,910 And so now that we have that, how might we take care of add? 140 00:08:08,910 --> 00:08:12,430 141 00:08:12,430 --> 00:08:20,730 We should say, oh, well, if this does not have the value already, add to it. 142 00:08:20,730 --> 00:08:26,080 143 00:08:26,080 --> 00:08:29,230 And so here I use this.has. 144 00:08:29,230 --> 00:08:34,600 So this here is referring to the instance of the set, 145 00:08:34,600 --> 00:08:37,059 and so this.has is referring to this method 146 00:08:37,059 --> 00:08:40,470 down here, on this particular instance. 147 00:08:40,470 --> 00:08:46,250 And then when I do this.arr, this still refers to the instance of this set. 148 00:08:46,250 --> 00:08:49,780 And so we're just getting at this array property that we have, 149 00:08:49,780 --> 00:08:53,030 and we're pushing that value to that array. 150 00:08:53,030 --> 00:08:53,530 Cool. 151 00:08:53,530 --> 00:08:56,005 So how might we go about this delete? 152 00:08:56,005 --> 00:09:00,718 153 00:09:00,718 --> 00:09:02,837 AUDIENCE: [INAUDIBLE] has value. 154 00:09:02,837 --> 00:09:05,170 JORDAN HAYASHI: Yeah, we can check if we have the value, 155 00:09:05,170 --> 00:09:07,440 but it doesn't really matter all that much. 156 00:09:07,440 --> 00:09:14,131 A quick and easy way would just be doing this.arr = this.arr.filter 157 00:09:14,131 --> 00:09:15,880 and then we can just filter by the values. 158 00:09:15,880 --> 00:09:20,050 So we could say, oh, we want for every x in here, 159 00:09:20,050 --> 00:09:22,610 we want the x's that don't equal this value. 160 00:09:22,610 --> 00:09:28,140 161 00:09:28,140 --> 00:09:28,640 Cool. 162 00:09:28,640 --> 00:09:31,030 And so we can go ahead and run this to see if it works. 163 00:09:31,030 --> 00:09:38,945 164 00:09:38,945 --> 00:09:39,445 Oops. 165 00:09:39,445 --> 00:09:45,880 166 00:09:45,880 --> 00:09:47,650 While I edit, I should flip these. 167 00:09:47,650 --> 00:09:53,960 168 00:09:53,960 --> 00:09:55,699 And we go ahead. 169 00:09:55,699 --> 00:09:58,990 S should have five members and actually has-- ooh, we forgot to influence size, 170 00:09:58,990 --> 00:09:59,490 actually. 171 00:09:59,490 --> 00:10:01,900 172 00:10:01,900 --> 00:10:04,090 And so we took care of all of the methods, 173 00:10:04,090 --> 00:10:07,540 but we didn't include the size. 174 00:10:07,540 --> 00:10:11,380 And so we should be able to return the size of this set. 175 00:10:11,380 --> 00:10:12,430 How might we do that? 176 00:10:12,430 --> 00:10:15,247 177 00:10:15,247 --> 00:10:16,330 Well, this is interesting. 178 00:10:16,330 --> 00:10:23,230 So we should be able to get at this value by doing the instance.size. 179 00:10:23,230 --> 00:10:25,400 And JavaScript actually has a convenient way. 180 00:10:25,400 --> 00:10:33,660 We can do get size, which is saying, when 181 00:10:33,660 --> 00:10:37,860 somebody tries to get at the value or the property.size, 182 00:10:37,860 --> 00:10:40,270 actually run this function. 183 00:10:40,270 --> 00:10:45,210 So this is just syntax for that shortcut. 184 00:10:45,210 --> 00:10:47,020 So how might we implement size? 185 00:10:47,020 --> 00:10:50,713 186 00:10:50,713 --> 00:10:53,110 AUDIENCE: [INAUDIBLE] 187 00:10:53,110 --> 00:10:56,200 JORDAN HAYASHI: Yeah, just return this.arr.length. 188 00:10:56,200 --> 00:11:01,130 189 00:11:01,130 --> 00:11:06,719 So now we can run this, and we see I should have five members, 190 00:11:06,719 --> 00:11:07,760 and it actually has five. 191 00:11:07,760 --> 00:11:09,170 So that's good. 192 00:11:09,170 --> 00:11:10,200 S should contain 5. 193 00:11:10,200 --> 00:11:10,700 That's true. 194 00:11:10,700 --> 00:11:11,760 That works. 195 00:11:11,760 --> 00:11:12,710 S should contain six. 196 00:11:12,710 --> 00:11:13,640 It's true. 197 00:11:13,640 --> 00:11:16,840 S should have six members, and actually has six, so we're good still. 198 00:11:16,840 --> 00:11:18,380 S should no longer contain six. 199 00:11:18,380 --> 00:11:19,910 That also returns true. 200 00:11:19,910 --> 00:11:25,250 And lastly, S should have five members, and actually does indeed have five. 201 00:11:25,250 --> 00:11:29,640 So does anybody have any questions with our implementation of set as a class? 202 00:11:29,640 --> 00:11:33,470 203 00:11:33,470 --> 00:11:33,970 Great. 204 00:11:33,970 --> 00:11:41,070 So it turns out JavaScript actually already has a set class, 205 00:11:41,070 --> 00:11:43,560 and it works exactly as we implemented. 206 00:11:43,560 --> 00:11:46,740 But say we actually wanted to use the native implementation of set 207 00:11:46,740 --> 00:11:49,650 and actually add some stuff to it. 208 00:11:49,650 --> 00:11:53,350 So that's where we use these other keywords, called extends and super. 209 00:11:53,350 --> 00:11:55,660 So extends is the JavaScript way of saying, 210 00:11:55,660 --> 00:11:58,320 hey, I want to start with a base class and actually add to it. 211 00:11:58,320 --> 00:12:00,150 Extend this class. 212 00:12:00,150 --> 00:12:03,166 And super, as we'll see in a second, is when we're writing that class, 213 00:12:03,166 --> 00:12:05,540 so we can refer to the original class using this keyword. 214 00:12:05,540 --> 00:12:10,490 215 00:12:10,490 --> 00:12:12,760 And so in this example called my set, we're 216 00:12:12,760 --> 00:12:15,957 going ahead and extending that set with a bunch of different things. 217 00:12:15,957 --> 00:12:17,290 And so here you see constructor. 218 00:12:17,290 --> 00:12:18,370 It still takes an array. 219 00:12:18,370 --> 00:12:22,240 And the first thing that we do is we invoke super on that array. 220 00:12:22,240 --> 00:12:28,009 So this is basically saying, hey, we're extending a set. 221 00:12:28,009 --> 00:12:30,550 So when you do the constructor, the first thing you should do 222 00:12:30,550 --> 00:12:34,240 is actually run the original set's constructor. 223 00:12:34,240 --> 00:12:36,470 And then let's also keep track of this.originalarray 224 00:12:36,470 --> 00:12:37,930 is the array that's passed in. 225 00:12:37,930 --> 00:12:42,610 And so we'll use that later to use this thing called reset. 226 00:12:42,610 --> 00:12:46,390 And so say we wanted to every single time we added a value to this set, 227 00:12:46,390 --> 00:12:50,740 we also wanted to log, hey, we added a value to this set. 228 00:12:50,740 --> 00:12:54,030 So we can just start writing this method called add. 229 00:12:54,030 --> 00:12:56,144 It takes a value just like any other example. 230 00:12:56,144 --> 00:12:58,060 But instead of implementing add ourself, we're 231 00:12:58,060 --> 00:13:00,310 just going to use the native implementation of add. 232 00:13:00,310 --> 00:13:01,910 And so that's where we use super.add. 233 00:13:01,910 --> 00:13:06,480 So super, again, refers to the class that we're extending. 234 00:13:06,480 --> 00:13:08,830 And so when we invoke super.add, it goes ahead 235 00:13:08,830 --> 00:13:10,936 and does that using the native implementation. 236 00:13:10,936 --> 00:13:13,810 And then since we're going to extend it with some additional logging. 237 00:13:13,810 --> 00:13:16,900 We're just going to log, hey, we added this val to the set. 238 00:13:16,900 --> 00:13:20,380 And if you're not familiar with this, if you use the backticks, 239 00:13:20,380 --> 00:13:23,230 you can go ahead and add variables in line, in the string, 240 00:13:23,230 --> 00:13:26,510 and it'll go ahead and substitute those in. 241 00:13:26,510 --> 00:13:28,870 And so you see we added a couple of other methods here. 242 00:13:28,870 --> 00:13:32,350 We have to array, which is basically saying, hey, I actually want the array, 243 00:13:32,350 --> 00:13:33,050 and not the set. 244 00:13:33,050 --> 00:13:35,460 And so we can just return Array.from (this). 245 00:13:35,460 --> 00:13:38,320 We're passing in the entire instance. 246 00:13:38,320 --> 00:13:41,590 And lastly, we have a reset, which is saying, hey, 247 00:13:41,590 --> 00:13:46,300 I want the original set that I had, or at least 248 00:13:46,300 --> 00:13:49,360 a new set with equivalent value. 249 00:13:49,360 --> 00:13:50,740 So you can return a new my set. 250 00:13:50,740 --> 00:13:54,460 So notice you are referencing my set inside that class. 251 00:13:54,460 --> 00:13:56,680 We want a new one, and we're going to pass in, 252 00:13:56,680 --> 00:13:58,800 as the array here, the original array. 253 00:13:58,800 --> 00:14:01,650 254 00:14:01,650 --> 00:14:06,250 So this is an example of us extending a class that already exists. 255 00:14:06,250 --> 00:14:10,630 And as you see, if we want to reference methods on that original, 256 00:14:10,630 --> 00:14:14,110 we just use that super keyword. 257 00:14:14,110 --> 00:14:17,200 So any questions on sets, how we define them-- 258 00:14:17,200 --> 00:14:21,400 or sorry, classes and how we define them, how we extend them? 259 00:14:21,400 --> 00:14:25,220 So why might this be useful? 260 00:14:25,220 --> 00:14:28,720 So as you guys are doing on your project, 261 00:14:28,720 --> 00:14:31,790 you're keeping track of these things called to dos. 262 00:14:31,790 --> 00:14:35,380 What if we actually had a class for to do? 263 00:14:35,380 --> 00:14:39,799 And when you invoke this constructor on some configuration object, 264 00:14:39,799 --> 00:14:42,340 what if it pulls out the text and whether it's checked or not 265 00:14:42,340 --> 00:14:45,072 and stores it as part of [? its ?] class instance? 266 00:14:45,072 --> 00:14:46,780 And say we want to render it to the page. 267 00:14:46,780 --> 00:14:49,450 What if we could just return some HTML like this? 268 00:14:49,450 --> 00:14:51,699 269 00:14:51,699 --> 00:14:52,990 It would be quite handy, right? 270 00:14:52,990 --> 00:14:58,450 And that actually is our next topic, react. 271 00:14:58,450 --> 00:15:00,970 So react is a JavaScript library, and it allows 272 00:15:00,970 --> 00:15:05,686 us to write declarative views that will react to changes in data automatically. 273 00:15:05,686 --> 00:15:09,440 It allows us to abstract complex problems into smaller components, 274 00:15:09,440 --> 00:15:12,730 and it allows us to write simple code that still perform it. 275 00:15:12,730 --> 00:15:15,640 And so I use this word in the first bullet, declarative. 276 00:15:15,640 --> 00:15:18,140 So what the heck does that mean? 277 00:15:18,140 --> 00:15:24,070 So in CS50, we learned a paradigm of coding called imperative. 278 00:15:24,070 --> 00:15:27,220 And today we're going to talk about declarative coding. 279 00:15:27,220 --> 00:15:29,800 So the difference in imperative and declarative 280 00:15:29,800 --> 00:15:33,130 is like asking the difference between how you do something 281 00:15:33,130 --> 00:15:36,340 and actually what you want out of it. 282 00:15:36,340 --> 00:15:39,610 So imperative programming outlines a series of steps 283 00:15:39,610 --> 00:15:42,550 to get to what you want, whereas declarative, 284 00:15:42,550 --> 00:15:44,750 you just say what you want. 285 00:15:44,750 --> 00:15:48,820 And it's just an implementation detail on how to get it. 286 00:15:48,820 --> 00:15:52,390 And so we've learned a few different languages through CS50 in this course. 287 00:15:52,390 --> 00:15:56,470 A couple that come to mind are HTML and JavaScript. 288 00:15:56,470 --> 00:15:59,950 So in HTML, do we tell the browser exactly how 289 00:15:59,950 --> 00:16:03,190 we want to render all of these things? 290 00:16:03,190 --> 00:16:07,450 Do we tell it exactly how we want the DOM to be constructed? 291 00:16:07,450 --> 00:16:10,060 No, we just tell it what we want. 292 00:16:10,060 --> 00:16:13,960 And so HTML is considered a declarative language, because you just say, 293 00:16:13,960 --> 00:16:14,770 hey, I want this. 294 00:16:14,770 --> 00:16:20,460 And browsers are in charge of just giving you what you want. 295 00:16:20,460 --> 00:16:23,410 Rather, with JavaScript, as you'll see in your first project, when 296 00:16:23,410 --> 00:16:25,810 you want to do anything to the DOM with JavaScript, 297 00:16:25,810 --> 00:16:29,380 you tell it, oh, first get me a new element. 298 00:16:29,380 --> 00:16:30,790 Call it a div. 299 00:16:30,790 --> 00:16:32,290 Then do this. 300 00:16:32,290 --> 00:16:33,940 Then maybe append it to the tree. 301 00:16:33,940 --> 00:16:35,148 Then maybe add a class to it. 302 00:16:35,148 --> 00:16:37,510 Maybe give it some inner HTML. 303 00:16:37,510 --> 00:16:40,260 And so you're telling it exactly what you want and how to do it. 304 00:16:40,260 --> 00:16:44,278 And so that is the more imperative way of programming. 305 00:16:44,278 --> 00:16:47,350 306 00:16:47,350 --> 00:16:49,250 So let's take this into an example. 307 00:16:49,250 --> 00:16:52,200 Say we had a classical guitar here, and say we 308 00:16:52,200 --> 00:16:55,950 wanted to actually create this guitar. 309 00:16:55,950 --> 00:16:59,380 So in an imperative way, how would you describe that? 310 00:16:59,380 --> 00:17:02,790 Well, you would say, oh, I need a head over here. 311 00:17:02,790 --> 00:17:04,050 I need to add some pegs to it. 312 00:17:04,050 --> 00:17:05,520 Maybe I want the neck. 313 00:17:05,520 --> 00:17:07,605 Maybe I add some frets to that. 314 00:17:07,605 --> 00:17:12,020 Oh, I need to create the body and attach them all and then maybe return that. 315 00:17:12,020 --> 00:17:15,180 And what would be a more declarative way of creating the guitar? 316 00:17:15,180 --> 00:17:17,960 317 00:17:17,960 --> 00:17:19,760 You just say, I want a guitar. 318 00:17:19,760 --> 00:17:21,079 Maybe tune the strings to this. 319 00:17:21,079 --> 00:17:29,170 And so an example in pseudo code would be like this. 320 00:17:29,170 --> 00:17:32,090 So say we have a guitar, and say we have some function 321 00:17:32,090 --> 00:17:37,950 called create element, similar to what we have in the document in HTML. 322 00:17:37,950 --> 00:17:40,250 And say we know exactly what strings we want. 323 00:17:40,250 --> 00:17:43,700 How might we go about creating this guitar? 324 00:17:43,700 --> 00:17:46,940 Well, first we might want to do something like let's create a head. 325 00:17:46,940 --> 00:17:53,150 326 00:17:53,150 --> 00:17:57,850 Again, telling whoever's listening exactly what we want. 327 00:17:57,850 --> 00:18:09,480 And then maybe for 6 pegs, maybe we want to start adding pegs to that head. 328 00:18:09,480 --> 00:18:21,270 329 00:18:21,270 --> 00:18:27,580 And so now we, in a very terse manner, have a head with six pegs. 330 00:18:27,580 --> 00:18:30,690 And so we might do the exact same thing with neck. 331 00:18:30,690 --> 00:18:46,460 332 00:18:46,460 --> 00:18:49,235 And maybe we want to add something like 19 frets. 333 00:18:49,235 --> 00:18:53,670 334 00:18:53,670 --> 00:18:58,320 And you can see how this gets a little bit annoying to write it, right? 335 00:18:58,320 --> 00:19:00,930 And maybe we do the same thing with body, 336 00:19:00,930 --> 00:19:10,320 but we have some sort of for each loop with the strings, 337 00:19:10,320 --> 00:19:14,201 and we pass in the tone that we want. 338 00:19:14,201 --> 00:19:16,950 And then we go ahead and create a string and tune it to that tone. 339 00:19:16,950 --> 00:19:25,604 340 00:19:25,604 --> 00:19:27,520 And then we go ahead and add that to the body. 341 00:19:27,520 --> 00:19:37,930 342 00:19:37,930 --> 00:19:42,301 And you see how this gets very step-by-step, exactly what we 343 00:19:42,301 --> 00:19:43,550 want to do to create a guitar. 344 00:19:43,550 --> 00:19:48,190 345 00:19:48,190 --> 00:19:52,300 And this is exactly what we've been doing thus far for writing to the DOM. 346 00:19:52,300 --> 00:19:55,265 347 00:19:55,265 --> 00:19:57,640 And so how might we do this in a more declarative manner? 348 00:19:57,640 --> 00:20:01,380 349 00:20:01,380 --> 00:20:05,375 Well, we would just say, give me a guitar. 350 00:20:05,375 --> 00:20:08,580 351 00:20:08,580 --> 00:20:10,150 Give me a string. 352 00:20:10,150 --> 00:20:17,580 Maybe I want it to be tuned to the first note in the string. 353 00:20:17,580 --> 00:20:21,382 354 00:20:21,382 --> 00:20:22,715 And maybe copy that a few times. 355 00:20:22,715 --> 00:20:29,040 356 00:20:29,040 --> 00:20:31,440 And there we go. 357 00:20:31,440 --> 00:20:35,010 A better way to do this would be rather than hard coding these, 358 00:20:35,010 --> 00:20:46,480 maybe we just do strings.map, and for each note, we stick it in there. 359 00:20:46,480 --> 00:20:49,559 360 00:20:49,559 --> 00:20:51,350 So it looks like there's a little bug here. 361 00:20:51,350 --> 00:20:57,320 I used string even though I declared the variable called strings. 362 00:20:57,320 --> 00:21:00,050 So if we map over the array called strings, 363 00:21:00,050 --> 00:21:03,500 and for each note return a string where the note is note, 364 00:21:03,500 --> 00:21:06,886 then we have declaratively written a guitar. 365 00:21:06,886 --> 00:21:07,760 Does this make sense? 366 00:21:07,760 --> 00:21:15,580 367 00:21:15,580 --> 00:21:18,340 So a great thing about react is that the way that you code 368 00:21:18,340 --> 00:21:22,240 is in a very, very declarative manner. 369 00:21:22,240 --> 00:21:24,670 The browser APIs aren't super fun to work with. 370 00:21:24,670 --> 00:21:28,630 You get to work with them a bit in project zero, but react just 371 00:21:28,630 --> 00:21:30,310 allows us to write exactly what we want. 372 00:21:30,310 --> 00:21:34,230 And the library will actually take care of the DOM manipulation for us. 373 00:21:34,230 --> 00:21:35,980 And so what does that really look like? 374 00:21:35,980 --> 00:21:43,970 375 00:21:43,970 --> 00:21:47,795 So say we wanted to create a slide here. 376 00:21:47,795 --> 00:21:52,480 Say we wanted to use the native DOM manipulation 377 00:21:52,480 --> 00:21:54,890 API in order to create the slide here. 378 00:21:54,890 --> 00:21:58,030 So we might have a slide element that we created 379 00:21:58,030 --> 00:22:00,690 and say we wanted to add a H1 to that. 380 00:22:00,690 --> 00:22:01,450 Add a title to it. 381 00:22:01,450 --> 00:22:02,710 How might we do it? 382 00:22:02,710 --> 00:22:07,224 Well, we'd have to do something like const title = document.createElement. 383 00:22:07,224 --> 00:22:11,180 384 00:22:11,180 --> 00:22:13,610 Get an H1. 385 00:22:13,610 --> 00:22:14,860 And then start adding to that. 386 00:22:14,860 --> 00:22:20,090 We can do title.innerHTML is equal to the SLIDE.title. 387 00:22:20,090 --> 00:22:24,190 388 00:22:24,190 --> 00:22:27,550 And you see how this starts getting to like what we've been doing earlier, 389 00:22:27,550 --> 00:22:33,051 where you say exactly what you want, but it might take you a long time to do. 390 00:22:33,051 --> 00:22:35,050 So in react land, this is actually a lot easier. 391 00:22:35,050 --> 00:22:38,840 392 00:22:38,840 --> 00:22:43,240 So how might we do this if we were doing this completely declaratively? 393 00:22:43,240 --> 00:22:50,810 Well, we just say exactly what we want. 394 00:22:50,810 --> 00:22:52,900 We want a slide. 395 00:22:52,900 --> 00:22:58,465 Maybe it has a title, where the title is equal to the slide's title. 396 00:22:58,465 --> 00:23:01,270 397 00:23:01,270 --> 00:23:03,889 Maybe we have some bullets. 398 00:23:03,889 --> 00:23:06,430 Or we can just map through the bullets that we have up there. 399 00:23:06,430 --> 00:23:08,440 We can do SLIDE.bullets.map. 400 00:23:08,440 --> 00:23:12,410 401 00:23:12,410 --> 00:23:18,160 And we can say for every bullet, just give me a list item. 402 00:23:18,160 --> 00:23:29,451 403 00:23:29,451 --> 00:23:31,950 And maybe we should wrap those list items in unordered list. 404 00:23:31,950 --> 00:23:36,170 405 00:23:36,170 --> 00:23:38,420 And maybe instead of using this, we can do an H1 here. 406 00:23:38,420 --> 00:23:51,070 407 00:23:51,070 --> 00:23:53,390 So see how this is a lot more declarative? 408 00:23:53,390 --> 00:24:01,730 409 00:24:01,730 --> 00:24:02,900 Makes sense, right? 410 00:24:02,900 --> 00:24:04,410 It just makes sense. 411 00:24:04,410 --> 00:24:07,430 It's easier to read, and it's easier to maintain. 412 00:24:07,430 --> 00:24:10,552 413 00:24:10,552 --> 00:24:15,027 So another great thing about react is it's very easily componentized. 414 00:24:15,027 --> 00:24:16,360 What do I mean by componentized? 415 00:24:16,360 --> 00:24:19,840 Well, it's a process by which you break a very complex problem into a bunch 416 00:24:19,840 --> 00:24:22,586 of different, discrete components. 417 00:24:22,586 --> 00:24:25,210 You can reuse these components, which is great for consistency. 418 00:24:25,210 --> 00:24:27,520 So say you had a bunch of slides, and you wanted 419 00:24:27,520 --> 00:24:30,255 to just change how every title looked. 420 00:24:30,255 --> 00:24:33,250 Well, if you did this using native DOM manipulation, 421 00:24:33,250 --> 00:24:36,660 that might be a bunch of different lines of code that you have to change. 422 00:24:36,660 --> 00:24:39,447 But if you did this using React components, 423 00:24:39,447 --> 00:24:41,530 it might just be one line that you have to change, 424 00:24:41,530 --> 00:24:44,452 and then it's applied to every single slide that you have. 425 00:24:44,452 --> 00:24:46,660 It's also great for iteration speed, because then you 426 00:24:46,660 --> 00:24:48,493 can just reuse the components over and over, 427 00:24:48,493 --> 00:24:51,931 rather than having to cut and paste code all over the place. 428 00:24:51,931 --> 00:24:53,680 Another great thing about these components 429 00:24:53,680 --> 00:24:58,420 is that React's declarative nature makes it very easy to customize components. 430 00:24:58,420 --> 00:25:02,030 So say we had the last three slides and wanted to write them in HTML. 431 00:25:02,030 --> 00:25:05,065 432 00:25:05,065 --> 00:25:06,940 It might look like something like this, where 433 00:25:06,940 --> 00:25:12,660 you have a div, which represents a slide where the titles react. 434 00:25:12,660 --> 00:25:15,460 You notice these are the same three bullets as previously. 435 00:25:15,460 --> 00:25:20,475 We have the declarative slide, where we have the same bullets as previously. 436 00:25:20,475 --> 00:25:21,850 And say we wanted to change this. 437 00:25:21,850 --> 00:25:27,130 Say we wanted to make all of the titles have a slightly different style. 438 00:25:27,130 --> 00:25:28,840 Well, how might we do that? 439 00:25:28,840 --> 00:25:30,610 Well, we'd have to edit this line. 440 00:25:30,610 --> 00:25:32,470 We'd have to go edit this line. 441 00:25:32,470 --> 00:25:35,200 Maybe down there, there's another title that we have to change. 442 00:25:35,200 --> 00:25:39,670 Or what if we wanted to even change the structure of how we represent bullets? 443 00:25:39,670 --> 00:25:42,390 Maybe rather than using an unordered list, 444 00:25:42,390 --> 00:25:46,820 we might use an unordered list with a div that wraps the list items. 445 00:25:46,820 --> 00:25:50,650 Well, in order to do that, that would be a lot of code you have to change. 446 00:25:50,650 --> 00:25:54,310 But imagine that we had broken this up into a bunch of different components. 447 00:25:54,310 --> 00:25:57,300 Where might it make sense to break it up? 448 00:25:57,300 --> 00:26:01,342 Well, you see us repeating code that looks pretty much the same 449 00:26:01,342 --> 00:26:02,050 over here, right? 450 00:26:02,050 --> 00:26:05,350 So maybe that should be broken up into a separate component. 451 00:26:05,350 --> 00:26:07,000 So how might we go about doing that? 452 00:26:07,000 --> 00:26:11,050 453 00:26:11,050 --> 00:26:15,660 Well, first we have to extract the information, and so in this array here, 454 00:26:15,660 --> 00:26:18,930 we have the slides where I've basically just ripped 455 00:26:18,930 --> 00:26:23,890 out the information for each slide. 456 00:26:23,890 --> 00:26:27,542 And so now let's go ahead and implement that slideshow. 457 00:26:27,542 --> 00:26:29,250 And so in order to do that, we might have 458 00:26:29,250 --> 00:26:39,770 something like where we have a slide, which might take an array, 459 00:26:39,770 --> 00:26:41,030 or it might take an object. 460 00:26:41,030 --> 00:26:43,946 Let's call it a slide. 461 00:26:43,946 --> 00:26:46,400 And what will it return? 462 00:26:46,400 --> 00:26:49,997 Well, it should return a div. 463 00:26:49,997 --> 00:26:51,330 Maybe inside it we have that H1. 464 00:26:51,330 --> 00:26:55,160 465 00:26:55,160 --> 00:26:56,800 Then maybe we have that unordered list. 466 00:26:56,800 --> 00:26:59,359 467 00:26:59,359 --> 00:27:00,900 And then go ahead and close that div. 468 00:27:00,900 --> 00:27:06,260 469 00:27:06,260 --> 00:27:08,630 So what goes in the H1 here? 470 00:27:08,630 --> 00:27:13,940 Well, maybe we should have that slide's title. 471 00:27:13,940 --> 00:27:16,040 And what about generating those bullets? 472 00:27:16,040 --> 00:27:17,790 Well, like we did in the previous example, 473 00:27:17,790 --> 00:27:21,800 we might want to do the slide.bullets and map [? overflows ?] 474 00:27:21,800 --> 00:27:23,960 to create those list items. 475 00:27:23,960 --> 00:27:30,156 So for each bullet, just go ahead and create a list item 476 00:27:30,156 --> 00:27:31,280 where you have that bullet. 477 00:27:31,280 --> 00:27:37,250 478 00:27:37,250 --> 00:27:39,730 And so now we declared exactly what a slide is. 479 00:27:39,730 --> 00:27:42,520 Well, a slide takes in an object representing 480 00:27:42,520 --> 00:27:48,550 the slide in the same shape of the object up here. 481 00:27:48,550 --> 00:27:52,360 And then it just returns the same HTML that we had in the other example. 482 00:27:52,360 --> 00:27:54,400 It's a div that wraps in H1, where we stick 483 00:27:54,400 --> 00:27:57,460 in the title, an unordered list that has some list 484 00:27:57,460 --> 00:27:59,869 items that represent those bullets. 485 00:27:59,869 --> 00:28:01,660 And now how might we create that slideshow? 486 00:28:01,660 --> 00:28:08,450 487 00:28:08,450 --> 00:28:15,530 Well, maybe we just do for each slot in the slides, 488 00:28:15,530 --> 00:28:22,970 maybe we have an outer-wrapping div that maps through the slides. 489 00:28:22,970 --> 00:28:25,790 490 00:28:25,790 --> 00:28:31,020 And for each slide, we actually just use the slide down there. 491 00:28:31,020 --> 00:28:44,290 492 00:28:44,290 --> 00:28:49,650 So now we're going to get ahead and use React and generate 493 00:28:49,650 --> 00:28:52,770 basically the same HTML as we had in the previous one. 494 00:28:52,770 --> 00:28:56,100 But now say we wanted to change the styling of the title. 495 00:28:56,100 --> 00:28:57,580 How would we do that? 496 00:28:57,580 --> 00:28:59,910 Well, that's just right here. 497 00:28:59,910 --> 00:29:02,160 What about if we wanted to change the structure of how 498 00:29:02,160 --> 00:29:04,800 we created those bullets? 499 00:29:04,800 --> 00:29:08,269 In the previous example, if we wanted to wrap the list items in a div, 500 00:29:08,269 --> 00:29:09,810 it would be many, many lines of code. 501 00:29:09,810 --> 00:29:12,600 But here, it's just you stick a div here, 502 00:29:12,600 --> 00:29:15,780 because this is basically an abstract component that says, 503 00:29:15,780 --> 00:29:18,300 if we wanted to create a slide, here's exactly how we do it. 504 00:29:18,300 --> 00:29:22,500 Just make sure to pass me a slide of the correct shape. 505 00:29:22,500 --> 00:29:25,800 And so the React paradigm is to take a very complex problem 506 00:29:25,800 --> 00:29:28,080 and break it down into small chunks like this 507 00:29:28,080 --> 00:29:32,370 that each solve a discrete problem in that UI. 508 00:29:32,370 --> 00:29:33,600 Any questions so far? 509 00:29:33,600 --> 00:29:41,300 510 00:29:41,300 --> 00:29:42,100 Cool. 511 00:29:42,100 --> 00:29:45,390 So another great thing is that React is very performant. 512 00:29:45,390 --> 00:29:47,140 We just write what we want, and React will 513 00:29:47,140 --> 00:29:49,810 do the hard work of playing with the DOM, 514 00:29:49,810 --> 00:29:53,140 or changing things so that what we have written 515 00:29:53,140 --> 00:29:56,480 matches with what we have showing on the page. 516 00:29:56,480 --> 00:30:03,580 And so the way it does this is through an algorithm called reconciliation. 517 00:30:03,580 --> 00:30:06,640 And this is the process by which React syncs any changes in app state 518 00:30:06,640 --> 00:30:08,560 to the DOM. 519 00:30:08,560 --> 00:30:11,200 So what's great about React is that it actually 520 00:30:11,200 --> 00:30:13,870 maintains what's called a virtual DOM. 521 00:30:13,870 --> 00:30:17,170 And so the slow thing about playing with the DOM 522 00:30:17,170 --> 00:30:20,620 is that anytime you destroy elements or create new elements, that 523 00:30:20,620 --> 00:30:23,950 takes a relatively long amount of time. 524 00:30:23,950 --> 00:30:27,310 And so the way that React says, maybe we should do this 525 00:30:27,310 --> 00:30:30,089 better by rather than changing stuff in the DOM 526 00:30:30,089 --> 00:30:33,130 every time we want to change something, what if we just stored everything 527 00:30:33,130 --> 00:30:34,139 in memory? 528 00:30:34,139 --> 00:30:35,930 And then with any changes, we can just say, 529 00:30:35,930 --> 00:30:38,460 hey, how does this differ from what's shown on the page? 530 00:30:38,460 --> 00:30:40,490 And only change what's necessary. 531 00:30:40,490 --> 00:30:43,520 And so that's what's done in the reconciliation process. 532 00:30:43,520 --> 00:30:46,630 So first, anytime your data changes, React 533 00:30:46,630 --> 00:30:49,750 will reconstruct that virtual DOM. 534 00:30:49,750 --> 00:30:55,870 Then it will diff that DOM against what's actually there in the real DOM. 535 00:30:55,870 --> 00:30:58,654 And it'll make only the changes that are needed. 536 00:30:58,654 --> 00:31:01,070 Of course, there is an asterisk that goes along with that, 537 00:31:01,070 --> 00:31:03,153 but in your mental model, you can just think of it 538 00:31:03,153 --> 00:31:08,530 as React will just only make the changes as necessary. 539 00:31:08,530 --> 00:31:11,530 So how the heck do we write React? 540 00:31:11,530 --> 00:31:13,990 Well, there's this thing called JSX, which 541 00:31:13,990 --> 00:31:18,430 is short for JavaScript and XML, which is basically just an XML-like syntax 542 00:31:18,430 --> 00:31:20,779 extension of JavaScript. 543 00:31:20,779 --> 00:31:23,320 It's great because it just transpiles directly to JavaScript. 544 00:31:23,320 --> 00:31:26,020 So as we talked about in an earlier lecture, 545 00:31:26,020 --> 00:31:30,280 the paradigm now is to rather than just writing JavaScript by hand, using ES5 546 00:31:30,280 --> 00:31:32,590 directly, we can write in these other languages 547 00:31:32,590 --> 00:31:35,230 that just transpile back to JavaScript. 548 00:31:35,230 --> 00:31:38,860 So JSX is an extension to that JavaScript syntax, which will just 549 00:31:38,860 --> 00:31:41,560 compile back down into JavaScript. 550 00:31:41,560 --> 00:31:44,990 551 00:31:44,990 --> 00:31:51,050 And so tags defined in JSX, XML looks exactly like HTML with the tags. 552 00:31:51,050 --> 00:31:54,740 Lowercase tags are treated as HTML or SVG tags, 553 00:31:54,740 --> 00:31:58,876 whereas things uppercase are treated as our custom components. 554 00:31:58,876 --> 00:32:00,250 And what the heck is a component? 555 00:32:00,250 --> 00:32:03,637 Well, a component is just a function, a function that returns a node. 556 00:32:03,637 --> 00:32:04,220 What's a node? 557 00:32:04,220 --> 00:32:06,260 It's something that React can render. 558 00:32:06,260 --> 00:32:10,250 For example, like a div or a span or a string or a number. 559 00:32:10,250 --> 00:32:13,310 560 00:32:13,310 --> 00:32:16,820 And components will receive an object of properties 561 00:32:16,820 --> 00:32:19,070 that are passed to this element. 562 00:32:19,070 --> 00:32:22,220 So going back to the example that we were doing before, 563 00:32:22,220 --> 00:32:27,460 see how one, we declared a const called slide down here. 564 00:32:27,460 --> 00:32:29,810 And notice how I uppercased that S. That was 565 00:32:29,810 --> 00:32:35,030 fully intentional, because in JSX, a tag with a capital S gets 566 00:32:35,030 --> 00:32:36,470 invoked like a function. 567 00:32:36,470 --> 00:32:38,150 And what does it get invoked with? 568 00:32:38,150 --> 00:32:40,339 Well, anything you pass it as properties. 569 00:32:40,339 --> 00:32:42,380 So if you remember properties from HTML, you just 570 00:32:42,380 --> 00:32:45,950 pass them in line with the key and a value pair. 571 00:32:45,950 --> 00:32:48,200 In React, you do the exact same thing, and it actually 572 00:32:48,200 --> 00:32:52,749 gets passed as an object to the component that you described. 573 00:32:52,749 --> 00:32:57,800 574 00:32:57,800 --> 00:32:59,344 And so now to talk about props. 575 00:32:59,344 --> 00:33:01,760 Well, props are just past as an object through a component 576 00:33:01,760 --> 00:33:03,260 and used to compute the return node. 577 00:33:03,260 --> 00:33:07,100 So basically, the object that we were just referring to in this example, 578 00:33:07,100 --> 00:33:09,180 we called it a slide. 579 00:33:09,180 --> 00:33:12,590 In React convention, we always call that props, short for properties, 580 00:33:12,590 --> 00:33:16,850 like those HTML properties. 581 00:33:16,850 --> 00:33:21,200 And any change to these props will cause a recomputation of that return node, 582 00:33:21,200 --> 00:33:26,400 or in React vocab, a re-render. 583 00:33:26,400 --> 00:33:29,370 And so unlike in HTML, these can be any JavaScript value. 584 00:33:29,370 --> 00:33:32,740 So if you remember back to HTML, when you declare a property, 585 00:33:32,740 --> 00:33:34,010 it has to be a string. 586 00:33:34,010 --> 00:33:38,450 It might be JavaScript, like a JavaScript function, 587 00:33:38,450 --> 00:33:40,500 but really it's just a string. 588 00:33:40,500 --> 00:33:46,250 And so you can't pass any complex objects or a date, object, classes, 589 00:33:46,250 --> 00:33:48,320 instances, and stuff like that. 590 00:33:48,320 --> 00:33:49,940 But in React, we can pass anything. 591 00:33:49,940 --> 00:33:55,804 So notice here, slide is an object as declared in the array 592 00:33:55,804 --> 00:33:56,720 that we have up there. 593 00:33:56,720 --> 00:33:59,600 And we're just passing the object over there. 594 00:33:59,600 --> 00:34:01,820 And the way that we pass values in JavaScript 595 00:34:01,820 --> 00:34:05,350 is we wrap them in single curlies, which means, 596 00:34:05,350 --> 00:34:07,900 hey, execute this as a JavaScript. 597 00:34:07,900 --> 00:34:11,594 598 00:34:11,594 --> 00:34:12,510 Does that makes sense? 599 00:34:12,510 --> 00:34:16,880 600 00:34:16,880 --> 00:34:20,380 So let's actually use a live example of this. 601 00:34:20,380 --> 00:34:22,960 So there's this website called codesandbox.io, 602 00:34:22,960 --> 00:34:27,400 which is linked on the website in the Resources tab, 603 00:34:27,400 --> 00:34:31,900 and this allows us to write React and actually render it live. 604 00:34:31,900 --> 00:34:37,060 And so can everybody read this? 605 00:34:37,060 --> 00:34:41,000 606 00:34:41,000 --> 00:34:44,719 So basically, what's on the left over there is code that gets executed 607 00:34:44,719 --> 00:34:46,380 and runs live on the right side here. 608 00:34:46,380 --> 00:34:53,230 So if we started editing this, you see it applied directly on the right side 609 00:34:53,230 --> 00:34:55,550 there. 610 00:34:55,550 --> 00:34:58,412 And so you see we have a const called app, 611 00:34:58,412 --> 00:35:00,120 which doesn't care about any arguments it 612 00:35:00,120 --> 00:35:06,240 receives and just renders the static HTML here. 613 00:35:06,240 --> 00:35:08,620 So what if we actually wanted to pass it a prop? 614 00:35:08,620 --> 00:35:16,050 So say we passed it something like a count and passed it the number 1. 615 00:35:16,050 --> 00:35:21,120 Again, we use curly braces there to represent this is JavaScript coming, 616 00:35:21,120 --> 00:35:24,180 and the JavaScript is just the number 1. 617 00:35:24,180 --> 00:35:28,410 So how might we go ahead and render that in the app? 618 00:35:28,410 --> 00:35:32,426 Well, first, we need to actually pay attention to the object 619 00:35:32,426 --> 00:35:33,300 that we receive here. 620 00:35:33,300 --> 00:35:36,860 621 00:35:36,860 --> 00:35:40,820 And second, we can just do it directly in line. 622 00:35:40,820 --> 00:35:44,720 And so we use those curly braces to represent, 623 00:35:44,720 --> 00:35:46,850 hey, here comes some JavaScript. 624 00:35:46,850 --> 00:35:52,080 And we can just use props.count, and now we'll 625 00:35:52,080 --> 00:35:59,160 go ahead and grab the prop with the key [? call ?] account. 626 00:35:59,160 --> 00:36:02,730 And so I mentioned that as props change, React gets re-rendered. 627 00:36:02,730 --> 00:36:03,730 So how might we do that? 628 00:36:03,730 --> 00:36:06,810 629 00:36:06,810 --> 00:36:11,530 Well, we can just wrap this in a set timeout, or a set interval, rather. 630 00:36:11,530 --> 00:36:15,530 631 00:36:15,530 --> 00:36:20,600 And every 1,000 milliseconds or 1,000 milliseconds, 632 00:36:20,600 --> 00:36:27,680 let's go ahead and pass it not just one, but the count plus plus, 633 00:36:27,680 --> 00:36:32,810 where count starts at 0. 634 00:36:32,810 --> 00:36:39,670 And every time this is invoked, it increments. 635 00:36:39,670 --> 00:36:42,960 636 00:36:42,960 --> 00:36:45,160 And so down here, we're saying, sudden interval, 637 00:36:45,160 --> 00:36:47,580 which means run some function every n seconds. 638 00:36:47,580 --> 00:36:52,150 We set n to equal 1,000 milliseconds, or one second there. 639 00:36:52,150 --> 00:36:54,810 And every time we want to render this function 640 00:36:54,810 --> 00:36:59,901 called app with a count of one more than it was last time. 641 00:36:59,901 --> 00:37:01,650 And so we start at 0, and every second you 642 00:37:01,650 --> 00:37:07,560 see we pass a new prop count incremented. 643 00:37:07,560 --> 00:37:12,330 And even though we're not really doing anything actively in the app here, 644 00:37:12,330 --> 00:37:14,690 we wrote this in a very declarative nature, right? 645 00:37:14,690 --> 00:37:21,120 We said, for any props that you give me, just render a div with an H2 where 646 00:37:21,120 --> 00:37:22,927 the H2 is the value of the props. 647 00:37:22,927 --> 00:37:24,260 See how that's very declarative. 648 00:37:24,260 --> 00:37:28,009 We don't say, oh, first you have to grab the count, 649 00:37:28,009 --> 00:37:30,300 then check to see if it is different than the last one, 650 00:37:30,300 --> 00:37:31,633 and then append this to the DOM. 651 00:37:31,633 --> 00:37:33,270 We just say, hey, this is what we want. 652 00:37:33,270 --> 00:37:36,390 And React will give it to us. 653 00:37:36,390 --> 00:37:41,100 Any questions on React or props thus far? 654 00:37:41,100 --> 00:37:41,795 Yeah? 655 00:37:41,795 --> 00:37:45,600 AUDIENCE: [INAUDIBLE] 656 00:37:45,600 --> 00:37:47,310 JORDAN HAYASHI: Yes, of course. 657 00:37:47,310 --> 00:38:02,310 So set interval requires two arguments, where the first one is a function. 658 00:38:02,310 --> 00:38:07,600 So the question was can you go over the arrow notation here? 659 00:38:07,600 --> 00:38:10,510 And so set interval expects two arguments. 660 00:38:10,510 --> 00:38:14,490 One is a function that it will invoke with no arguments, 661 00:38:14,490 --> 00:38:18,120 and so I'm just declaring an anonymous function here with no arguments. 662 00:38:18,120 --> 00:38:21,205 So I'm saying, here is a function that takes no arguments, 663 00:38:21,205 --> 00:38:22,080 and what should I do? 664 00:38:22,080 --> 00:38:23,790 Well, I should render this. 665 00:38:23,790 --> 00:38:36,087 I could have also written this as this, and it would have functionally 666 00:38:36,087 --> 00:38:36,920 been the exact same. 667 00:38:36,920 --> 00:38:48,614 668 00:38:48,614 --> 00:38:49,530 Does that makes sense? 669 00:38:49,530 --> 00:38:52,270 670 00:38:52,270 --> 00:38:54,970 Any other questions on React or props? 671 00:38:54,970 --> 00:38:55,563 Yeah? 672 00:38:55,563 --> 00:38:58,028 AUDIENCE: So in line 10 [INAUDIBLE]? 673 00:38:58,028 --> 00:39:04,930 674 00:39:04,930 --> 00:39:10,650 JORDAN HAYASHI: So in line 10, we have braces after the arrow here. 675 00:39:10,650 --> 00:39:16,370 So that's just saying, interpret all of this as one statement. 676 00:39:16,370 --> 00:39:19,280 So something special about arrow notation 677 00:39:19,280 --> 00:39:22,760 is that it has an implicit return, which means we don't actually 678 00:39:22,760 --> 00:39:31,902 have to write-- so we could have written the same thing as this, 679 00:39:31,902 --> 00:39:36,847 as a function that takes props. 680 00:39:36,847 --> 00:39:37,680 And what does it do? 681 00:39:37,680 --> 00:39:38,430 It returns this. 682 00:39:38,430 --> 00:39:51,370 683 00:39:51,370 --> 00:39:53,899 So this actually does the exact same thing. 684 00:39:53,899 --> 00:39:55,690 So we're saying, app two is a function that 685 00:39:55,690 --> 00:39:57,470 takes a single argument called props. 686 00:39:57,470 --> 00:40:03,670 And what we do is we return this, and so arrow notation shorthand is just 687 00:40:03,670 --> 00:40:05,860 you have your arguments in arrow. 688 00:40:05,860 --> 00:40:10,420 And then if you don't have braces, which referred to it like a code block, 689 00:40:10,420 --> 00:40:12,070 it just returns whatever's next. 690 00:40:12,070 --> 00:40:14,290 And so we're saying, return this. 691 00:40:14,290 --> 00:40:15,220 What is this? 692 00:40:15,220 --> 00:40:17,540 Well, it's this div and H2. 693 00:40:17,540 --> 00:40:22,450 We're going to wrap it in a parentheses so we know that it's just one value. 694 00:40:22,450 --> 00:40:23,920 Does that make sense? 695 00:40:23,920 --> 00:40:26,480 A great question. 696 00:40:26,480 --> 00:40:28,930 Do you guys see how these are the same? 697 00:40:28,930 --> 00:40:33,560 698 00:40:33,560 --> 00:40:37,270 So this is great, but we don't really have all that much power yet, right? 699 00:40:37,270 --> 00:40:39,520 If we wanted to go ahead and change these props, 700 00:40:39,520 --> 00:40:44,240 we still have to drop down to this raw JavaScript over here. 701 00:40:44,240 --> 00:40:51,837 So next we'll see exactly how we create apps that are stateful. 702 00:40:51,837 --> 00:40:52,670 What does that mean? 703 00:40:52,670 --> 00:40:55,620 Well, there's this notion of state in React, 704 00:40:55,620 --> 00:40:58,990 and state is basically an internally managed configuration 705 00:40:58,990 --> 00:41:02,350 for any component. 706 00:41:02,350 --> 00:41:06,715 And so now components become classes, and this .state is a property on that 707 00:41:06,715 --> 00:41:07,590 component's instance. 708 00:41:07,590 --> 00:41:10,660 709 00:41:10,660 --> 00:41:11,910 So how do we update the state? 710 00:41:11,910 --> 00:41:16,950 Well, there's a method called this.setState, 711 00:41:16,950 --> 00:41:19,770 which is implemented in this thing called a React.Component, which 712 00:41:19,770 --> 00:41:24,630 we have to extend in order to have access to that method. 713 00:41:24,630 --> 00:41:29,010 And this goes ahead and changes that value. 714 00:41:29,010 --> 00:41:32,650 So you can pass an object to be merged or a function of the previous state. 715 00:41:32,650 --> 00:41:35,180 And so if we pass this.setState, an object, 716 00:41:35,180 --> 00:41:37,680 it will go ahead and merge that in with the existing state. 717 00:41:37,680 --> 00:41:40,650 So if we pass it in an updater function, it's 718 00:41:40,650 --> 00:41:44,160 basically a function that gets run when we want to change the state. 719 00:41:44,160 --> 00:41:49,810 And the set state calls are batched and run asynchronously. 720 00:41:49,810 --> 00:41:52,600 And of course, any change in state will also cause a re-render, 721 00:41:52,600 --> 00:41:55,030 because it would be silly if we were to change the state 722 00:41:55,030 --> 00:41:58,710 but not reflect that in the UI. 723 00:41:58,710 --> 00:42:02,570 And so how might we go about representing state over here? 724 00:42:02,570 --> 00:42:06,570 So first, let me copy this so that we can save it. 725 00:42:06,570 --> 00:42:24,280 726 00:42:24,280 --> 00:42:28,090 So let's go ahead, and rather than having an app be a function, 727 00:42:28,090 --> 00:42:30,242 let's actually have it be a class. 728 00:42:30,242 --> 00:42:33,610 729 00:42:33,610 --> 00:42:40,990 So we can do class app, and we want to extend React.Component. 730 00:42:40,990 --> 00:42:47,900 731 00:42:47,900 --> 00:42:52,580 And within that, we want to have this method called render, which is 732 00:42:52,580 --> 00:42:57,160 automatically invoked on a re-render. 733 00:42:57,160 --> 00:43:01,160 734 00:43:01,160 --> 00:43:04,530 Within render, we want to return this. 735 00:43:04,530 --> 00:43:24,820 736 00:43:24,820 --> 00:43:25,320 Cool. 737 00:43:25,320 --> 00:43:27,840 738 00:43:27,840 --> 00:43:30,660 So the way to now write this is rather than having 739 00:43:30,660 --> 00:43:33,555 app be a function that takes props and returns something, 740 00:43:33,555 --> 00:43:35,610 we're actually writing a class for app. 741 00:43:35,610 --> 00:43:38,400 And so as we talked about earlier, classes have instances. 742 00:43:38,400 --> 00:43:41,700 And React knows that when you want to render something 743 00:43:41,700 --> 00:43:45,300 like this, if it's a class, go ahead and create a new instance of that 744 00:43:45,300 --> 00:43:49,080 and pass in these as props. 745 00:43:49,080 --> 00:43:51,930 And notice how we don't ever take the props anywhere. 746 00:43:51,930 --> 00:43:54,930 That's because when we extend React Component, 747 00:43:54,930 --> 00:44:00,330 React Component, that base class, goes ahead and attaches the props 748 00:44:00,330 --> 00:44:01,320 to the instance. 749 00:44:01,320 --> 00:44:04,560 And so in order to get at them, rather than doing props does something, 750 00:44:04,560 --> 00:44:07,340 we do this dot props dot count. 751 00:44:07,340 --> 00:44:11,070 So again, the props that come in, in the way that React.Component 752 00:44:11,070 --> 00:44:13,260 is implemented, it automatically takes the props 753 00:44:13,260 --> 00:44:16,390 and attaches it to that instance of the class. 754 00:44:16,390 --> 00:44:19,110 And so in order for us to get them in the render method, 755 00:44:19,110 --> 00:44:23,040 we do this dot props dot count. 756 00:44:23,040 --> 00:44:28,170 Does that make sense so far, going from a function to a class? 757 00:44:28,170 --> 00:44:32,410 We'll talk about this in depth the next lecture. 758 00:44:32,410 --> 00:44:35,040 And so we talked about this thing called state, 759 00:44:35,040 --> 00:44:38,070 and how do we actually go ahead and use that? 760 00:44:38,070 --> 00:44:40,704 Well, when we want to create our state, we actually 761 00:44:40,704 --> 00:44:42,120 do that in the constructor method. 762 00:44:42,120 --> 00:44:47,630 763 00:44:47,630 --> 00:44:50,830 And so the first thing that we want to do in our constructor method 764 00:44:50,830 --> 00:44:56,440 is actually called a super, which means allow 765 00:44:56,440 --> 00:44:58,780 React.Component to do stuff with the props 766 00:44:58,780 --> 00:45:01,290 that it would have done otherwise. 767 00:45:01,290 --> 00:45:03,534 And now go ahead and do what we want to do. 768 00:45:03,534 --> 00:45:04,450 What do we want to do? 769 00:45:04,450 --> 00:45:06,616 Well, we want to initialize this thing called state. 770 00:45:06,616 --> 00:45:18,830 771 00:45:18,830 --> 00:45:19,330 Cool. 772 00:45:19,330 --> 00:45:22,180 So now we have this thing called state, and how are we 773 00:45:22,180 --> 00:45:24,160 going to go ahead and update it? 774 00:45:24,160 --> 00:45:31,060 Well, maybe we should have something called increase count, which 775 00:45:31,060 --> 00:45:34,022 is a method on this instance. 776 00:45:34,022 --> 00:45:35,980 And let's go ahead and increase the count here. 777 00:45:35,980 --> 00:45:37,480 So how might I do that? 778 00:45:37,480 --> 00:45:45,730 Well, I should call this dot set state and pass in count is this dot state dot 779 00:45:45,730 --> 00:45:48,820 count plus 1. 780 00:45:48,820 --> 00:45:51,910 And so now we have a method on this instance called increase count 781 00:45:51,910 --> 00:45:52,720 that we can call. 782 00:45:52,720 --> 00:45:56,670 And it should, in theory, increase that count. 783 00:45:56,670 --> 00:45:59,824 And so rather than referencing the props down here, let's reference state. 784 00:45:59,824 --> 00:46:02,670 785 00:46:02,670 --> 00:46:04,910 And now it should be 0, and it's just going 786 00:46:04,910 --> 00:46:07,962 to stay at 0, because we're not doing anything. 787 00:46:07,962 --> 00:46:09,962 So we can go ahead and get rid of this interval. 788 00:46:09,962 --> 00:46:18,170 789 00:46:18,170 --> 00:46:24,040 And so how are we going to change that value of 0 to be something like 1? 790 00:46:24,040 --> 00:46:26,530 We have to invoke that method, and so let's go ahead 791 00:46:26,530 --> 00:46:28,880 and do that when we click a button. 792 00:46:28,880 --> 00:46:34,714 So let's have something like div here, and within that div, 793 00:46:34,714 --> 00:46:35,630 let's create a button. 794 00:46:35,630 --> 00:46:40,720 795 00:46:40,720 --> 00:46:45,904 And when we click that button, let's go ahead and invoke this thing 796 00:46:45,904 --> 00:46:46,820 called increase count. 797 00:46:46,820 --> 00:46:50,730 798 00:46:50,730 --> 00:46:51,940 And let's call it increase. 799 00:46:51,940 --> 00:47:09,570 800 00:47:09,570 --> 00:47:12,690 So now if we click this button, what do we expect to happen? 801 00:47:12,690 --> 00:47:18,270 802 00:47:18,270 --> 00:47:20,854 So notice how we pass this thing called unclick. 803 00:47:20,854 --> 00:47:22,020 What's the value of unclick? 804 00:47:22,020 --> 00:47:24,000 Or what function should we invoke? 805 00:47:24,000 --> 00:47:31,020 Well, we should invoke this dot increase count, which should be this. 806 00:47:31,020 --> 00:47:33,250 We'll see what it is in a second. 807 00:47:33,250 --> 00:47:36,360 And then that should call this dot set state, which 808 00:47:36,360 --> 00:47:38,340 should, in theory, increase count. 809 00:47:38,340 --> 00:47:39,890 So what happens? 810 00:47:39,890 --> 00:47:40,650 Uh-oh! 811 00:47:40,650 --> 00:47:42,910 Cannot read property set state of undefined. 812 00:47:42,910 --> 00:47:44,470 So there's a bug here. 813 00:47:44,470 --> 00:47:47,370 Can anybody spot the bug? 814 00:47:47,370 --> 00:47:51,510 Cannot read property set state of undefined. 815 00:47:51,510 --> 00:47:54,930 It even tells us exactly where that was. 816 00:47:54,930 --> 00:47:57,270 So we're seeing this dot set state, which 817 00:47:57,270 --> 00:48:00,800 I told you is a method that we can use. 818 00:48:00,800 --> 00:48:03,670 But it's saying, we cannot read a property of undefined, 819 00:48:03,670 --> 00:48:06,940 which implies that this is undefined here. 820 00:48:06,940 --> 00:48:07,590 Yeah? 821 00:48:07,590 --> 00:48:09,048 What do you think is going on here? 822 00:48:09,048 --> 00:48:12,540 AUDIENCE: [INAUDIBLE] 823 00:48:12,540 --> 00:48:13,590 JORDAN HAYASHI: Yeah. 824 00:48:13,590 --> 00:48:15,910 So we have to bind that function to this. 825 00:48:15,910 --> 00:48:19,560 So we talked about this and binding this towards the end of last lecture. 826 00:48:19,560 --> 00:48:27,170 And we talked about how this is bound on whatever object it's invoked on. 827 00:48:27,170 --> 00:48:30,930 And so right now, this isn't invoked on the class, right? 828 00:48:30,930 --> 00:48:33,480 It's invoked when you click that button. 829 00:48:33,480 --> 00:48:38,046 And so we're going to have to bind this to the value that we want it to be. 830 00:48:38,046 --> 00:48:40,920 And so towards the end of the lecture, we talked about different ways 831 00:48:40,920 --> 00:48:41,670 to bind this. 832 00:48:41,670 --> 00:48:42,900 Can anybody remember those? 833 00:48:42,900 --> 00:48:48,020 834 00:48:48,020 --> 00:48:48,520 Yeah? 835 00:48:48,520 --> 00:48:49,840 AUDIENCE: Bind method. 836 00:48:49,840 --> 00:48:50,714 JORDAN HAYASHI: Yeah. 837 00:48:50,714 --> 00:48:54,150 There's this thing called bind, which is a method on all functions. 838 00:48:54,150 --> 00:48:57,700 And similar to bind there is call and apply. 839 00:48:57,700 --> 00:49:02,170 And we also talked about a different way of writing functions, 840 00:49:02,170 --> 00:49:06,010 which actually lexically binds this. 841 00:49:06,010 --> 00:49:09,400 Do you guys remember how that was? 842 00:49:09,400 --> 00:49:14,500 Remember, if you use arrow notation, it automatically binds this for you. 843 00:49:14,500 --> 00:49:17,770 And so you can solve this problem in all three different ways. 844 00:49:17,770 --> 00:49:20,410 And so down here, if we wanted to do dot bind, 845 00:49:20,410 --> 00:49:25,040 we could do dot bind to this, which, since we're invoking it 846 00:49:25,040 --> 00:49:29,620 on the render method, which is a method that's invoked on the class, 847 00:49:29,620 --> 00:49:31,300 this is bound correctly. 848 00:49:31,300 --> 00:49:34,970 And so when we increase it, it will increase. 849 00:49:34,970 --> 00:49:36,570 We could also use-- 850 00:49:36,570 --> 00:49:38,770 well, call and apply don't really work here. 851 00:49:38,770 --> 00:49:42,010 But we could actually use arrow notation. 852 00:49:42,010 --> 00:49:51,740 So we can say, let's have an arrow notation down here, 853 00:49:51,740 --> 00:49:55,940 which creates a new, anonymous function. 854 00:49:55,940 --> 00:49:57,660 And what does that anonymous function do? 855 00:49:57,660 --> 00:50:00,880 Well, all it does is invoke increase count. 856 00:50:00,880 --> 00:50:05,390 And so since this we wrote as an ES6 arrow notation, 857 00:50:05,390 --> 00:50:09,312 it automatically binds this to be what we want it to be. 858 00:50:09,312 --> 00:50:13,560 859 00:50:13,560 --> 00:50:16,040 Does that makes sense? 860 00:50:16,040 --> 00:50:19,040 There are a couple other places that you could do this. 861 00:50:19,040 --> 00:50:21,230 We could also do it in the constructor method. 862 00:50:21,230 --> 00:50:27,950 You could do this dot increase count equals this dot increase count dot bind 863 00:50:27,950 --> 00:50:29,990 this. 864 00:50:29,990 --> 00:50:32,500 Or lastly, you could also-- 865 00:50:32,500 --> 00:50:35,720 and then down here, you'd just have to do this dot increase count. 866 00:50:35,720 --> 00:50:41,702 Or alternatively, you could actually just define this in the constructor. 867 00:50:41,702 --> 00:50:51,830 868 00:50:51,830 --> 00:50:53,580 And so that would be the other way. 869 00:50:53,580 --> 00:51:00,330 So you could say, this dot increase count equals an arrow notation in this. 870 00:51:00,330 --> 00:51:08,715 But let's stick with this way for now. 871 00:51:08,715 --> 00:51:09,461 Cool. 872 00:51:09,461 --> 00:51:12,210 So now we have a button that works, that increases as we expected. 873 00:51:12,210 --> 00:51:15,130 874 00:51:15,130 --> 00:51:19,450 So what if instead of increasing it by 1, we wanted to increase it by 2? 875 00:51:19,450 --> 00:51:22,430 Well, of course, you could just do this. 876 00:51:22,430 --> 00:51:26,080 Let's say we want to do it by sending state twice. 877 00:51:26,080 --> 00:51:35,600 878 00:51:35,600 --> 00:51:37,100 So what do we expect to happen here? 879 00:51:37,100 --> 00:51:41,430 880 00:51:41,430 --> 00:51:46,650 We expect it to set state to be count as this dot state dot count plus 1 is 1. 881 00:51:46,650 --> 00:51:51,990 And then [? it does ?] set count to be 1 plus 1 to be 2, right? 882 00:51:51,990 --> 00:51:56,060 But we see it's only going up by 1. 883 00:51:56,060 --> 00:51:59,160 Why might that be? 884 00:51:59,160 --> 00:52:03,932 Well, set state calls are actually batched and run asynchronously, 885 00:52:03,932 --> 00:52:06,890 which means React is smart enough to know that if this dot set state is 886 00:52:06,890 --> 00:52:08,750 getting called a bunch of times in a row, 887 00:52:08,750 --> 00:52:12,620 rather than immediately doing that, maybe it would be better to just batch 888 00:52:12,620 --> 00:52:15,500 them and do it all in one go. 889 00:52:15,500 --> 00:52:18,670 And like I said, if you pass an object to this dot set state, 890 00:52:18,670 --> 00:52:21,100 it will just merge it into the new state. 891 00:52:21,100 --> 00:52:23,150 And so what is actually happening when you 892 00:52:23,150 --> 00:52:26,750 call this dot set state twice in a row? 893 00:52:26,750 --> 00:52:28,560 Well, they get batched together. 894 00:52:28,560 --> 00:52:34,160 And so it says, OK, now we know we need to merge 895 00:52:34,160 --> 00:52:38,450 into the old state these two objects. 896 00:52:38,450 --> 00:52:45,920 And so it's basically saying, merge the current state-- in this case, 897 00:52:45,920 --> 00:52:52,449 it's count is 0. 898 00:52:52,449 --> 00:52:53,990 And then what are we merging into it? 899 00:52:53,990 --> 00:52:58,100 Well, we want to merge this dot state dot count plus 1. 900 00:52:58,100 --> 00:53:01,950 901 00:53:01,950 --> 00:53:04,360 And then we also want to merge that same thing again. 902 00:53:04,360 --> 00:53:09,195 903 00:53:09,195 --> 00:53:11,820 And so what happens when you merge these three things together? 904 00:53:11,820 --> 00:53:14,440 905 00:53:14,440 --> 00:53:17,760 Well, these two get merged together, and it actually turns into this. 906 00:53:17,760 --> 00:53:23,000 907 00:53:23,000 --> 00:53:28,201 Well, you go left to right, so count gets merged, 908 00:53:28,201 --> 00:53:29,950 gets replaced by this dot state dot count, 909 00:53:29,950 --> 00:53:34,700 which then gets replaced by this dot state dot count plus 1. 910 00:53:34,700 --> 00:53:41,160 And so that is actually just 0 plus 1, which is why we end up getting a 1 911 00:53:41,160 --> 00:53:41,825 here. 912 00:53:41,825 --> 00:53:42,700 Does that make sense? 913 00:53:42,700 --> 00:53:46,780 914 00:53:46,780 --> 00:53:49,540 And so we can prove that it runs asynchronously by logging. 915 00:53:49,540 --> 00:53:55,140 916 00:53:55,140 --> 00:54:00,758 So what do we expect this dot state dot count to be at line 21? 917 00:54:00,758 --> 00:54:05,630 AUDIENCE: [INAUDIBLE] 918 00:54:05,630 --> 00:54:11,200 JORDAN HAYASHI: It actually logs 0, because when you call this dot set 919 00:54:11,200 --> 00:54:14,130 state, all it does is add it to that queue 920 00:54:14,130 --> 00:54:16,090 that we know it's eventually going to execute. 921 00:54:16,090 --> 00:54:17,298 Same with this dot set state. 922 00:54:17,298 --> 00:54:19,640 It gets added to a queue as well. 923 00:54:19,640 --> 00:54:23,170 And so when we get to line 21 here, what has actually executed? 924 00:54:23,170 --> 00:54:24,580 Well, nothing. 925 00:54:24,580 --> 00:54:27,550 And so this dot state dot count still has a value of 0, 926 00:54:27,550 --> 00:54:32,050 and then only after that do those batch set states run. 927 00:54:32,050 --> 00:54:38,680 So what if we actually did care about the previous count before? 928 00:54:38,680 --> 00:54:41,200 Say we wanted to add 1 to the previous count, 929 00:54:41,200 --> 00:54:46,800 but we actually really wanted that state to exist beforehand. 930 00:54:46,800 --> 00:54:49,100 Well, we can pass it what's called an updater function, 931 00:54:49,100 --> 00:54:53,840 and that's a function that takes the previous state 932 00:54:53,840 --> 00:55:00,960 and returns some new state. 933 00:55:00,960 --> 00:55:06,110 In this case, we want it to be the previous state, dot count plus 1. 934 00:55:06,110 --> 00:55:17,110 935 00:55:17,110 --> 00:55:19,494 So now we have two set states, where rather 936 00:55:19,494 --> 00:55:21,660 than just passing an object to emerge, we're saying, 937 00:55:21,660 --> 00:55:23,530 actually run this function. 938 00:55:23,530 --> 00:55:25,950 This function takes the old state and returns 939 00:55:25,950 --> 00:55:31,956 a new object, which is where the count is the previous state's count plus 1. 940 00:55:31,956 --> 00:55:34,710 And so now when it batches it, it says, oh, we actually 941 00:55:34,710 --> 00:55:36,380 need to run this function twice. 942 00:55:36,380 --> 00:55:42,200 And so now when we click, it actually goes up by two. 943 00:55:42,200 --> 00:55:49,060 944 00:55:49,060 --> 00:55:53,602 So any questions on React, props, or state thus far? 945 00:55:53,602 --> 00:55:58,010 946 00:55:58,010 --> 00:55:58,510 Cool. 947 00:55:58,510 --> 00:55:59,890 Let's go ahead and take a quick break. 948 00:55:59,890 --> 00:56:02,765 And then when we come back, we can play with React a little bit more. 949 00:56:02,765 --> 00:56:05,320 950 00:56:05,320 --> 00:56:06,420 Hello, and welcome back. 951 00:56:06,420 --> 00:56:10,300 So before the break, we were talking about React and props and state. 952 00:56:10,300 --> 00:56:13,060 And now with all three, we can actually go ahead and start 953 00:56:13,060 --> 00:56:16,720 building pretty powerful apps. 954 00:56:16,720 --> 00:56:19,150 And so for homework, for the project zero, 955 00:56:19,150 --> 00:56:21,605 you guys have been working on a to do app, which you've 956 00:56:21,605 --> 00:56:23,230 been writing in all vanilla JavaScript. 957 00:56:23,230 --> 00:56:25,240 And today for the rest of the class, we're 958 00:56:25,240 --> 00:56:28,110 going to go ahead and together implement that in all React. 959 00:56:28,110 --> 00:56:35,440 960 00:56:35,440 --> 00:56:38,560 So what are some strategies you may go around doing 961 00:56:38,560 --> 00:56:41,590 your thing in vanilla JavaScript? 962 00:56:41,590 --> 00:56:47,710 Well, say we had to dos created as list items, where within each list item, 963 00:56:47,710 --> 00:56:50,049 we have input, which has a checkbox. 964 00:56:50,049 --> 00:56:53,090 Maybe you're doing the challenge and you want to take care of the deletes 965 00:56:53,090 --> 00:56:53,885 as well. 966 00:56:53,885 --> 00:56:56,010 And then, of course, you're going to have some span 967 00:56:56,010 --> 00:56:59,010 or some way of displaying text. 968 00:56:59,010 --> 00:57:01,400 And so maybe have a couple different functions. 969 00:57:01,400 --> 00:57:03,290 One is to create a to do. 970 00:57:03,290 --> 00:57:04,629 One is to delete a to do. 971 00:57:04,629 --> 00:57:07,670 And what might you do in those functions in order to create those to dos? 972 00:57:07,670 --> 00:57:10,400 973 00:57:10,400 --> 00:57:14,161 Well, first, maybe you'll get the text. 974 00:57:14,161 --> 00:57:14,660 Then what? 975 00:57:14,660 --> 00:57:17,740 Maybe go ahead and using document dot create element, 976 00:57:17,740 --> 00:57:20,640 maybe you want to create a list item. 977 00:57:20,640 --> 00:57:21,140 Then what? 978 00:57:21,140 --> 00:57:23,285 You'll probably have to create the input. 979 00:57:23,285 --> 00:57:26,050 980 00:57:26,050 --> 00:57:28,720 Then probably create a button. 981 00:57:28,720 --> 00:57:30,970 Create the span. 982 00:57:30,970 --> 00:57:33,550 And maybe at the end, you hook those all up together 983 00:57:33,550 --> 00:57:37,200 and append those to the list. 984 00:57:37,200 --> 00:57:40,210 985 00:57:40,210 --> 00:57:42,320 And so how might you take care of delete? 986 00:57:42,320 --> 00:57:44,660 Well, find the to do. 987 00:57:44,660 --> 00:57:48,170 988 00:57:48,170 --> 00:57:51,241 Maybe delete that. 989 00:57:51,241 --> 00:57:51,740 Then what? 990 00:57:51,740 --> 00:57:53,050 Make sure to update the counts. 991 00:57:53,050 --> 00:57:55,342 992 00:57:55,342 --> 00:57:57,300 And maybe we have to do that over here as well. 993 00:57:57,300 --> 00:58:02,000 994 00:58:02,000 --> 00:58:06,632 So you see how we're doing this in a very imperative manner. 995 00:58:06,632 --> 00:58:09,340 Using JavaScript, we tell the browser exactly what we want to do. 996 00:58:09,340 --> 00:58:11,660 Well, we know that our to dos are shaped like this. 997 00:58:11,660 --> 00:58:13,140 So first go ahead and get the text. 998 00:58:13,140 --> 00:58:15,440 Maybe create that [INAUDIBLE],, create the checkbox, 999 00:58:15,440 --> 00:58:17,360 create all these other things. 1000 00:58:17,360 --> 00:58:20,430 Append them to each other, and maybe append them to the list. 1001 00:58:20,430 --> 00:58:24,650 And so we go ahead, and we created a new to do, but we had to do a lot of steps 1002 00:58:24,650 --> 00:58:26,200 in order to get there. 1003 00:58:26,200 --> 00:58:30,870 And so what might be an easier way to do this? 1004 00:58:30,870 --> 00:58:37,570 Well, in to do one, maybe we wanted to abstract out the creation of the 1005 00:58:37,570 --> 00:58:38,690 to do itself. 1006 00:58:38,690 --> 00:58:40,957 So maybe in that new create to do function, 1007 00:58:40,957 --> 00:58:43,790 we go ahead and make the list item, make the input, make the button, 1008 00:58:43,790 --> 00:58:44,660 make the span. 1009 00:58:44,660 --> 00:58:46,299 Hook those all up together. 1010 00:58:46,299 --> 00:58:48,590 But that's one, little, discrete part of the UI, right? 1011 00:58:48,590 --> 00:58:50,930 We're going to start to componentize these things. 1012 00:58:50,930 --> 00:58:54,410 Maybe abstract out a function for creating the to do, and then in the new 1013 00:58:54,410 --> 00:58:58,500 to do, we can still get the text, update the counts, and append to the list. 1014 00:58:58,500 --> 00:59:02,150 But rather than doing all of this work in the new to do function, 1015 00:59:02,150 --> 00:59:04,190 maybe we just invoke create to do. 1016 00:59:04,190 --> 00:59:06,530 And so we're starting to break out something 1017 00:59:06,530 --> 00:59:09,800 that was pretty complicated into now two separate steps, where 1018 00:59:09,800 --> 00:59:12,870 each step is relatively simple. 1019 00:59:12,870 --> 00:59:15,950 But still in each step, we have to go about all of these steps 1020 00:59:15,950 --> 00:59:21,060 in order to get what we want. 1021 00:59:21,060 --> 00:59:26,090 So what might be a better way to do this? 1022 00:59:26,090 --> 00:59:30,680 Well, rather than going through the steps, where we say, oh, hey, 1023 00:59:30,680 --> 00:59:34,280 get me a new element called a list item and input button in a span, 1024 00:59:34,280 --> 00:59:38,310 maybe we wanted just to write that all somewhat declaratively ourselves. 1025 00:59:38,310 --> 00:59:41,960 And so we can actually do something called innerHTML, 1026 00:59:41,960 --> 00:59:43,610 so say we created a list item. 1027 00:59:43,610 --> 00:59:53,350 1028 00:59:53,350 --> 00:59:57,200 And maybe we want to take advantage of JavaScript's ability 1029 00:59:57,200 --> 01:00:01,190 to do in-line string concatenation in order 1030 01:00:01,190 --> 01:00:04,080 to create some HTML directly here. 1031 01:00:04,080 --> 01:00:10,930 So we could do something like li.innerHTML, 1032 01:00:10,930 --> 01:00:13,970 and we can start actually putting this directly in here. 1033 01:00:13,970 --> 01:00:27,310 1034 01:00:27,310 --> 01:00:30,130 And so this will actually, in a more declarative manner, say, 1035 01:00:30,130 --> 01:00:32,710 hey, I want an input, a button in the span, 1036 01:00:32,710 --> 01:00:36,580 and just stick this in the innerHTML of that list item. 1037 01:00:36,580 --> 01:00:39,490 And so it's starting to look somewhat like something 1038 01:00:39,490 --> 01:00:41,110 we've seen before, right? 1039 01:00:41,110 --> 01:00:46,390 It's starting to represent more of a React component. 1040 01:00:46,390 --> 01:00:50,320 Do you guys see how that is starting to look a lot like what we were 1041 01:00:50,320 --> 01:00:52,300 doing before, using React components? 1042 01:00:52,300 --> 01:00:56,620 1043 01:00:56,620 --> 01:01:03,310 But let's stick with vanilla JavaScript still and take this a step further 1044 01:01:03,310 --> 01:01:05,190 and actually store the to dos in memory. 1045 01:01:05,190 --> 01:01:08,870 And so what have we been previously using to store to dos? 1046 01:01:08,870 --> 01:01:12,050 Well, we've just been adding them to the DOM, 1047 01:01:12,050 --> 01:01:15,810 and then using the DOM as a way to remember exactly what our to dos are. 1048 01:01:15,810 --> 01:01:18,770 But what if we actually wanted to rather than storing it on the DOM, 1049 01:01:18,770 --> 01:01:21,110 actually store that in JavaScript, in some sort of data 1050 01:01:21,110 --> 01:01:25,310 structure in our JavaScripted memory? 1051 01:01:25,310 --> 01:01:29,010 Well, that might be easier to do stuff like delete on. 1052 01:01:29,010 --> 01:01:31,475 But how are we going to get that to the DOM? 1053 01:01:31,475 --> 01:01:34,100 Well, we're going to actually have to write a method ourselves. 1054 01:01:34,100 --> 01:01:39,144 And so maybe we have to dos stored in memory as an array. 1055 01:01:39,144 --> 01:01:41,060 Maybe we have something called a render to do, 1056 01:01:41,060 --> 01:01:43,140 which will actually render a single to do. 1057 01:01:43,140 --> 01:01:47,270 And by render, I mean turn that to do, an object in memory, 1058 01:01:47,270 --> 01:01:51,086 into actual HTML, something that the browser can display. 1059 01:01:51,086 --> 01:01:53,210 And so that takes care of rendering a single to do, 1060 01:01:53,210 --> 01:01:55,459 but how are we going to render that entire to do list? 1061 01:01:55,459 --> 01:02:03,170 Well, maybe we want to clear the list and actually map over the to dos. 1062 01:02:03,170 --> 01:02:04,400 So we do to dos dot map. 1063 01:02:04,400 --> 01:02:05,233 What are we mapping? 1064 01:02:05,233 --> 01:02:07,770 Well, let's actually render each of those to dos. 1065 01:02:07,770 --> 01:02:09,910 And for each of the to dos that we rendered, 1066 01:02:09,910 --> 01:02:13,800 go ahead and append that to the list. 1067 01:02:13,800 --> 01:02:17,120 And so now we went from storing to dos in memory, 1068 01:02:17,120 --> 01:02:21,110 creating this concept of rendering, where we turn a single JavaScript 1069 01:02:21,110 --> 01:02:25,940 object into an actual thing that the browser can display. 1070 01:02:25,940 --> 01:02:28,160 And then we have this concept called render, which 1071 01:02:28,160 --> 01:02:31,010 actually renders all of our to dos. 1072 01:02:31,010 --> 01:02:33,890 And so we go from what used to be a very imperative way of writing 1073 01:02:33,890 --> 01:02:38,090 JavaScript, and going from having a single to do to appending that 1074 01:02:38,090 --> 01:02:39,210 to the DOM. 1075 01:02:39,210 --> 01:02:41,090 So now we're a more declarative way. 1076 01:02:41,090 --> 01:02:44,030 We're declaring that a bunch of to dos may exist. 1077 01:02:44,030 --> 01:02:47,810 We're declaring that, hey, here's a way to render a single to do 1078 01:02:47,810 --> 01:02:55,464 and writing a way to turn that list into a full rendered page. 1079 01:02:55,464 --> 01:02:57,380 And so now when we want to add a to do, rather 1080 01:02:57,380 --> 01:03:00,500 than doing a bunch of DOM manipulation, maybe we actually 1081 01:03:00,500 --> 01:03:05,816 want to just do something like a new to do and push that to the list. 1082 01:03:05,816 --> 01:03:08,690 Well, once you push it to the list, now we have to manually say, hey, 1083 01:03:08,690 --> 01:03:09,560 we updated the list. 1084 01:03:09,560 --> 01:03:13,040 Let's go ahead and render that to the page. 1085 01:03:13,040 --> 01:03:15,440 And so now if we're storing everything in memory, 1086 01:03:15,440 --> 01:03:18,300 it becomes a lot easier to remove things. 1087 01:03:18,300 --> 01:03:20,490 And so how are we going to remove the to dos? 1088 01:03:20,490 --> 01:03:22,864 Well, we have to figure out exactly how to do the to dos, 1089 01:03:22,864 --> 01:03:24,690 and this is just an implementation detail. 1090 01:03:24,690 --> 01:03:27,360 But we can actually reset to dos to be a filtered list. 1091 01:03:27,360 --> 01:03:35,010 So just filter them by excluding that to do that we didn't want to be included. 1092 01:03:35,010 --> 01:03:37,220 And then we, again, since we changed everything, 1093 01:03:37,220 --> 01:03:40,220 now we're going to have to go and manually kick off a render. 1094 01:03:40,220 --> 01:03:43,640 And so now we're writing JavaScript in more of a declarative paradigm, more 1095 01:03:43,640 --> 01:03:46,160 like what we saw in React earlier. 1096 01:03:46,160 --> 01:03:50,960 But we're still implementing stuff like rendering and rendering a single to do 1097 01:03:50,960 --> 01:03:53,570 and kicking off these things manually. 1098 01:03:53,570 --> 01:03:57,320 And let's actually see how this looks if we were all to do it in React, 1099 01:03:57,320 --> 01:04:01,490 where React actually handles a lot of the data rendering to the screen, 1100 01:04:01,490 --> 01:04:04,550 using a library rather than stuff that we have to write manually. 1101 01:04:04,550 --> 01:04:08,036 1102 01:04:08,036 --> 01:04:10,770 So let's actually do this from scratch. 1103 01:04:10,770 --> 01:04:12,170 First let me save this. 1104 01:04:12,170 --> 01:04:33,790 1105 01:04:33,790 --> 01:04:39,270 So let's go ahead and actually, from scratch, implement our to do list 1106 01:04:39,270 --> 01:04:40,770 all in React. 1107 01:04:40,770 --> 01:04:43,440 So of course, we're going to have to store stuff in state. 1108 01:04:43,440 --> 01:04:48,439 So rather than having app be a function, what might we want to do instead? 1109 01:04:48,439 --> 01:04:49,230 Have it be a class. 1110 01:04:49,230 --> 01:04:55,896 1111 01:04:55,896 --> 01:04:58,020 And just like in the example I was showing earlier, 1112 01:04:58,020 --> 01:05:00,022 we have a concept of rendering that app. 1113 01:05:00,022 --> 01:05:01,980 React components actually do this automatically 1114 01:05:01,980 --> 01:05:04,260 for you in this render method. 1115 01:05:04,260 --> 01:05:18,054 1116 01:05:18,054 --> 01:05:20,470 And so let's go ahead and implement that rendering method. 1117 01:05:20,470 --> 01:05:32,980 1118 01:05:32,980 --> 01:05:36,440 And so returning this. 1119 01:05:36,440 --> 01:05:42,745 1120 01:05:42,745 --> 01:05:50,220 And now we have a blank to do list. 1121 01:05:50,220 --> 01:05:52,410 So now we have a class called app. 1122 01:05:52,410 --> 01:05:56,910 It's extending React component, which gives us what? 1123 01:05:56,910 --> 01:05:59,400 It allows us to have state, and it gives us access 1124 01:05:59,400 --> 01:06:02,790 to this thing called this dot set state in order to update the state. 1125 01:06:02,790 --> 01:06:06,120 And this render method goes ahead and just renders a blank div 1126 01:06:06,120 --> 01:06:07,405 with a blank UL. 1127 01:06:07,405 --> 01:06:07,904 Yeah? 1128 01:06:07,904 --> 01:06:09,772 AUDIENCE: In the previous version of render, 1129 01:06:09,772 --> 01:06:13,369 why was it returning a [INAUDIBLE]? 1130 01:06:13,369 --> 01:06:14,160 JORDAN HAYASHI: Oh. 1131 01:06:14,160 --> 01:06:21,870 So the question was in my example to do app three, 1132 01:06:21,870 --> 01:06:26,100 why was render up here returning false? 1133 01:06:26,100 --> 01:06:30,340 So we'll talk about handling events in a little bit. 1134 01:06:30,340 --> 01:06:34,830 But basically, browsers actually all have a way to handle events. 1135 01:06:34,830 --> 01:06:37,320 And so if you do something like click a Submit button, 1136 01:06:37,320 --> 01:06:40,890 it will automatically go ahead and submit a form for you 1137 01:06:40,890 --> 01:06:42,670 and refresh the page. 1138 01:06:42,670 --> 01:06:46,470 And so a lot of times, when we actually want to handle that all in JavaScript, 1139 01:06:46,470 --> 01:06:49,864 we have to have a way to disable the automatic page refresh. 1140 01:06:49,864 --> 01:06:52,030 And so there are a couple different ways to do that. 1141 01:06:52,030 --> 01:06:55,315 You can do something like event dot stop propagation or event dot-- 1142 01:06:55,315 --> 01:06:58,637 1143 01:06:58,637 --> 01:07:00,720 I forget the exact method name, but it's something 1144 01:07:00,720 --> 01:07:02,430 like stop this event from happening. 1145 01:07:02,430 --> 01:07:04,790 Prevent default. Event dot prevent default. 1146 01:07:04,790 --> 01:07:06,810 And a shorthand for doing both of those is just 1147 01:07:06,810 --> 01:07:09,750 returning false out of whatever handler they do. 1148 01:07:09,750 --> 01:07:13,437 And so when I do return false from this render, that 1149 01:07:13,437 --> 01:07:15,270 means if I ever want to do something, like I 1150 01:07:15,270 --> 01:07:20,040 add to do, and hook it up to a button that might automatically submit a form, 1151 01:07:20,040 --> 01:07:23,340 I can return false from that instead and automatically 1152 01:07:23,340 --> 01:07:25,030 prevent that from happening. 1153 01:07:25,030 --> 01:07:30,180 And so this is just some shorthand for rather than having submit buttons 1154 01:07:30,180 --> 01:07:33,390 automatically refresh a page, it just blocks that 1155 01:07:33,390 --> 01:07:35,522 and lets me handle it all in JavaScript. 1156 01:07:35,522 --> 01:07:41,295 1157 01:07:41,295 --> 01:07:41,795 Cool. 1158 01:07:41,795 --> 01:07:45,570 So back to this example in React. 1159 01:07:45,570 --> 01:07:49,230 So we're up to this point where we have a class called app. 1160 01:07:49,230 --> 01:07:52,380 Right now, we have no state associated with it, and all we're doing 1161 01:07:52,380 --> 01:07:54,220 is rendering this empty list. 1162 01:07:54,220 --> 01:07:57,120 And so how might we go about implementing these features 1163 01:07:57,120 --> 01:08:00,261 that we have in our to do project? 1164 01:08:00,261 --> 01:08:02,760 Well, first, we're going to want to start tracking something 1165 01:08:02,760 --> 01:08:03,843 in [? our ?] state, right? 1166 01:08:03,843 --> 01:08:07,540 Maybe we want to track the to dos. 1167 01:08:07,540 --> 01:08:11,240 And so how do we go ahead and create something called state? 1168 01:08:11,240 --> 01:08:14,850 Well, first, we want to invoke the constructor, which 1169 01:08:14,850 --> 01:08:19,680 for now takes no arguments, since we're not actually passing any props to app. 1170 01:08:19,680 --> 01:08:21,750 First thing we do in the constructor is always 1171 01:08:21,750 --> 01:08:27,840 called the super, which is invoking the constructor on React.Component, 1172 01:08:27,840 --> 01:08:30,359 which gives us things like this dot set state. 1173 01:08:30,359 --> 01:08:33,630 And then now we have the opportunity to initialize our state, 1174 01:08:33,630 --> 01:08:38,790 so we can go ahead and do this.state equals whatever. 1175 01:08:38,790 --> 01:08:40,861 And so what might we want to store in state? 1176 01:08:40,861 --> 01:08:42,259 AUDIENCE: To do list. 1177 01:08:42,259 --> 01:08:43,800 JORDAN HAYASHI: Yeah, the to do list. 1178 01:08:43,800 --> 01:08:45,633 Is there anything else that we should store? 1179 01:08:45,633 --> 01:08:47,870 1180 01:08:47,870 --> 01:08:50,451 Nothing I can think of off the top of the head. 1181 01:08:50,451 --> 01:08:53,450 But thankfully, if we want to add something later, it's very easy to do. 1182 01:08:53,450 --> 01:09:00,350 And so let's just do to dos, and let's store this all on an empty list. 1183 01:09:00,350 --> 01:09:00,850 Cool. 1184 01:09:00,850 --> 01:09:03,260 So now we have this concept of state. 1185 01:09:03,260 --> 01:09:06,319 We now have this concept of to dos, which is stored in our state, 1186 01:09:06,319 --> 01:09:08,189 but we're not doing anything with it. 1187 01:09:08,189 --> 01:09:11,510 And so let's actually render those to dos to the screen. 1188 01:09:11,510 --> 01:09:14,870 So we might want to do it within the unordered list. 1189 01:09:14,870 --> 01:09:18,290 Let's have something like this dot state dot to dos. 1190 01:09:18,290 --> 01:09:21,479 And again, we wrap things in single curly braces 1191 01:09:21,479 --> 01:09:23,979 when we want to execute them as JavaScript. 1192 01:09:23,979 --> 01:09:27,770 And so we have this dot state dot to dos, which is an empty array. 1193 01:09:27,770 --> 01:09:31,130 But we can't just take for granted that it's always an empty array. 1194 01:09:31,130 --> 01:09:35,270 The point of writing declarative code is that we want this to hold true, 1195 01:09:35,270 --> 01:09:37,340 no matter what the state is. 1196 01:09:37,340 --> 01:09:40,819 And so we just assume that this is full of to dos, and so we can go ahead 1197 01:09:40,819 --> 01:09:42,830 and map over that and render each to do. 1198 01:09:42,830 --> 01:09:46,520 1199 01:09:46,520 --> 01:09:49,370 So for each to do, let's actually create a to do. 1200 01:09:49,370 --> 01:09:58,180 1201 01:09:58,180 --> 01:10:01,420 All right, so I'm mapping out the to dos, and for each to do, 1202 01:10:01,420 --> 01:10:05,710 I'm creating this tag called uppercase to do. 1203 01:10:05,710 --> 01:10:10,970 So who remembers what uppercase tags mean? 1204 01:10:10,970 --> 01:10:12,760 AUDIENCE: It's a React component. 1205 01:10:12,760 --> 01:10:15,550 JORDAN HAYASHI: Yeah, it's a React component. 1206 01:10:15,550 --> 01:10:19,690 And we now have to describe something called a React component called capital 1207 01:10:19,690 --> 01:10:20,380 to do. 1208 01:10:20,380 --> 01:10:21,796 And so let's go ahead and do that. 1209 01:10:21,796 --> 01:10:24,100 1210 01:10:24,100 --> 01:10:26,820 And so just like the examples that I showed you earlier, 1211 01:10:26,820 --> 01:10:29,177 where we abstracted out the concept of creating a to do, 1212 01:10:29,177 --> 01:10:30,510 we can do that in React as well. 1213 01:10:30,510 --> 01:10:32,870 So let's have this thing called a to do. 1214 01:10:32,870 --> 01:10:35,700 And what it does is it takes some props. 1215 01:10:35,700 --> 01:10:37,890 We can call this variable whatever we want, 1216 01:10:37,890 --> 01:10:39,947 but the React convention is to call it props. 1217 01:10:39,947 --> 01:10:41,280 And what are we going to return? 1218 01:10:41,280 --> 01:10:46,170 Well, let's just return an unordered list, or a list item. 1219 01:10:46,170 --> 01:10:47,730 What might we have in that list item? 1220 01:10:47,730 --> 01:10:50,360 1221 01:10:50,360 --> 01:10:53,520 Well, we had an input of type checkbox. 1222 01:10:53,520 --> 01:10:56,960 1223 01:10:56,960 --> 01:11:00,680 We had a button that allowed us to delete. 1224 01:11:00,680 --> 01:11:03,440 1225 01:11:03,440 --> 01:11:06,605 And last but not least, we had some text. 1226 01:11:06,605 --> 01:11:08,210 And what was in that text? 1227 01:11:08,210 --> 01:11:10,670 Well, probably just props, dots-- 1228 01:11:10,670 --> 01:11:13,040 we can call it the text for the to do. 1229 01:11:13,040 --> 01:11:18,581 1230 01:11:18,581 --> 01:11:19,080 Cool. 1231 01:11:19,080 --> 01:11:23,086 So now we declaratively just said, hey, every time we want a to do, 1232 01:11:23,086 --> 01:11:24,210 this is what it looks like. 1233 01:11:24,210 --> 01:11:26,494 It's a list item, and inside it, we have an input. 1234 01:11:26,494 --> 01:11:27,660 It's going to be a checkbox. 1235 01:11:27,660 --> 01:11:29,090 We're going to have a button called delete. 1236 01:11:29,090 --> 01:11:31,080 It doesn't actually do anything for now. 1237 01:11:31,080 --> 01:11:34,370 And we also have a span, and what's that value of the span? 1238 01:11:34,370 --> 01:11:36,720 Well, just look at my props and grab the text. 1239 01:11:36,720 --> 01:11:47,390 1240 01:11:47,390 --> 01:11:48,890 OK, so now what do we have to do? 1241 01:11:48,890 --> 01:11:52,380 Maybe we should add a way to add to dos. 1242 01:11:52,380 --> 01:11:57,585 So let's create a method called add to do. 1243 01:11:57,585 --> 01:11:59,060 And what should we do first? 1244 01:11:59,060 --> 01:12:01,590 Maybe we should get some text. 1245 01:12:01,590 --> 01:12:07,600 So there are many different ways to do this. 1246 01:12:07,600 --> 01:12:09,008 Let's just for now prompt. 1247 01:12:09,008 --> 01:12:20,480 1248 01:12:20,480 --> 01:12:22,820 And then what do we want to do with that? 1249 01:12:22,820 --> 01:12:25,160 We have text. 1250 01:12:25,160 --> 01:12:27,160 What should we actually do with it? 1251 01:12:27,160 --> 01:12:31,660 1252 01:12:31,660 --> 01:12:33,660 AUDIENCE: Add it to the to do list. 1253 01:12:33,660 --> 01:12:35,430 JORDAN HAYASHI: Yeah, we should add it to our to do list. 1254 01:12:35,430 --> 01:12:36,763 And how are we going to do that? 1255 01:12:36,763 --> 01:12:39,220 1256 01:12:39,220 --> 01:12:41,760 We can just do this dot state equals something, right? 1257 01:12:41,760 --> 01:12:44,280 1258 01:12:44,280 --> 01:12:44,790 No. 1259 01:12:44,790 --> 01:12:46,623 There's only one way to update state, right? 1260 01:12:46,623 --> 01:12:49,334 We should do this dot set state. 1261 01:12:49,334 --> 01:12:50,250 And what are we doing? 1262 01:12:50,250 --> 01:13:01,380 Well, we have the to do equal this dot state dot to dos. 1263 01:13:01,380 --> 01:13:03,600 And then additional thing. 1264 01:13:03,600 --> 01:13:06,720 And so the way that we've added to an array 1265 01:13:06,720 --> 01:13:10,590 thus far is by doing this sum array dot push. 1266 01:13:10,590 --> 01:13:13,650 What that does is it actually mutates the array. 1267 01:13:13,650 --> 01:13:17,760 And so the way that React knows that it should update 1268 01:13:17,760 --> 01:13:22,450 is it sees if the values that are passed to it are different. 1269 01:13:22,450 --> 01:13:25,116 And as we learned a couple lectures ago, all objects 1270 01:13:25,116 --> 01:13:26,490 are actually stored by reference. 1271 01:13:26,490 --> 01:13:29,787 And so when we go ahead and mutate an object, 1272 01:13:29,787 --> 01:13:31,370 the reference doesn't actually change. 1273 01:13:31,370 --> 01:13:35,070 And so the React paradigm is rather than mutating these props, 1274 01:13:35,070 --> 01:13:37,780 we should actually create new ones. 1275 01:13:37,780 --> 01:13:43,230 And so a quick way to create a new array is 1276 01:13:43,230 --> 01:13:45,150 by using this dot dot dot notation, which 1277 01:13:45,150 --> 01:13:50,430 means given an array, if you dot dot dot array, 1278 01:13:50,430 --> 01:13:53,670 it just pulls out all of those values of the array. 1279 01:13:53,670 --> 01:13:59,100 And so when we do something like brackets dot dot dot some array, 1280 01:13:59,100 --> 01:14:02,700 it pulls out all the values of that array and puts it into a new array. 1281 01:14:02,700 --> 01:14:05,441 And so this is a quick way of cloning an array. 1282 01:14:05,441 --> 01:14:08,190 And so now the array reference is changed, but the values in there 1283 01:14:08,190 --> 01:14:10,390 are all the same. 1284 01:14:10,390 --> 01:14:16,500 And so now we've cloned the array, and now we should add a new to do. 1285 01:14:16,500 --> 01:14:23,380 And so let's call our to dos objects that have a text field, 1286 01:14:23,380 --> 01:14:24,802 and that can be the text. 1287 01:14:24,802 --> 01:14:29,890 1288 01:14:29,890 --> 01:14:31,840 So there's a small bug in our program now. 1289 01:14:31,840 --> 01:14:34,840 Well, one, we don't know how to add a list. 1290 01:14:34,840 --> 01:14:36,170 Add to that. 1291 01:14:36,170 --> 01:14:45,032 So let's go ahead and create a button that can add a to do. 1292 01:14:45,032 --> 01:14:46,990 So now you have a button, but it's not actually 1293 01:14:46,990 --> 01:14:49,240 doing anything when we click it. 1294 01:14:49,240 --> 01:14:54,070 So first we need to set up an event handler, 1295 01:14:54,070 --> 01:14:57,780 so when that button is clicked, what should it do? 1296 01:14:57,780 --> 01:15:02,715 Well, it should do this dot add to do. 1297 01:15:02,715 --> 01:15:04,615 So what is wrong with this code? 1298 01:15:04,615 --> 01:15:08,890 1299 01:15:08,890 --> 01:15:11,940 Why isn't it working? 1300 01:15:11,940 --> 01:15:13,880 Yeah, this is not bound to what it should be. 1301 01:15:13,880 --> 01:15:15,820 And so how are we going to fix that? 1302 01:15:15,820 --> 01:15:18,160 Well, the easiest way is to just declare an arrow 1303 01:15:18,160 --> 01:15:25,910 function in line here, which will lexically bind what we want it to do. 1304 01:15:25,910 --> 01:15:30,750 And so now we have another bug, so we declared 1305 01:15:30,750 --> 01:15:35,240 to do to be a list item with an input, a button, and a span. 1306 01:15:35,240 --> 01:15:38,910 And we see the input in the button, but we don't see any spans. 1307 01:15:38,910 --> 01:15:42,959 So does anybody spot exactly why that's happening? 1308 01:15:42,959 --> 01:15:51,770 1309 01:15:51,770 --> 01:15:54,686 So what text are we populating that span with? 1310 01:15:54,686 --> 01:16:01,870 1311 01:16:01,870 --> 01:16:03,660 Props dot text. 1312 01:16:03,660 --> 01:16:07,500 And so what does the object called props-- 1313 01:16:07,500 --> 01:16:09,930 what values are in there? 1314 01:16:09,930 --> 01:16:14,340 They're key value pairs that are mapped to what are passed in here. 1315 01:16:14,340 --> 01:16:17,760 Are we passing a key called text into to do? 1316 01:16:17,760 --> 01:16:20,177 1317 01:16:20,177 --> 01:16:20,760 No, we're not. 1318 01:16:20,760 --> 01:16:22,801 We're only passing something called to do, right? 1319 01:16:22,801 --> 01:16:25,300 1320 01:16:25,300 --> 01:16:28,990 To do may have a value called text, but in order 1321 01:16:28,990 --> 01:16:33,190 to actually access that, what we would have to do is to do props.todo.text. 1322 01:16:33,190 --> 01:16:36,580 1323 01:16:36,580 --> 01:16:40,420 And that will allow us to pull up the correct field. 1324 01:16:40,420 --> 01:16:44,410 1325 01:16:44,410 --> 01:16:48,070 So now we have a way to add to dos. 1326 01:16:48,070 --> 01:16:49,120 Great. 1327 01:16:49,120 --> 01:16:52,270 That doesn't make much of a to do app. 1328 01:16:52,270 --> 01:16:55,570 We should be able to check and uncheck, which we can. 1329 01:16:55,570 --> 01:16:57,640 But we're not really handling that in state. 1330 01:16:57,640 --> 01:17:02,472 We have no way of telling whether these to dos are checked or not, 1331 01:17:02,472 --> 01:17:04,180 and we also have no way to delete to dos. 1332 01:17:04,180 --> 01:17:07,880 1333 01:17:07,880 --> 01:17:14,370 And so we need some sort of way to recognize which to do is which. 1334 01:17:14,370 --> 01:17:17,721 What are some strategies to go about doing that? 1335 01:17:17,721 --> 01:17:20,680 Can anybody think of one? 1336 01:17:20,680 --> 01:17:22,110 AUDIENCE: [INAUDIBLE] 1337 01:17:22,110 --> 01:17:24,276 JORDAN HAYASHI: Yeah, we should give each one an ID. 1338 01:17:24,276 --> 01:17:26,720 That way, if we can guarantee that those IDs are unique, 1339 01:17:26,720 --> 01:17:30,660 then we'll have a unique way of recognizing each to do. 1340 01:17:30,660 --> 01:17:33,790 And so let's go ahead and do that real quick. 1341 01:17:33,790 --> 01:17:37,240 So a very easy way to do that would be to do something like this-- 1342 01:17:37,240 --> 01:17:41,730 1343 01:17:41,730 --> 01:17:47,910 have some value called ID declared outside, initialized to 0. 1344 01:17:47,910 --> 01:17:53,118 And every time you create a new one, you just increment that. 1345 01:17:53,118 --> 01:17:57,380 1346 01:17:57,380 --> 01:18:00,479 And so now every single time we add a to do, it has an ID field. 1347 01:18:00,479 --> 01:18:02,520 And we're guaranteed that it's unique, since it's 1348 01:18:02,520 --> 01:18:06,690 a counter outside the state of our app. 1349 01:18:06,690 --> 01:18:08,930 Does that makes sense? 1350 01:18:08,930 --> 01:18:10,890 So how does that help us? 1351 01:18:10,890 --> 01:18:24,120 1352 01:18:24,120 --> 01:18:27,350 So now we have a way of recognizing which to do is which. 1353 01:18:27,350 --> 01:18:33,650 And so say we wanted to get rid of one, it's now pretty easy to do that, right? 1354 01:18:33,650 --> 01:18:45,570 So if we want to now remove to do, that should now do what? 1355 01:18:45,570 --> 01:18:49,911 Does it make sense to have a remove to do with no arguments? 1356 01:18:49,911 --> 01:18:50,660 Not really, right? 1357 01:18:50,660 --> 01:18:53,243 Because we need to know exactly which to do we want to delete. 1358 01:18:53,243 --> 01:18:56,540 It makes sense that we want to add a to do with no arguments, 1359 01:18:56,540 --> 01:18:58,910 because there's no particular to do that we want to add. 1360 01:18:58,910 --> 01:19:00,869 We create that text later. 1361 01:19:00,869 --> 01:19:02,660 But when we want to remove a to do, we need 1362 01:19:02,660 --> 01:19:04,410 to know exactly which to do to remove. 1363 01:19:04,410 --> 01:19:09,151 And so now we should have remove to do actually taking argument. 1364 01:19:09,151 --> 01:19:10,650 And so what argument should it take? 1365 01:19:10,650 --> 01:19:13,670 Well, we created some sort of unique identifier field, 1366 01:19:13,670 --> 01:19:16,990 so we can just take the ID. 1367 01:19:16,990 --> 01:19:20,770 And so now how are we going to remove the to do? 1368 01:19:20,770 --> 01:19:26,570 Well, we could do this.setState, which is the only way to update the state. 1369 01:19:26,570 --> 01:19:30,440 And the to dos are what? 1370 01:19:30,440 --> 01:19:38,160 They can take the old state's to dos and just filter them, where for each 1371 01:19:38,160 --> 01:19:43,870 to do, what do we want to keep? 1372 01:19:43,870 --> 01:19:50,580 Well, as long as the to do dot ID is not equal to the ID that we pass in, 1373 01:19:50,580 --> 01:19:53,390 those are the to dos that we want to take. 1374 01:19:53,390 --> 01:19:56,270 1375 01:19:56,270 --> 01:19:57,230 Great. 1376 01:19:57,230 --> 01:20:01,100 But the Delete button is not working. 1377 01:20:01,100 --> 01:20:02,270 Why not? 1378 01:20:02,270 --> 01:20:08,450 Well, our component called to do is not doing anything 1379 01:20:08,450 --> 01:20:12,480 when you click on the button. 1380 01:20:12,480 --> 01:20:13,880 So how might we handle that? 1381 01:20:13,880 --> 01:20:16,336 1382 01:20:16,336 --> 01:20:17,710 Well, that's where props come in. 1383 01:20:17,710 --> 01:20:21,550 Since we can pass any JavaScript value as props, 1384 01:20:21,550 --> 01:20:24,400 what's to stop us from just passing a function down? 1385 01:20:24,400 --> 01:20:28,404 And so when we map over the to dos like this, 1386 01:20:28,404 --> 01:20:37,060 we can actually also pass a function down. 1387 01:20:37,060 --> 01:20:43,370 So we could pass something called onDelete and just pass a function. 1388 01:20:43,370 --> 01:20:46,020 And what would that function do? 1389 01:20:46,020 --> 01:20:50,700 Well, it's going to call this.delete removeTodo. 1390 01:20:50,700 --> 01:20:53,662 And what are we going to pass in when we invoke that? 1391 01:20:53,662 --> 01:20:54,470 Well, this todo.id. 1392 01:20:54,470 --> 01:21:11,516 1393 01:21:11,516 --> 01:21:12,390 Does that make sense? 1394 01:21:12,390 --> 01:21:15,060 1395 01:21:15,060 --> 01:21:18,750 So we're mapping over to dos, and for each to do in that array, 1396 01:21:18,750 --> 01:21:23,640 we're going to invoke that to do function, that component. 1397 01:21:23,640 --> 01:21:25,440 And what are we passing as props? 1398 01:21:25,440 --> 01:21:28,110 We're passing it this thing called onDelete 1399 01:21:28,110 --> 01:21:32,300 which is a function that invokes remove to do with that to do's ID. 1400 01:21:32,300 --> 01:21:35,040 So for each to do that we create, we're passing 1401 01:21:35,040 --> 01:21:39,110 a unique function that removes that particular to dos 1402 01:21:39,110 --> 01:21:41,657 from our global state. 1403 01:21:41,657 --> 01:21:43,740 And of course, we're also passing down the to dos, 1404 01:21:43,740 --> 01:21:48,470 so it knows exactly which text to render. 1405 01:21:48,470 --> 01:21:52,464 And so how do we get that to fire when we click the delete button? 1406 01:21:52,464 --> 01:22:01,180 1407 01:22:01,180 --> 01:22:04,210 Well, that function's just a prop, right? 1408 01:22:04,210 --> 01:22:08,230 So when we click that button, what should we do? 1409 01:22:08,230 --> 01:22:10,900 Well, we should invoke props dot on delete. 1410 01:22:10,900 --> 01:22:16,380 1411 01:22:16,380 --> 01:22:27,200 And so now when we add things, if we click that button, 1412 01:22:27,200 --> 01:22:30,320 the correct one is deleted. 1413 01:22:30,320 --> 01:22:34,430 Again, how does it know that that first one is the one that should be deleted? 1414 01:22:34,430 --> 01:22:36,710 Well, it's because each to do that gets rendered, 1415 01:22:36,710 --> 01:22:40,880 so when we map over the to dos in our state, we pass a unique on delete 1416 01:22:40,880 --> 01:22:42,980 handler down. 1417 01:22:42,980 --> 01:22:48,120 It's a function that gets bound to that particular to do's ID field. 1418 01:22:48,120 --> 01:22:51,800 And so when we click that particular to do's delete button, 1419 01:22:51,800 --> 01:22:54,320 it invokes remove to do with that ID, and so it knows 1420 01:22:54,320 --> 01:22:59,728 to filter based on that particular ID. 1421 01:22:59,728 --> 01:23:01,712 Does that make sense to people? 1422 01:23:01,712 --> 01:23:09,421 1423 01:23:09,421 --> 01:23:09,920 Great. 1424 01:23:09,920 --> 01:23:13,430 So we've handled the two big parts-- 1425 01:23:13,430 --> 01:23:16,770 well, the add and the delete part of the assignment. 1426 01:23:16,770 --> 01:23:18,110 And so what are we missing? 1427 01:23:18,110 --> 01:23:21,722 We're missing some way of tracking how many to dos we have total 1428 01:23:21,722 --> 01:23:24,680 and how many to dos that we still have to complete-- or in other words, 1429 01:23:24,680 --> 01:23:27,590 to dos that are unchecked. 1430 01:23:27,590 --> 01:23:30,420 And so now we have a choice-- how are we going to handle this? 1431 01:23:30,420 --> 01:23:33,467 Well, if we were back in Vanilla JavaScript world, 1432 01:23:33,467 --> 01:23:35,300 a way to do that would just be to keep track 1433 01:23:35,300 --> 01:23:38,510 of however many unchecked there are, keep track of however many total 1434 01:23:38,510 --> 01:23:39,500 there are. 1435 01:23:39,500 --> 01:23:44,720 And just mess with those values every single time we add, delete, or check 1436 01:23:44,720 --> 01:23:47,130 or uncheck a to do. 1437 01:23:47,130 --> 01:23:50,310 But in React land, that seems a little imperative for our like, 1438 01:23:50,310 --> 01:23:54,150 and so there might be a more declarative way to do this. 1439 01:23:54,150 --> 01:23:57,740 But in order to do that, we also need to track every single to do, 1440 01:23:57,740 --> 01:23:59,640 whether it's checked or not. 1441 01:23:59,640 --> 01:24:06,980 And so currently our to dos are an ID field and a text field. 1442 01:24:06,980 --> 01:24:10,610 But maybe it would be better to also add a field of whether it's checked or not. 1443 01:24:10,610 --> 01:24:14,520 1444 01:24:14,520 --> 01:24:17,700 And so now when we add to dos, we add an object with three keys-- 1445 01:24:17,700 --> 01:24:20,670 an ID which is guaranteed to be unique, because we're incrementing 1446 01:24:20,670 --> 01:24:25,840 this ID counter, which lives outside of our app; the texts that we prompt for; 1447 01:24:25,840 --> 01:24:29,880 and lastly, a value called checked, which keeps track of whether that to do 1448 01:24:29,880 --> 01:24:31,920 is checked or not. 1449 01:24:31,920 --> 01:24:33,870 And we should just initialize it with false, 1450 01:24:33,870 --> 01:24:35,972 because there's no point in creating a to do. 1451 01:24:35,972 --> 01:24:39,541 That's already done. 1452 01:24:39,541 --> 01:24:40,040 Cool. 1453 01:24:40,040 --> 01:24:46,770 And so now we're still missing one thing. 1454 01:24:46,770 --> 01:24:51,740 So when we create to dos, we just create an empty checkbox. 1455 01:24:51,740 --> 01:24:54,260 And so no matter what, it's going to be unchecked. 1456 01:24:54,260 --> 01:24:59,810 And so we should set that check field to equal whether that particular to do 1457 01:24:59,810 --> 01:25:00,640 is checked or not. 1458 01:25:00,640 --> 01:25:01,930 And so how might we do that? 1459 01:25:01,930 --> 01:25:03,550 Well, with props.todo.checked. 1460 01:25:03,550 --> 01:25:09,900 1461 01:25:09,900 --> 01:25:15,290 And so now that keeps track of whether a to do is checked or not. 1462 01:25:15,290 --> 01:25:18,390 But the problem is we're not actually updating our app state every time 1463 01:25:18,390 --> 01:25:20,210 a to do is checked or not. 1464 01:25:20,210 --> 01:25:24,290 And so we're going to have to actually handle every single time 1465 01:25:24,290 --> 01:25:26,000 an input is clicked. 1466 01:25:26,000 --> 01:25:30,350 Every single time it changes, we need to update our app state accordingly, 1467 01:25:30,350 --> 01:25:38,999 because if you look here, I'm clicking but nothing is happening. 1468 01:25:38,999 --> 01:25:40,040 Why is nothing happening? 1469 01:25:40,040 --> 01:25:44,510 Well, we're initializing our to dos to be checked if false. 1470 01:25:44,510 --> 01:25:48,650 We're saying, for each to do, make sure that checkbox, whether it's checked 1471 01:25:48,650 --> 01:25:51,230 or not, is whether that to do-- 1472 01:25:51,230 --> 01:25:52,849 its check value is true or false. 1473 01:25:52,849 --> 01:25:54,890 But we have no way to change that from not false, 1474 01:25:54,890 --> 01:25:57,650 and so no matter how many times I click that, 1475 01:25:57,650 --> 01:26:02,140 it's not going to change the value of props.todo.checked. 1476 01:26:02,140 --> 01:26:05,267 And so we're going to actually have to write some logic in order 1477 01:26:05,267 --> 01:26:06,205 to handle that. 1478 01:26:06,205 --> 01:26:10,900 1479 01:26:10,900 --> 01:26:15,490 And so now let's create a new method, called toggle to do. 1480 01:26:15,490 --> 01:26:18,820 We're obviously going to need to take an argument here, because we 1481 01:26:18,820 --> 01:26:22,510 need to know which to do to toggle. 1482 01:26:22,510 --> 01:26:25,430 And so what are we going to do here-- 1483 01:26:25,430 --> 01:26:32,470 so again, we're going to do this.setState and we can to dos. 1484 01:26:32,470 --> 01:26:34,590 It's this.state.todos.map. 1485 01:26:34,590 --> 01:26:47,800 1486 01:26:47,800 --> 01:26:53,360 So if you remember back a few lectures ago, when we talked about filter, map, 1487 01:26:53,360 --> 01:26:59,030 and reduce, we talked about how map applies a function to each 1488 01:26:59,030 --> 01:27:02,930 of the values in an array and will return 1489 01:27:02,930 --> 01:27:06,530 a new array with those values swapped out 1490 01:27:06,530 --> 01:27:08,930 with whatever this function returns. 1491 01:27:08,930 --> 01:27:13,970 And so how might we use that map function to handle the toggling of a 1492 01:27:13,970 --> 01:27:16,610 to do? 1493 01:27:16,610 --> 01:27:21,320 Well, first, which to do do we actually care about? 1494 01:27:21,320 --> 01:27:25,486 We only care about the to do with an ID that 1495 01:27:25,486 --> 01:27:27,110 matches the ID that were passed, right? 1496 01:27:27,110 --> 01:27:30,920 So we can immediately off the bat say, if to do 1497 01:27:30,920 --> 01:27:37,940 dot ID is not equal to the ID that were passed, what should we do? 1498 01:27:37,940 --> 01:27:39,380 AUDIENCE: [INAUDIBLE] 1499 01:27:39,380 --> 01:27:41,630 JORDAN HAYASHI: Yeah, we shouldn't do anything, right? 1500 01:27:41,630 --> 01:27:43,280 We should just return that to do. 1501 01:27:43,280 --> 01:27:46,020 1502 01:27:46,020 --> 01:27:46,520 OK, great. 1503 01:27:46,520 --> 01:27:51,287 We have one condition, but what happens with the to do that we want replaced? 1504 01:27:51,287 --> 01:27:55,400 1505 01:27:55,400 --> 01:27:58,750 We should flip its checked value, right? 1506 01:27:58,750 --> 01:28:03,510 And so we're going to want to return a new object, 1507 01:28:03,510 --> 01:28:05,210 and what should those objects' field be? 1508 01:28:05,210 --> 01:28:11,150 Well, we can say, ID is to do dot ID. 1509 01:28:11,150 --> 01:28:14,790 1510 01:28:14,790 --> 01:28:19,040 We can do text is to do dot text. 1511 01:28:19,040 --> 01:28:21,150 And what do we want the checked value to be? 1512 01:28:21,150 --> 01:28:24,150 1513 01:28:24,150 --> 01:28:25,205 AUDIENCE: [INAUDIBLE] 1514 01:28:25,205 --> 01:28:27,580 JORDAN HAYASHI: Yeah, the opposite of what it was before. 1515 01:28:27,580 --> 01:28:33,400 1516 01:28:33,400 --> 01:28:36,330 And now it looks like we should have something that works. 1517 01:28:36,330 --> 01:28:39,217 1518 01:28:39,217 --> 01:28:40,300 The problem is it doesn't. 1519 01:28:40,300 --> 01:28:43,680 1520 01:28:43,680 --> 01:28:48,130 It still doesn't change anything when we click this value. 1521 01:28:48,130 --> 01:28:51,100 Anybody have any ideas why not? 1522 01:28:51,100 --> 01:28:55,000 It looks like our toggle to do function should work. 1523 01:28:55,000 --> 01:28:57,829 We're setting state, we're updating the to dos, 1524 01:28:57,829 --> 01:28:59,620 we're mapping over this with this function, 1525 01:28:59,620 --> 01:29:02,240 where if the to do's ID doesn't match, we don't change it. 1526 01:29:02,240 --> 01:29:05,090 But if it does, we flip the to check value. 1527 01:29:05,090 --> 01:29:08,560 But when we click over here, nothing actually happens. 1528 01:29:08,560 --> 01:29:09,798 Why might that be? 1529 01:29:09,798 --> 01:29:10,298 Yeah? 1530 01:29:10,298 --> 01:29:20,485 AUDIENCE: [INAUDIBLE] 1531 01:29:20,485 --> 01:29:21,360 JORDAN HAYASHI: Yeah. 1532 01:29:21,360 --> 01:29:21,860 Exactly. 1533 01:29:21,860 --> 01:29:25,200 We defined this function, but we're not actually calling it anywhere. 1534 01:29:25,200 --> 01:29:28,560 And so just like we have this onDelete that passes a new onDelete 1535 01:29:28,560 --> 01:29:30,930 function to every single to do, we should also 1536 01:29:30,930 --> 01:29:36,840 have this thing called onCheck or onToggle that 1537 01:29:36,840 --> 01:29:39,660 passes the unique function to each to do that we 1538 01:29:39,660 --> 01:29:41,220 should invoke when we toggle it. 1539 01:29:41,220 --> 01:29:44,820 And so let's have an arrow function here so we don't 1540 01:29:44,820 --> 01:29:47,550 have to worry about the this binding. 1541 01:29:47,550 --> 01:29:52,980 And when on toggle's invoked, we should do this.toggleTodo with the todos.id. 1542 01:29:52,980 --> 01:29:57,822 1543 01:29:57,822 --> 01:29:59,780 And so now since we're passing a new prop here, 1544 01:29:59,780 --> 01:30:01,863 we should probably invoke that prop at some point. 1545 01:30:01,863 --> 01:30:04,202 1546 01:30:04,202 --> 01:30:05,660 And so where are we going to do it? 1547 01:30:05,660 --> 01:30:08,430 Well, we can do it in the input. 1548 01:30:08,430 --> 01:30:14,420 We can do something like onChange = props.onToggle. 1549 01:30:14,420 --> 01:30:18,440 1550 01:30:18,440 --> 01:30:20,880 And how do I know that this on change attribute exists? 1551 01:30:20,880 --> 01:30:22,940 Well, you can read the docs and it'll be there. 1552 01:30:22,940 --> 01:30:24,890 Or you can wait till the next lecture, when 1553 01:30:24,890 --> 01:30:27,080 we talk about event handling in React. 1554 01:30:27,080 --> 01:30:30,320 And so now we can create a to do. 1555 01:30:30,320 --> 01:30:33,540 And when we click it, look at that-- it works. 1556 01:30:33,540 --> 01:30:36,635 1557 01:30:36,635 --> 01:30:37,135 Cool. 1558 01:30:37,135 --> 01:30:41,415 So now we're tracking every single to do, whether it's checked or not. 1559 01:30:41,415 --> 01:30:43,040 But that wasn't really the goal, right? 1560 01:30:43,040 --> 01:30:45,873 The underlying goal was to keep track of how many to dos there were, 1561 01:30:45,873 --> 01:30:48,150 and how many unchecked to dos there are. 1562 01:30:48,150 --> 01:30:50,030 And so how might we do that? 1563 01:30:50,030 --> 01:30:53,790 1564 01:30:53,790 --> 01:30:55,606 Well, first let's create some divs. 1565 01:30:55,606 --> 01:31:00,700 1566 01:31:00,700 --> 01:31:05,110 This div says to do count. 1567 01:31:05,110 --> 01:31:07,720 1568 01:31:07,720 --> 01:31:11,290 And then we're going to have some JavaScript in line there, 1569 01:31:11,290 --> 01:31:18,280 and then maybe a div for unchecked to do count. 1570 01:31:18,280 --> 01:31:21,815 And again, some JavaScript. 1571 01:31:21,815 --> 01:31:22,315 Cool. 1572 01:31:22,315 --> 01:31:27,580 And so what is a quick and easy way to calculate how many to dos we have? 1573 01:31:27,580 --> 01:31:32,390 1574 01:31:32,390 --> 01:31:34,530 We're tracking all of our to dos in memory. 1575 01:31:34,530 --> 01:31:36,760 What are we using to track them? 1576 01:31:36,760 --> 01:31:37,260 Yeah? 1577 01:31:37,260 --> 01:31:38,975 AUDIENCE: [INAUDIBLE] 1578 01:31:38,975 --> 01:31:39,850 JORDAN HAYASHI: Yeah. 1579 01:31:39,850 --> 01:31:41,808 It's just an array that has a length attribute, 1580 01:31:41,808 --> 01:31:45,380 so we can do this dot state dot to dos, which grabs that list, 1581 01:31:45,380 --> 01:31:47,990 and just do dot length. 1582 01:31:47,990 --> 01:31:49,520 And now we have a 0. 1583 01:31:49,520 --> 01:31:55,980 And if we add a to do, it goes ahead and increases. 1584 01:31:55,980 --> 01:31:56,480 Cool. 1585 01:31:56,480 --> 01:31:59,870 And so how are we going to keep track of the unchecked to dos? 1586 01:31:59,870 --> 01:32:07,550 1587 01:32:07,550 --> 01:32:11,330 Well, we know we're tracking every single to do and whether it's checked 1588 01:32:11,330 --> 01:32:12,700 or not. 1589 01:32:12,700 --> 01:32:15,830 And so one strategy might be to get all of the to dos, 1590 01:32:15,830 --> 01:32:20,600 remove all of the ones that are checked, and then count the number remaining. 1591 01:32:20,600 --> 01:32:24,270 So what functions might we use to implement that algorithm? 1592 01:32:24,270 --> 01:32:27,889 1593 01:32:27,889 --> 01:32:29,430 Yeah, we can use the filter function. 1594 01:32:29,430 --> 01:32:34,242 So we can do this dot state dot to dos dot filter. 1595 01:32:34,242 --> 01:32:35,700 And what are we going to filter by? 1596 01:32:35,700 --> 01:32:41,160 Well, for each to do, return if it's not checked. 1597 01:32:41,160 --> 01:32:46,744 1598 01:32:46,744 --> 01:32:49,660 And then we're left with a new array, and we can just grab the length. 1599 01:32:49,660 --> 01:32:52,190 1600 01:32:52,190 --> 01:32:54,860 And so if we do a test, now we have it unchecked. 1601 01:32:54,860 --> 01:32:56,700 What happens when we check it? 1602 01:32:56,700 --> 01:33:02,070 Well, that's going to get filtered out here, and what's left is an empty list. 1603 01:33:02,070 --> 01:33:04,610 And you grab the length of that, and we have 0. 1604 01:33:04,610 --> 01:33:06,379 What happens when we delete it? 1605 01:33:06,379 --> 01:33:08,420 Well, we don't actually have to update any logic, 1606 01:33:08,420 --> 01:33:12,047 because everything is handled completely declaratively. 1607 01:33:12,047 --> 01:33:26,740 1608 01:33:26,740 --> 01:33:29,110 Is there anything here that says, every time 1609 01:33:29,110 --> 01:33:33,850 we change something, make sure to go and change this count that we're keeping? 1610 01:33:33,850 --> 01:33:34,870 Not really, right? 1611 01:33:34,870 --> 01:33:38,930 We just assume that we have some to dos and some data that's coming down, 1612 01:33:38,930 --> 01:33:41,440 and we just run calculations based on that data. 1613 01:33:41,440 --> 01:33:43,720 And so we're just declaring what we want, based 1614 01:33:43,720 --> 01:33:46,100 on any data that's passed into us. 1615 01:33:46,100 --> 01:33:49,615 And so React, in that way, is very declarative. 1616 01:33:49,615 --> 01:33:52,610 1617 01:33:52,610 --> 01:33:53,570 And so this is great. 1618 01:33:53,570 --> 01:33:56,740 If we want to add any new features, we don't really have to worry about, oh, 1619 01:33:56,740 --> 01:33:59,300 what is every single possible method that we 1620 01:33:59,300 --> 01:34:01,100 need to update this new feature with. 1621 01:34:01,100 --> 01:34:03,527 Whereas if we were doing this in more Vanilla JS 1622 01:34:03,527 --> 01:34:05,360 and more an imperative nature, we would have 1623 01:34:05,360 --> 01:34:09,570 to make sure, oh, if we want to also keep track of the count of checks 1624 01:34:09,570 --> 01:34:13,160 to dos, we're going to have to check every single method where 1625 01:34:13,160 --> 01:34:16,070 that number might be affected and go ahead and update it there. 1626 01:34:16,070 --> 01:34:19,250 And so keeping track of all that in your mind 1627 01:34:19,250 --> 01:34:22,790 might create bugs that you might not otherwise 1628 01:34:22,790 --> 01:34:24,780 if the paradigm were more simple. 1629 01:34:24,780 --> 01:34:29,720 And so this is a much more simple way of saying, hey, given some app state, 1630 01:34:29,720 --> 01:34:32,950 go ahead and render an app based on that state. 1631 01:34:32,950 --> 01:34:35,950 1632 01:34:35,950 --> 01:34:38,370 Any questions? 1633 01:34:38,370 --> 01:34:38,870 Yeah? 1634 01:34:38,870 --> 01:34:57,665 AUDIENCE: [INAUDIBLE] 1635 01:34:57,665 --> 01:34:59,540 JORDAN HAYASHI: Can you repeat your question? 1636 01:34:59,540 --> 01:35:12,050 AUDIENCE: [INAUDIBLE] 1637 01:35:12,050 --> 01:35:17,150 JORDAN HAYASHI: So the question was if we, 1638 01:35:17,150 --> 01:35:23,030 rather than replacing the old state.todos over here with a new array, 1639 01:35:23,030 --> 01:35:26,750 would it still work, if we were to mutate the array? 1640 01:35:26,750 --> 01:35:28,894 And the answer to that is, it depends. 1641 01:35:28,894 --> 01:35:31,060 It depends on the React component that you're using, 1642 01:35:31,060 --> 01:35:34,130 and it depends on some other methods that you 1643 01:35:34,130 --> 01:35:38,330 could write that we'll talk about in future lectures. 1644 01:35:38,330 --> 01:35:40,790 But the fact that it depends is a bad thing, 1645 01:35:40,790 --> 01:35:42,667 because then you don't really know-- 1646 01:35:42,667 --> 01:35:45,500 it depends on what else you've written, whether it will work or not. 1647 01:35:45,500 --> 01:35:48,390 But if you do it like this, where it's a completely new array, 1648 01:35:48,390 --> 01:35:50,760 it will always work. 1649 01:35:50,760 --> 01:35:53,900 And we'll talk about this in future lectures, 1650 01:35:53,900 --> 01:35:58,430 but the React paradigm is always to do things immutably, 1651 01:35:58,430 --> 01:36:00,680 which means if you ever change something, replace it 1652 01:36:00,680 --> 01:36:02,090 with something completely new. 1653 01:36:02,090 --> 01:36:04,310 And that-- be a reference to that. 1654 01:36:04,310 --> 01:36:07,130 That way, if you're ever comparing values, 1655 01:36:07,130 --> 01:36:11,360 you don't have any bugs that can appear there if you've mutated a value. 1656 01:36:11,360 --> 01:36:14,570 So technically it's changed, but the reference to that value 1657 01:36:14,570 --> 01:36:17,730 has not changed. 1658 01:36:17,730 --> 01:36:21,660 Does that make sense? 1659 01:36:21,660 --> 01:36:22,160 Cool. 1660 01:36:22,160 --> 01:36:25,630 Any other questions about React, props, state, or anything 1661 01:36:25,630 --> 01:36:27,100 that we've seen today? 1662 01:36:27,100 --> 01:36:32,000 1663 01:36:32,000 --> 01:36:32,780 All right. 1664 01:36:32,780 --> 01:36:41,720 So we talked about to do app.JS and using React on the web. 1665 01:36:41,720 --> 01:36:44,720 But why limit React just to the web? 1666 01:36:44,720 --> 01:36:47,030 So there exists this thing called React Native, which 1667 01:36:47,030 --> 01:36:50,630 is a framework that relies on React Core and the core algorithms implemented 1668 01:36:50,630 --> 01:36:52,110 by the React library. 1669 01:36:52,110 --> 01:36:55,760 But it's actually a framework that allows you to do much, much more. 1670 01:36:55,760 --> 01:37:00,320 It allows us to build mobile apps using only JavaScript. 1671 01:37:00,320 --> 01:37:05,390 And so when Facebook released this framework called React Native, 1672 01:37:05,390 --> 01:37:08,250 they released it with the tagline, "learn once, write anywhere." 1673 01:37:08,250 --> 01:37:10,174 So you only have to learn JavaScript once. 1674 01:37:10,174 --> 01:37:11,590 You only have to learn React once. 1675 01:37:11,590 --> 01:37:15,120 But you can actually write it, and it'll run anywhere. 1676 01:37:15,120 --> 01:37:18,485 And this supports both iOS and Android. 1677 01:37:18,485 --> 01:37:21,110 And so I'll leave you there for this lecture, and next lecture, 1678 01:37:21,110 --> 01:37:22,943 we'll look at this thing called React Native 1679 01:37:22,943 --> 01:37:27,430 and how to run JavaScript for mobile apps. 1680 01:37:27,430 --> 01:37:28,966