1 00:00:00,000 --> 00:00:12,105 [MUSIC PLAYING] 2 00:00:12,105 --> 00:00:13,480 SPEAKER 1: OK, let's get started. 3 00:00:13,480 --> 00:00:15,519 Welcome back, everyone, to CS50 Beyond. 4 00:00:15,519 --> 00:00:18,060 So for a little bit of context from where we've been so far-- 5 00:00:18,060 --> 00:00:22,440 thus far in CS50 Beyond, we've mostly been building on a lot of the topics 6 00:00:22,440 --> 00:00:23,550 that we saw in CS50. 7 00:00:23,550 --> 00:00:24,690 We saw each HTML. 8 00:00:24,690 --> 00:00:25,710 We saw CSS. 9 00:00:25,710 --> 00:00:26,610 We saw JavaScript. 10 00:00:26,610 --> 00:00:27,459 We saw a SQL. 11 00:00:27,459 --> 00:00:30,750 And we've been taking those ideas so far this week and just building onto them, 12 00:00:30,750 --> 00:00:33,666 showing you some additional features, some more advanced capabilities, 13 00:00:33,666 --> 00:00:35,730 building some more sophisticated applications. 14 00:00:35,730 --> 00:00:38,700 Today we're really going to introduce something entirely new-- 15 00:00:38,700 --> 00:00:42,180 that being React, which is a JavaScript library built by Facebook, which 16 00:00:42,180 --> 00:00:45,510 is designed to make it very easy to build interactive and dynamic user 17 00:00:45,510 --> 00:00:46,440 interfaces. 18 00:00:46,440 --> 00:00:49,290 And React is going to be a totally different way of thinking about 19 00:00:49,290 --> 00:00:52,134 how to build web applications, and how to build user interfaces. 20 00:00:52,134 --> 00:00:54,300 And we'll go through a bunch of examples to give you 21 00:00:54,300 --> 00:00:57,300 a sense for how this works, how to think in React, 22 00:00:57,300 --> 00:00:59,520 and ultimately, how to program in React. 23 00:00:59,520 --> 00:01:03,260 And so, React has a couple of key concepts-- a couple of key ideas 24 00:01:03,260 --> 00:01:04,560 you want to be thinking about. 25 00:01:04,560 --> 00:01:06,900 And the first of those ideas is that React 26 00:01:06,900 --> 00:01:09,180 is a declarative way of programming. 27 00:01:09,180 --> 00:01:13,230 And so, thus far in most of what we've done in CS50 and in programming more 28 00:01:13,230 --> 00:01:16,590 generally, we've been doing what you might call imperative programming. 29 00:01:16,590 --> 00:01:18,810 In imperative programming, we write code that 30 00:01:18,810 --> 00:01:21,270 tells the web application what to do. 31 00:01:21,270 --> 00:01:23,620 We want to insert this thing into the web page. 32 00:01:23,620 --> 00:01:26,190 We want to manipulate the web page in this particular way. 33 00:01:26,190 --> 00:01:29,890 But whereas imperative programming is a model where we say, 34 00:01:29,890 --> 00:01:32,160 this is what we want the web application to do, 35 00:01:32,160 --> 00:01:35,041 declarative programming is a style of programming where we say, 36 00:01:35,041 --> 00:01:37,290 this is what we want the web application to look like. 37 00:01:37,290 --> 00:01:39,690 This is how the application should look. 38 00:01:39,690 --> 00:01:43,050 And we're going to let React take care of figuring out 39 00:01:43,050 --> 00:01:46,530 what the application should do in order to make the application 40 00:01:46,530 --> 00:01:48,450 look like the way that we want to look. 41 00:01:48,450 --> 00:01:51,030 And you'll see in a moment what that actually means, 42 00:01:51,030 --> 00:01:52,954 and what it actually looks like. 43 00:01:52,954 --> 00:01:54,870 So that's the idea of declarative programming. 44 00:01:54,870 --> 00:01:57,078 And in order to achieve that goal, there are a number 45 00:01:57,078 --> 00:01:59,220 of tools that React is going to use. 46 00:01:59,220 --> 00:02:02,049 The first of which is that, instead of using JavaScript, 47 00:02:02,049 --> 00:02:04,215 it's going to use a slight extension to JavaScript-- 48 00:02:04,215 --> 00:02:08,150 a variant on JavaScript that has a few more features-- called JSX, 49 00:02:08,150 --> 00:02:12,955 or JavaScript X. And the idea of JSX is, whereas in JavaScript we have a whole 50 00:02:12,955 --> 00:02:16,080 bunch of different types of values-- we have integers, and we have strings, 51 00:02:16,080 --> 00:02:18,990 we even have functions and arrays and so forth-- 52 00:02:18,990 --> 00:02:23,520 in JSX, we can treat each HTML elements as values of their own. 53 00:02:23,520 --> 00:02:26,355 So in JSX, you might see code that looks something like this-- 54 00:02:26,355 --> 00:02:30,660 const, some variable name, equals, and then an h1 block, for instance. 55 00:02:30,660 --> 00:02:34,380 Like HTML code that can be a value in JavaScript 56 00:02:34,380 --> 00:02:37,440 that we can assign to a variable, that we can loop over at some point, 57 00:02:37,440 --> 00:02:40,620 potentially, that we can do calculations and computations on. 58 00:02:40,620 --> 00:02:46,039 This sort of code is common in JSX and has some special meaning. 59 00:02:46,039 --> 00:02:48,580 So that's something that we'll see in React in just a moment. 60 00:02:48,580 --> 00:02:50,220 And so in order to make this work, there are a couple 61 00:02:50,220 --> 00:02:51,962 of libraries that we're going to need. 62 00:02:51,962 --> 00:02:53,670 I'll just briefly describe what they are, 63 00:02:53,670 --> 00:02:55,140 and then we'll actually start using them. 64 00:02:55,140 --> 00:02:58,140 React is going to be the library that's going to actually allow us to do 65 00:02:58,140 --> 00:02:59,850 the building of these user interfaces. 66 00:02:59,850 --> 00:03:03,540 There's a separate but related library called ReactDOM that's going to take 67 00:03:03,540 --> 00:03:06,660 care of taking the React components that we create-- 68 00:03:06,660 --> 00:03:08,340 more on components in just a moment-- 69 00:03:08,340 --> 00:03:11,150 and actually inserting them into the web page, into the DOM-- 70 00:03:11,150 --> 00:03:12,970 the document object model. 71 00:03:12,970 --> 00:03:16,470 And then finally, we're going to be using a package called Babel. 72 00:03:16,470 --> 00:03:18,850 And we're using this because most web browsers, 73 00:03:18,850 --> 00:03:22,770 in fact, all of our modern web browsers don't understand JSX code natively. 74 00:03:22,770 --> 00:03:25,950 So code that looks like this, Chrome and Safari 75 00:03:25,950 --> 00:03:29,430 don't normally know how to understand this code and figure out what it means. 76 00:03:29,430 --> 00:03:32,010 So what we need to do is translate this sort of code 77 00:03:32,010 --> 00:03:35,310 into regular JavaScript code that our browsers can understand. 78 00:03:35,310 --> 00:03:38,610 And Babel is going to take care of doing that translation for us, such 79 00:03:38,610 --> 00:03:41,900 that the browsers can actually understand the code that we're using. 80 00:03:41,900 --> 00:03:44,244 So in a moment, in our HTML pages, in the head section 81 00:03:44,244 --> 00:03:46,160 where we might include JavaScript, we're going 82 00:03:46,160 --> 00:03:48,720 to be including a whole bunch of scripts-- one for React, 83 00:03:48,720 --> 00:03:50,730 one for ReactDOM, one for Babel. 84 00:03:50,730 --> 00:03:54,030 You can just copy these scripts and put them at the top of your HTML page. 85 00:03:54,030 --> 00:03:57,600 And you'll see in a moment how that will eventually become useful. 86 00:03:57,600 --> 00:04:02,172 So all of React is really designed around this idea of components. 87 00:04:02,172 --> 00:04:05,130 When we're going to think about our web application, we're going to try 88 00:04:05,130 --> 00:04:07,110 and divide the application into the components 89 00:04:07,110 --> 00:04:09,120 that make it up, and then start to analyze, 90 00:04:09,120 --> 00:04:11,851 how is that component going to behave? 91 00:04:11,851 --> 00:04:14,850 And a component is going to end up looking a little something like this. 92 00:04:14,850 --> 00:04:18,120 If we wanted a component that was just going to say "Hello", 93 00:04:18,120 --> 00:04:21,540 we're going to define a class called "Hello" in JavaScript, 94 00:04:21,540 --> 00:04:24,480 and extends React.Component is basically just saying 95 00:04:24,480 --> 00:04:28,320 that this Hello class is a React component. 96 00:04:28,320 --> 00:04:29,830 And what do we do from there? 97 00:04:29,830 --> 00:04:33,450 Well, each React component needs to have some notion of, 98 00:04:33,450 --> 00:04:36,359 what does it look like when I render this component to the screen? 99 00:04:36,359 --> 00:04:38,400 When I try and take this component and display it 100 00:04:38,400 --> 00:04:40,290 on my web page, what should show up? 101 00:04:40,290 --> 00:04:42,730 Declaratively, what is going to show up on the page? 102 00:04:42,730 --> 00:04:46,260 And so, every component is going to need a render function. 103 00:04:46,260 --> 00:04:49,230 And that render function is just going to describe what 104 00:04:49,230 --> 00:04:51,460 it is that this component looks like. 105 00:04:51,460 --> 00:04:54,090 And in this case, this Hello component, very simply inside 106 00:04:54,090 --> 00:04:57,850 of its render function, is just going to return a JSX element 107 00:04:57,850 --> 00:05:01,590 from HTML like code, that it's just a heading that, in this case, 108 00:05:01,590 --> 00:05:03,890 says "Hello". 109 00:05:03,890 --> 00:05:05,410 So we've defined a react component. 110 00:05:05,410 --> 00:05:06,826 This is our first React component. 111 00:05:06,826 --> 00:05:10,777 And all it does is display an h1 tag. 112 00:05:10,777 --> 00:05:12,110 So I'll show you that right now. 113 00:05:12,110 --> 00:05:16,670 We'll actually build our very first React application. 114 00:05:16,670 --> 00:05:19,160 So I go into a code editor, create a new file. 115 00:05:19,160 --> 00:05:20,977 I'll call it "hello.html". 116 00:05:20,977 --> 00:05:23,060 All the source code examples for today are already 117 00:05:23,060 --> 00:05:24,960 online if you want to take a look at them. 118 00:05:24,960 --> 00:05:27,890 So let's say, DOCTYPE HTML. 119 00:05:27,890 --> 00:05:29,690 In the header section of the website, I'm 120 00:05:29,690 --> 00:05:32,570 going to need to include those JavaScript libraries. 121 00:05:32,570 --> 00:05:35,130 I need to include React and ReactDOM and Babel. 122 00:05:35,130 --> 00:05:38,420 And so I'll go ahead and go back to these libraries. 123 00:05:38,420 --> 00:05:41,760 I can just copy these scripts and paste them into the page. 124 00:05:41,760 --> 00:05:45,440 125 00:05:45,440 --> 00:05:46,741 I'll give this a title as well. 126 00:05:46,741 --> 00:05:47,865 We'll just call it "Hello". 127 00:05:47,865 --> 00:05:50,590 128 00:05:50,590 --> 00:05:53,320 And now in the body of the application, I 129 00:05:53,320 --> 00:05:55,900 need to create a space inside the body of the application 130 00:05:55,900 --> 00:05:58,386 where my React application is going to live. 131 00:05:58,386 --> 00:06:00,010 And so I'm just going to create a div-- 132 00:06:00,010 --> 00:06:03,190 some vertical section of my page where I'm going to insert my application-- 133 00:06:03,190 --> 00:06:05,225 whose id is going to be app. 134 00:06:05,225 --> 00:06:06,850 And it's just going to be an empty div. 135 00:06:06,850 --> 00:06:07,724 Nothing inside of it. 136 00:06:07,724 --> 00:06:13,960 This is where my application is going to go. 137 00:06:13,960 --> 00:06:17,650 And now, let me add some JavaScript code-- 138 00:06:17,650 --> 00:06:23,750 some JSX code that's going to render a React component inside of my web page. 139 00:06:23,750 --> 00:06:25,510 So I'm going to use a script tag, but I'm 140 00:06:25,510 --> 00:06:27,580 going to use a special type attribute. 141 00:06:27,580 --> 00:06:30,290 The type is going to be text/Babel. 142 00:06:30,290 --> 00:06:34,300 What this is basically going to say is that this is not regular JavaScript. 143 00:06:34,300 --> 00:06:36,790 This is JSX, that special version of JavaScript 144 00:06:36,790 --> 00:06:38,230 that I mentioned a moment ago. 145 00:06:38,230 --> 00:06:41,080 And the fact that I'm labeling it with "type text/Babel" 146 00:06:41,080 --> 00:06:45,190 is going to tell Babel the package that, OK, this is JavaScript code that I'm 147 00:06:45,190 --> 00:06:47,697 going to need to translate into regular JavaScript 148 00:06:47,697 --> 00:06:50,030 before the browser is going to be able to understand it. 149 00:06:50,030 --> 00:06:52,280 So when we open the page, Babel is going to first take 150 00:06:52,280 --> 00:06:55,060 the step of translating it for us, so that Chrome or Safari 151 00:06:55,060 --> 00:06:59,210 or whatever browser you're using can actually understand this code. 152 00:06:59,210 --> 00:07:03,280 So now, let me go ahead and define my first React component. 153 00:07:03,280 --> 00:07:08,710 So we're going to call it class Hello extends React.Component. 154 00:07:08,710 --> 00:07:10,810 So I've created a React component. 155 00:07:10,810 --> 00:07:13,220 And remember, the one thing that every component needs 156 00:07:13,220 --> 00:07:16,660 is a function called render that's going to say, what should this component look 157 00:07:16,660 --> 00:07:19,000 like when I render it to the screen? 158 00:07:19,000 --> 00:07:21,460 So I'll define a function called render. 159 00:07:21,460 --> 00:07:23,770 And what this function render is going to do 160 00:07:23,770 --> 00:07:25,700 is it's going to return something. 161 00:07:25,700 --> 00:07:30,700 And it's going to return, let's say, in h1 tags, the word "Hello". 162 00:07:30,700 --> 00:07:33,417 163 00:07:33,417 --> 00:07:36,250 This return statement-- I've enclosed the whole thing in parentheses 164 00:07:36,250 --> 00:07:38,607 just in case I need the HTML to span multiple lines. 165 00:07:38,607 --> 00:07:40,690 It's not really necessary in this case, but you'll 166 00:07:40,690 --> 00:07:44,620 see this pretty commonly as you begin to build larger and larger components. 167 00:07:44,620 --> 00:07:46,870 So all the Hello class is doing right now 168 00:07:46,870 --> 00:07:49,570 is defining a component that describes what it should 169 00:07:49,570 --> 00:07:51,812 look like when it's on the screen. 170 00:07:51,812 --> 00:07:52,520 Questions so far? 171 00:07:52,520 --> 00:07:55,767 172 00:07:55,767 --> 00:07:57,850 All right, the next step, and really the last step 173 00:07:57,850 --> 00:08:00,400 of building this particular application, is just saying, 174 00:08:00,400 --> 00:08:03,250 I actually want to render this component on the screen. 175 00:08:03,250 --> 00:08:06,137 And so, in order to do that, we're going to use ReactDOM, 176 00:08:06,137 --> 00:08:08,470 which is that library that lets us take React components 177 00:08:08,470 --> 00:08:10,990 and put them into the DOM into our page. 178 00:08:10,990 --> 00:08:13,540 And we're going to say ReactDOM.render. 179 00:08:13,540 --> 00:08:16,640 And ReactDOM.render takes two arguments. 180 00:08:16,640 --> 00:08:20,570 The first argument is, what is the component that we want to render? 181 00:08:20,570 --> 00:08:22,990 And the component we want to render is Hello. 182 00:08:22,990 --> 00:08:26,830 And now you can treat Hello just like you would treat any other HTML 183 00:08:26,830 --> 00:08:27,730 element for example. 184 00:08:27,730 --> 00:08:33,010 I'm just going to say, Hello as though it were an HTML tag like div, 185 00:08:33,010 --> 00:08:34,812 or h1, or some other tag. 186 00:08:34,812 --> 00:08:36,520 Because I have defined it as a component. 187 00:08:36,520 --> 00:08:40,780 And so now I can just say, I want to render the Hello component in my page. 188 00:08:40,780 --> 00:08:43,000 And where on the page do I want to render it? 189 00:08:43,000 --> 00:08:45,380 Well, I want to render it here. 190 00:08:45,380 --> 00:08:49,450 In other words, the section of the body that has id app. 191 00:08:49,450 --> 00:08:51,790 And as we've been doing previously in the week, 192 00:08:51,790 --> 00:08:54,850 if I want to get at that particular part of the page, I can just say, 193 00:08:54,850 --> 00:09:01,780 document.querySelector("#app") to say, get the thing that has id app 194 00:09:01,780 --> 00:09:05,627 and insert this Hello component into the page there. 195 00:09:05,627 --> 00:09:07,710 So I'll show you what it looks like, assuming this 196 00:09:07,710 --> 00:09:09,626 all works, and then we'll go back to the code. 197 00:09:09,626 --> 00:09:11,480 I'll open up hello.html. 198 00:09:11,480 --> 00:09:12,630 And all right. 199 00:09:12,630 --> 00:09:14,250 It just says, "Hello". 200 00:09:14,250 --> 00:09:16,380 It displays that as an h1 tag. 201 00:09:16,380 --> 00:09:20,550 And the way it did that is because I took this hello component 202 00:09:20,550 --> 00:09:23,070 and rendered it into the DOM. 203 00:09:23,070 --> 00:09:26,970 So in 28 lines of code, we've defined our first React application. 204 00:09:26,970 --> 00:09:27,970 What questions you have? 205 00:09:27,970 --> 00:09:34,676 206 00:09:34,676 --> 00:09:37,550 All right, so let's move on a little bit and look at some more things 207 00:09:37,550 --> 00:09:38,790 that we can do here. 208 00:09:38,790 --> 00:09:41,360 So we have this class called hello, this can React component. 209 00:09:41,360 --> 00:09:43,943 And once I have a React component, I can reuse that component. 210 00:09:43,943 --> 00:09:47,240 I can use it multiple times if I want it to do different things. 211 00:09:47,240 --> 00:09:51,080 And so, let me to find a new React component. 212 00:09:51,080 --> 00:09:56,900 I'll call it "app" that's going to extend React component. 213 00:09:56,900 --> 00:09:59,660 And the render function of this app is just 214 00:09:59,660 --> 00:10:05,450 going to say when you render this application, 215 00:10:05,450 --> 00:10:11,840 go ahead and render a div, inside of which are two hello components. 216 00:10:11,840 --> 00:10:14,479 You can nest components within each other, so to speak. 217 00:10:14,479 --> 00:10:16,520 So inside of my app now, I'm saying, let's render 218 00:10:16,520 --> 00:10:19,200 two hello components, one after the other. 219 00:10:19,200 --> 00:10:25,260 And inside the DOM, let's go ahead and just render the app component. 220 00:10:25,260 --> 00:10:27,222 So I'm rendering the app component. 221 00:10:27,222 --> 00:10:28,680 And what does the app component do? 222 00:10:28,680 --> 00:10:31,260 It renders two hello components. 223 00:10:31,260 --> 00:10:35,380 And each hello component is just going to say "Hello". 224 00:10:35,380 --> 00:10:36,855 I refresh the page. 225 00:10:36,855 --> 00:10:42,430 And OK, now I have two hello components that are displayed on the page. 226 00:10:42,430 --> 00:10:43,924 Questions about anything so far? 227 00:10:43,924 --> 00:10:46,090 I'll go back to the code so you can take look at it. 228 00:10:46,090 --> 00:10:52,780 229 00:10:52,780 --> 00:10:55,070 All right, so this is the basics of what React 230 00:10:55,070 --> 00:10:57,820 is about-- defining these components, and then defining 231 00:10:57,820 --> 00:11:01,419 what the page should look like, and then letting that render. 232 00:11:01,419 --> 00:11:03,460 Though so far, all we've done is render something 233 00:11:03,460 --> 00:11:06,543 that we could have done much more easily with just HTML and no JavaScript. 234 00:11:06,543 --> 00:11:08,770 So let's take a look now at what we want to happen 235 00:11:08,770 --> 00:11:11,260 if we want different components to behave differently. 236 00:11:11,260 --> 00:11:14,380 Maybe I don't just want hello to say just the word "Hello". 237 00:11:14,380 --> 00:11:17,660 Maybe I want it to say hello to a particular person, for example. 238 00:11:17,660 --> 00:11:20,530 And so maybe I would like to add some attributes, 239 00:11:20,530 --> 00:11:24,280 or what we're going to call props or properties to these components. 240 00:11:24,280 --> 00:11:26,620 And so I want to say hello to a particular person. 241 00:11:26,620 --> 00:11:32,710 I'll pass an argument, or a prop, to this hello component-- name being Josh, 242 00:11:32,710 --> 00:11:33,700 for example-- 243 00:11:33,700 --> 00:11:36,340 and another prop whereas the name is Athena. 244 00:11:36,340 --> 00:11:39,250 And maybe I want more hello components-- one where the name is Julia, 245 00:11:39,250 --> 00:11:45,480 and one where the name is Krishna, and we'll do one more for Andrew. 246 00:11:45,480 --> 00:11:47,480 So now I've got five different hello components, 247 00:11:47,480 --> 00:11:49,930 each of which I'm providing some different information. 248 00:11:49,930 --> 00:11:54,610 I'm providing in a name, a prop, into the hello component. 249 00:11:54,610 --> 00:11:58,480 And now inside the hello component, I'm going to use that information. 250 00:11:58,480 --> 00:12:03,760 Rather than just say "Hello", I'm going to say hello to whatever the name is. 251 00:12:03,760 --> 00:12:08,980 And so, in JSX, this type of syntax-- if I want to plug in some value here, 252 00:12:08,980 --> 00:12:11,610 I'm just going to use curly braces. 253 00:12:11,610 --> 00:12:17,240 And in order to get at this component's props and get at the name property 254 00:12:17,240 --> 00:12:20,240 of those props, I'm going to say this,props.name. 255 00:12:20,240 --> 00:12:24,290 256 00:12:24,290 --> 00:12:27,710 So the hello component says "Hello", and then in curly braces, 257 00:12:27,710 --> 00:12:32,000 let's plug in this.props.name to get the name property of this component, 258 00:12:32,000 --> 00:12:33,312 and plug it in there. 259 00:12:33,312 --> 00:12:35,270 And then my application is just going to render 260 00:12:35,270 --> 00:12:37,760 a whole bunch of hello components, each of which 261 00:12:37,760 --> 00:12:41,650 is provided with a different name prop. 262 00:12:41,650 --> 00:12:43,480 So I go ahead and refresh the page. 263 00:12:43,480 --> 00:12:44,804 And all right, great. 264 00:12:44,804 --> 00:12:46,720 I see five different components, each of which 265 00:12:46,720 --> 00:12:50,410 now behaves differently based upon what properties it was initially 266 00:12:50,410 --> 00:12:51,040 provided with. 267 00:12:51,040 --> 00:12:53,847 268 00:12:53,847 --> 00:12:55,180 Questions about anything so far? 269 00:12:55,180 --> 00:12:56,700 Yeah? 270 00:12:56,700 --> 00:12:59,361 AUDIENCE: Could you use Jinja [INAUDIBLE] difference between 271 00:12:59,361 --> 00:13:01,619 [INAUDIBLE]? 272 00:13:01,619 --> 00:13:02,910 SPEAKER 1: Could you use Jinja? 273 00:13:02,910 --> 00:13:05,400 So Jinja is a templating language. 274 00:13:05,400 --> 00:13:07,830 You couldn't use Jinja in just this HTML page, 275 00:13:07,830 --> 00:13:11,580 because you'd need some sort of renderer that actually processes Jinja. 276 00:13:11,580 --> 00:13:14,280 But you could imagine combining Flask and React together. 277 00:13:14,280 --> 00:13:16,655 And there are certainly ways to do that if you wanted to. 278 00:13:16,655 --> 00:13:18,609 279 00:13:18,609 --> 00:13:19,150 Other things? 280 00:13:19,150 --> 00:13:19,710 Yeah? 281 00:13:19,710 --> 00:13:21,807 AUDIENCE: Was name an arbitrary value? 282 00:13:21,807 --> 00:13:23,890 SPEAKER 1: Yes, name was just an arbitrary choice. 283 00:13:23,890 --> 00:13:25,848 You can create props of any name that you want. 284 00:13:25,848 --> 00:13:28,990 You can call them whatever you want, so long as you're consistent. 285 00:13:28,990 --> 00:13:31,365 The only thing that matters is that this name of the prop 286 00:13:31,365 --> 00:13:34,630 here matches up with this name here, so that I 287 00:13:34,630 --> 00:13:37,430 can reference the correct property. 288 00:13:37,430 --> 00:13:38,596 Yeah? 289 00:13:38,596 --> 00:14:10,244 AUDIENCE: I'm just a little confused in the relationship between [INAUDIBLE] 290 00:14:10,244 --> 00:14:10,910 SPEAKER 1: Yeah. 291 00:14:10,910 --> 00:14:11,660 So the way to think-- 292 00:14:11,660 --> 00:14:13,610 AUDIENCE: I'm a little confused about [INAUDIBLE].. 293 00:14:13,610 --> 00:14:14,651 SPEAKER 1: Good question. 294 00:14:14,651 --> 00:14:17,420 So the way to think about it is, the hello component-- 295 00:14:17,420 --> 00:14:20,270 what I have here between lines 13 and 22-- 296 00:14:20,270 --> 00:14:23,060 is a component that says "Hello". 297 00:14:23,060 --> 00:14:25,670 And it's saying hello to a particular person. 298 00:14:25,670 --> 00:14:29,430 And the way that it's doing that is, it's going to draw on its properties. 299 00:14:29,430 --> 00:14:31,880 When I define the hello component here, I don't yet 300 00:14:31,880 --> 00:14:33,469 know what those properties are. 301 00:14:33,469 --> 00:14:36,260 So I'm just saying, whatever those properties are, plug in the name 302 00:14:36,260 --> 00:14:38,750 here, even if I don't know the name yet. 303 00:14:38,750 --> 00:14:43,520 I don't actually use the hello component until inside of my app, 304 00:14:43,520 --> 00:14:48,050 where inside of the app, I'm saying, put a hello component here. 305 00:14:48,050 --> 00:14:50,090 And in particular, put a hello component here 306 00:14:50,090 --> 00:14:53,622 who has a name property equal to Josh, for example. 307 00:14:53,622 --> 00:14:55,080 That's the way that that's working. 308 00:14:55,080 --> 00:14:55,737 Yeah? 309 00:14:55,737 --> 00:14:58,172 AUDIENCE: In the very beginning of the first example 310 00:14:58,172 --> 00:15:00,607 you used the line at the bottom [INAUDIBLE].. 311 00:15:00,607 --> 00:15:07,912 312 00:15:07,912 --> 00:15:10,834 Why do you not need the same format inside the [INAUDIBLE]?? 313 00:15:10,834 --> 00:15:14,087 314 00:15:14,087 --> 00:15:16,420 SPEAKER 1: So why do I not need a second ReactDOM.render 315 00:15:16,420 --> 00:15:17,760 inside of the app class? 316 00:15:17,760 --> 00:15:21,660 I only need the ReactDOM.render function in order 317 00:15:21,660 --> 00:15:24,510 to insert a component into the DOM. 318 00:15:24,510 --> 00:15:28,950 So I want to insert into the DOM, at this section of the page, the div that 319 00:15:28,950 --> 00:15:33,480 has an id of app, I want to insert the app component. 320 00:15:33,480 --> 00:15:37,860 But the app component itself contains the hello components already. 321 00:15:37,860 --> 00:15:40,260 So I don't need to tell the hello components where to go. 322 00:15:40,260 --> 00:15:42,990 When I render the app component, that will implicitly 323 00:15:42,990 --> 00:15:46,710 render all of the components that are within it. 324 00:15:46,710 --> 00:15:47,660 Yeah? 325 00:15:47,660 --> 00:15:51,020 AUDIENCE: You said the alt values for [INAUDIBLE] 326 00:15:51,020 --> 00:15:52,784 didn't provide a name [INAUDIBLE]. 327 00:15:52,784 --> 00:15:54,450 SPEAKER 1: If you didn't provide a name. 328 00:15:54,450 --> 00:15:55,290 Sure, certainly. 329 00:15:55,290 --> 00:15:57,690 So if I wanted to have some sort of default-- 330 00:15:57,690 --> 00:16:01,980 if I have this.props.name and there is no property called name, 331 00:16:01,980 --> 00:16:04,830 then the value of this.props.name is going to be a special value, 332 00:16:04,830 --> 00:16:06,930 like undefined in JavaScript. 333 00:16:06,930 --> 00:16:10,230 And so, a common way in JavaScript to get at some sort of default is 334 00:16:10,230 --> 00:16:13,320 by saying, this.props.name or-- 335 00:16:13,320 --> 00:16:15,660 two vertical bars meaning or-- 336 00:16:15,660 --> 00:16:19,260 and then in quotation marks, I can have whatever I want the default name to be. 337 00:16:19,260 --> 00:16:24,260 And so, maybe the default name is going to be Andrew. 338 00:16:24,260 --> 00:16:27,180 And now, even if I don't include name on this last one, 339 00:16:27,180 --> 00:16:31,000 just say hello, assuming all goes right-- 340 00:16:31,000 --> 00:16:34,380 OK, it still says "Hello Andrew" on the last iteration of the page. 341 00:16:34,380 --> 00:16:38,190 And the reason that works is, when I say this.props.name or Andrew, 342 00:16:38,190 --> 00:16:42,760 if this.props.name has a value, then this expression will short circuit, 343 00:16:42,760 --> 00:16:43,260 so to speak. 344 00:16:43,260 --> 00:16:46,830 It will just use this.props.name because it already is a value. 345 00:16:46,830 --> 00:16:49,080 But if this.props.name is undefined, then 346 00:16:49,080 --> 00:16:51,210 it's going to go to the thing on the other side of the or expression 347 00:16:51,210 --> 00:16:52,960 and say, OK, let's go see the other thing. 348 00:16:52,960 --> 00:16:54,540 And that, in that case, is Andrew-- 349 00:16:54,540 --> 00:16:56,463 in this case. 350 00:16:56,463 --> 00:16:57,129 Question? 351 00:16:57,129 --> 00:16:59,170 AUDIENCE: Can you have a bunch of or expressions? 352 00:16:59,170 --> 00:17:00,860 SPEAKER 1: Can you have a bunch of or expressions? 353 00:17:00,860 --> 00:17:01,610 Yes. 354 00:17:01,610 --> 00:17:03,193 There shouldn't be any reason why not. 355 00:17:03,193 --> 00:17:06,028 356 00:17:06,028 --> 00:17:06,996 Other things? 357 00:17:06,996 --> 00:17:10,869 358 00:17:10,869 --> 00:17:11,740 OK. 359 00:17:11,740 --> 00:17:14,406 So how do we feel about this much so far? 360 00:17:14,406 --> 00:17:16,030 Do we need more examples of this stuff? 361 00:17:16,030 --> 00:17:17,071 Or do we want to move on? 362 00:17:17,071 --> 00:17:19,640 AUDIENCE: Can we have another example? 363 00:17:19,640 --> 00:17:20,450 SPEAKER 1: Sure. 364 00:17:20,450 --> 00:17:22,670 So let's see another example. 365 00:17:22,670 --> 00:17:29,960 In this case, let's try an example that's also going to say hello. 366 00:17:29,960 --> 00:17:32,490 Then we'll add an additional feature to it in just a moment. 367 00:17:32,490 --> 00:17:35,120 So we're going to have a hello component that is just 368 00:17:35,120 --> 00:17:40,320 going to say "Hello", for example. 369 00:17:40,320 --> 00:17:46,080 And let's go ahead and just return the hello component. 370 00:17:46,080 --> 00:17:49,020 So all app is going to do-- this component-- is 371 00:17:49,020 --> 00:17:51,240 return a hello component. 372 00:17:51,240 --> 00:17:53,520 And all that hello component is going to do 373 00:17:53,520 --> 00:17:58,590 is return an h1 that says "Hello", for example. 374 00:17:58,590 --> 00:17:59,147 So OK. 375 00:17:59,147 --> 00:18:01,980 This is just going to say "Hello", and that's all it's going to say. 376 00:18:01,980 --> 00:18:04,460 Let me now add to this hello component. 377 00:18:04,460 --> 00:18:09,580 Instead of just returning an h1, let me wrap this whole thing inside of a div. 378 00:18:09,580 --> 00:18:12,340 Let me also add a button that says "Click Here". 379 00:18:12,340 --> 00:18:17,520 380 00:18:17,520 --> 00:18:18,150 So all right. 381 00:18:18,150 --> 00:18:20,600 I have "Hello" and I have a button that says "Click Here". 382 00:18:20,600 --> 00:18:23,460 And I got that by just saying, inside the hello component, 383 00:18:23,460 --> 00:18:26,280 you should have an h1 one that says "Hello", 384 00:18:26,280 --> 00:18:28,710 and you should also have a button that says "Click Here." 385 00:18:28,710 --> 00:18:32,820 386 00:18:32,820 --> 00:18:38,850 Now once we have this button, we can begin to add functionality and features 387 00:18:38,850 --> 00:18:40,330 to this component. 388 00:18:40,330 --> 00:18:45,950 So I could say, button onClick equals something. 389 00:18:45,950 --> 00:18:48,230 I can type in the name of a function here 390 00:18:48,230 --> 00:18:52,370 for what function should run when this button is clicked on. 391 00:18:52,370 --> 00:18:54,710 And so I could say, this.-- 392 00:18:54,710 --> 00:18:56,442 and I'll just call it "handleClick". 393 00:18:56,442 --> 00:18:58,400 It's a pretty conventional name for what should 394 00:18:58,400 --> 00:19:00,020 happen when the button is clicked on. 395 00:19:00,020 --> 00:19:04,310 Again, using curly braces to mean plug in some JavaScript here. 396 00:19:04,310 --> 00:19:08,210 And now I can say, OK, handleClick is going to be a function, 397 00:19:08,210 --> 00:19:10,520 using the arrow syntax for the function. 398 00:19:10,520 --> 00:19:14,360 And this function right now is just going to alert and say hi. 399 00:19:14,360 --> 00:19:17,390 400 00:19:17,390 --> 00:19:18,340 So let's try this. 401 00:19:18,340 --> 00:19:20,930 We'll just refresh this page. 402 00:19:20,930 --> 00:19:24,410 We have a "Hello" in h1, and a button that says "Click Here". 403 00:19:24,410 --> 00:19:26,510 When I click here, I get an alert. 404 00:19:26,510 --> 00:19:29,360 And that alert says "Hi!" 405 00:19:29,360 --> 00:19:31,700 Again, how did that work? 406 00:19:31,700 --> 00:19:36,920 Inside of the hello component, we have an h1 tag that just says "Hello", 407 00:19:36,920 --> 00:19:38,520 and then a button. 408 00:19:38,520 --> 00:19:42,230 And when we click on that button, we're going to run this.handleClick. 409 00:19:42,230 --> 00:19:46,010 In other words, the handleClick function or method of this class-- 410 00:19:46,010 --> 00:19:47,900 this class called hello-- 411 00:19:47,900 --> 00:19:50,080 here is that handleClick function. 412 00:19:50,080 --> 00:19:52,820 And all it's going to do is display an alert that says "Hi!" 413 00:19:52,820 --> 00:19:58,840 414 00:19:58,840 --> 00:20:00,344 Questions about any of that so far? 415 00:20:00,344 --> 00:20:03,130 416 00:20:03,130 --> 00:20:07,730 All right, we'll slowly build up into more sophisticated things. 417 00:20:07,730 --> 00:20:08,760 Question, yeah? 418 00:20:08,760 --> 00:20:12,435 AUDIENCE: So the same way the name wasn't defined below here 419 00:20:12,435 --> 00:20:19,540 but name is [INAUDIBLE] can we do the same thing with [INAUDIBLE] 420 00:20:19,540 --> 00:20:24,985 define that function differently whenever we call hello with an app. 421 00:20:24,985 --> 00:20:25,610 SPEAKER 1: Yes. 422 00:20:25,610 --> 00:20:28,900 You can, in addition to just providing-- 423 00:20:28,900 --> 00:20:33,020 so before, we said, hello, name equals Krishna, for example. 424 00:20:33,020 --> 00:20:36,140 And we provided a string in as the value of the property name. 425 00:20:36,140 --> 00:20:39,110 You could, if you wanted to, provide in a function, 426 00:20:39,110 --> 00:20:42,977 like this.someFunction, and provide some function into the components, 427 00:20:42,977 --> 00:20:45,560 so that different components use different functions to behave 428 00:20:45,560 --> 00:20:46,640 in different ways. 429 00:20:46,640 --> 00:20:48,291 That's something you can do as well. 430 00:20:48,291 --> 00:20:49,790 We may see an example of that later. 431 00:20:49,790 --> 00:20:52,350 432 00:20:52,350 --> 00:20:52,850 Yeah? 433 00:20:52,850 --> 00:20:57,130 AUDIENCE: Can you explain the line at the bottom of the [INAUDIBLE]?? 434 00:20:57,130 --> 00:20:59,001 SPEAKER 1: The line at the-- this line? 435 00:20:59,001 --> 00:20:59,500 Yep. 436 00:20:59,500 --> 00:21:02,820 So this line is just taking this component that we've written 437 00:21:02,820 --> 00:21:05,350 and actually inserting it into the application. 438 00:21:05,350 --> 00:21:08,490 So as of this point, all I've done is define, 439 00:21:08,490 --> 00:21:11,510 this is what an app should look like and how it should behave. 440 00:21:11,510 --> 00:21:14,640 But I haven't actually taken that app and put it into my web page. 441 00:21:14,640 --> 00:21:19,080 It's not until line 40 here that I actually say, take this app component 442 00:21:19,080 --> 00:21:22,925 and actually insert it into whatever the thing that has id app is, 443 00:21:22,925 --> 00:21:25,050 and actually putting that into the web application. 444 00:21:25,050 --> 00:21:28,905 AUDIENCE: And you're not using the [INAUDIBLE]?? 445 00:21:28,905 --> 00:21:29,530 SPEAKER 1: Yes. 446 00:21:29,530 --> 00:21:32,599 In this case, app has a hello component inside of it. 447 00:21:32,599 --> 00:21:35,890 You could imagine that we probably don't need it, because this app component is 448 00:21:35,890 --> 00:21:37,348 just rendering the hello component. 449 00:21:37,348 --> 00:21:39,832 So I could replace this with just hello. 450 00:21:39,832 --> 00:21:41,290 But it doesn't matter in this case. 451 00:21:41,290 --> 00:21:44,224 They're sort of interchangeable. 452 00:21:44,224 --> 00:21:44,850 Yeah? 453 00:21:44,850 --> 00:21:51,760 AUDIENCE: [INAUDIBLE] so why is there [INAUDIBLE]?? 454 00:21:51,760 --> 00:21:55,590 455 00:21:55,590 --> 00:21:58,420 SPEAKER 1: This is referring to this component. 456 00:21:58,420 --> 00:22:00,540 In other words, this hello component. 457 00:22:00,540 --> 00:22:03,780 And the hello component currently has two functions inside of it-- 458 00:22:03,780 --> 00:22:06,930 a render function or method, and then handleClick. 459 00:22:06,930 --> 00:22:12,210 And so we're saying, run the handleClick method when the button is clicked on. 460 00:22:12,210 --> 00:22:15,661 461 00:22:15,661 --> 00:22:16,647 Yeah? 462 00:22:16,647 --> 00:22:19,605 AUDIENCE: So how would you pass an argument [INAUDIBLE]?? 463 00:22:19,605 --> 00:22:22,154 464 00:22:22,154 --> 00:22:23,570 SPEAKER 1: How would you pass an-- 465 00:22:23,570 --> 00:22:26,050 AUDIENCE: If you wanted to alert [INAUDIBLE]?? 466 00:22:26,050 --> 00:22:28,957 467 00:22:28,957 --> 00:22:29,540 SPEAKER 1: Oh. 468 00:22:29,540 --> 00:22:35,880 You can access this.props.whatever from inside of your functions as well. 469 00:22:35,880 --> 00:22:42,050 So if we still had a name property, you could say, hi, 470 00:22:42,050 --> 00:22:45,950 and then you could add on this.props.name, for example. 471 00:22:45,950 --> 00:22:49,670 You could access the properties from inside of the functions. 472 00:22:49,670 --> 00:22:52,382 473 00:22:52,382 --> 00:22:53,286 Yeah? 474 00:22:53,286 --> 00:22:56,740 AUDIENCE: So in the beginning of the code 475 00:22:56,740 --> 00:23:02,626 you wrote you had hello [INAUDIBLE] and then in [INAUDIBLE].. 476 00:23:02,626 --> 00:23:05,547 477 00:23:05,547 --> 00:23:06,172 SPEAKER 1: Yep. 478 00:23:06,172 --> 00:23:10,528 AUDIENCE: But how do you know what this is referring 479 00:23:10,528 --> 00:23:15,370 to because there is no [INAUDIBLE]. 480 00:23:15,370 --> 00:23:21,700 SPEAKER 1: So this is just referring to the hello component. 481 00:23:21,700 --> 00:23:24,370 And React is automatically going to fill in props 482 00:23:24,370 --> 00:23:27,700 with any of the properties that are passed into the hello component. 483 00:23:27,700 --> 00:23:30,440 So as long as you provide attributes in this style of, 484 00:23:30,440 --> 00:23:33,280 name of the component, and then name equals something, 485 00:23:33,280 --> 00:23:35,847 name is automatically going to become one of the props. 486 00:23:35,847 --> 00:23:37,930 And its value, in this case, is going to be Julia. 487 00:23:37,930 --> 00:23:41,420 488 00:23:41,420 --> 00:23:43,250 Other things before we go on? 489 00:23:43,250 --> 00:23:43,868 Yeah? 490 00:23:43,868 --> 00:23:45,326 AUDIENCE: In a problem [INAUDIBLE]. 491 00:23:45,326 --> 00:23:48,464 492 00:23:48,464 --> 00:23:49,130 SPEAKER 1: Yeah. 493 00:23:49,130 --> 00:23:51,850 It could be any JavaScript value. 494 00:23:51,850 --> 00:23:53,780 Yeah. 495 00:23:53,780 --> 00:23:54,465 Yeah? 496 00:23:54,465 --> 00:23:58,920 AUDIENCE: Does the handle click function have to be defined like that 497 00:23:58,920 --> 00:24:03,449 or could we define in the normal function [INAUDIBLE]?? 498 00:24:03,449 --> 00:24:05,240 SPEAKER 1: You could define it differently. 499 00:24:05,240 --> 00:24:07,870 Although, the arrow function syntax is going to-- 500 00:24:07,870 --> 00:24:09,310 it adds a couple little nuances. 501 00:24:09,310 --> 00:24:14,304 It's going to make sure that it handles the this binding correctly. 502 00:24:14,304 --> 00:24:16,970 Long story short, JavaScript is a little bit funky about the way 503 00:24:16,970 --> 00:24:19,760 it handles the keyword "this" and what the keyword "this" means. 504 00:24:19,760 --> 00:24:22,700 And so to be safe, most of the time for event handlers, 505 00:24:22,700 --> 00:24:25,187 you'll want to define it this way. 506 00:24:25,187 --> 00:24:27,020 No need to worry too much about that though. 507 00:24:27,020 --> 00:24:27,520 Yeah? 508 00:24:27,520 --> 00:24:32,335 AUDIENCE: [INAUDIBLE] script code separately [INAUDIBLE].. 509 00:24:32,335 --> 00:24:32,960 SPEAKER 1: Yes. 510 00:24:32,960 --> 00:24:35,810 In fact, in most production environments, what you'll really do 511 00:24:35,810 --> 00:24:38,150 is separate each component into a different file-- 512 00:24:38,150 --> 00:24:39,650 into a different JavaScript file, and then you'll 513 00:24:39,650 --> 00:24:40,941 just combine them all together. 514 00:24:40,941 --> 00:24:44,095 AUDIENCE: So it's only considered JavaScript and not like [INAUDIBLE]?? 515 00:24:44,095 --> 00:24:47,284 It wouldn't be a different extension? 516 00:24:47,284 --> 00:24:47,950 SPEAKER 1: Yeah. 517 00:24:47,950 --> 00:24:49,540 So in actuality, what most people will do-- 518 00:24:49,540 --> 00:24:51,956 and we'll probably take a look at this tomorrow-- is that, 519 00:24:51,956 --> 00:24:55,750 rather than have the page translate all of the JSX into JavaScript 520 00:24:55,750 --> 00:24:57,880 every single time, usually what people will do 521 00:24:57,880 --> 00:25:00,397 is they'll write the JavaScript JSX code once. 522 00:25:00,397 --> 00:25:02,980 And then before they actually push their code to the internet, 523 00:25:02,980 --> 00:25:05,620 they'll compile the code into regular JavaScript, 524 00:25:05,620 --> 00:25:08,770 and then deploy that, such that it is playing JavaScript 525 00:25:08,770 --> 00:25:10,270 that any browser can understand. 526 00:25:10,270 --> 00:25:12,874 And that just works for efficiency reasons, 527 00:25:12,874 --> 00:25:15,790 so that you don't need to keep recompiling the code every single time. 528 00:25:15,790 --> 00:25:18,010 Because the recompiled code is going to be the same. 529 00:25:18,010 --> 00:25:19,635 But we'll take a look at that tomorrow. 530 00:25:19,635 --> 00:25:22,541 531 00:25:22,541 --> 00:25:23,040 All right. 532 00:25:23,040 --> 00:25:27,000 So far, all we've done is come up with a lot of JavaScript syntax 533 00:25:27,000 --> 00:25:30,330 to do what would have been pretty easy to do with just HTML. 534 00:25:30,330 --> 00:25:32,430 So let's now actually take a look at why it 535 00:25:32,430 --> 00:25:34,585 is that React is going to give us additional-- 536 00:25:34,585 --> 00:25:37,710 is going to make it easier to actually write certain types of applications, 537 00:25:37,710 --> 00:25:41,070 as opposed to just more wordy, which seems to have been so far. 538 00:25:41,070 --> 00:25:44,020 And the main reason that it's going to be helpful 539 00:25:44,020 --> 00:25:46,230 is when it comes to thinking about state, 540 00:25:46,230 --> 00:25:48,090 and the state of our application. 541 00:25:48,090 --> 00:25:50,066 So far, when we've been building applications, 542 00:25:50,066 --> 00:25:51,690 we've been writing things imperatively. 543 00:25:51,690 --> 00:25:54,120 When you were writing your quiz application, for instance, 544 00:25:54,120 --> 00:25:56,670 you changed the variable referring to what question 545 00:25:56,670 --> 00:25:58,350 number you're currently on in the quiz. 546 00:25:58,350 --> 00:26:01,320 And then you had to actually say, all right, let's update the page now. 547 00:26:01,320 --> 00:26:04,590 Let's update the DOM to actually use this new question. 548 00:26:04,590 --> 00:26:07,359 Or when you changed the score for the game, for instance, 549 00:26:07,359 --> 00:26:09,900 you actually had to say, all right, let's now update the page 550 00:26:09,900 --> 00:26:12,150 to take this variable relating to the score 551 00:26:12,150 --> 00:26:14,100 and put it into the web application. 552 00:26:14,100 --> 00:26:17,670 What we're going to do with React with declarative programming is say, 553 00:26:17,670 --> 00:26:20,580 on this page, we're going to have this part of the page 554 00:26:20,580 --> 00:26:23,850 just draw information from whatever our data is. 555 00:26:23,850 --> 00:26:26,790 So all we have to do in order to update the page is just 556 00:26:26,790 --> 00:26:30,450 change the data-- change the state of the application. 557 00:26:30,450 --> 00:26:33,750 And the view of the application-- what the application looks like-- 558 00:26:33,750 --> 00:26:35,890 is going to change to reflect that. 559 00:26:35,890 --> 00:26:38,730 And so, let's do a simple example of that. 560 00:26:38,730 --> 00:26:41,610 We're going to define a class that's going to count, much like we 561 00:26:41,610 --> 00:26:44,160 did in a JavaScript example before, whereby 562 00:26:44,160 --> 00:26:49,070 we would have a counter that is going to just count when you click a button that 563 00:26:49,070 --> 00:26:51,090 says increment, increment, increment. 564 00:26:51,090 --> 00:26:54,120 What we're going to do is, we're going to define some application state. 565 00:26:54,120 --> 00:26:58,980 And the initial state we need to define when we first create the component. 566 00:26:58,980 --> 00:27:02,430 And in Python, we did this via a function called underscore, underscore 567 00:27:02,430 --> 00:27:03,240 init-- 568 00:27:03,240 --> 00:27:05,640 the constructor function for what happens when you first 569 00:27:05,640 --> 00:27:08,297 create a new Python object. 570 00:27:08,297 --> 00:27:09,880 JavaScript has something very similar. 571 00:27:09,880 --> 00:27:11,470 It also has a constructor function. 572 00:27:11,470 --> 00:27:12,900 It's actually called constructor. 573 00:27:12,900 --> 00:27:16,800 And the constructor takes as its arguments props-- 574 00:27:16,800 --> 00:27:21,600 all of the properties that the component is going to have. 575 00:27:21,600 --> 00:27:25,380 And there is one line here that has to do with object oriented programming. 576 00:27:25,380 --> 00:27:28,290 Because the counter class-- this component-- 577 00:27:28,290 --> 00:27:32,250 is extending the regular React component, 578 00:27:32,250 --> 00:27:34,495 we need to add this special line called super(props). 579 00:27:34,495 --> 00:27:36,120 Again, don't worry too much about this. 580 00:27:36,120 --> 00:27:40,050 But the long story short of this line is, we're basically saying, 581 00:27:40,050 --> 00:27:44,074 React's code for how a component works needs to use those props. 582 00:27:44,074 --> 00:27:45,990 And so we'll go ahead and provide it to what's 583 00:27:45,990 --> 00:27:49,230 called the super class, which is React.component. 584 00:27:49,230 --> 00:27:51,450 Again, no need to worry too much about that line. 585 00:27:51,450 --> 00:27:54,570 It just needs to be at the top of your constructor every single time. 586 00:27:54,570 --> 00:27:56,640 The interesting part of the constructor is 587 00:27:56,640 --> 00:27:58,830 that the constructor is where we're going to define 588 00:27:58,830 --> 00:28:00,570 the state of the application-- 589 00:28:00,570 --> 00:28:04,230 what it is that this component needs to keep track of. 590 00:28:04,230 --> 00:28:08,670 So this.state we're going to set equal to some JavaScript object-- 591 00:28:08,670 --> 00:28:11,550 some collection of key value pairs that's 592 00:28:11,550 --> 00:28:14,190 going to represent the state of the object, 593 00:28:14,190 --> 00:28:16,020 or the state of this particular component. 594 00:28:16,020 --> 00:28:17,640 And so, the counter-- 595 00:28:17,640 --> 00:28:19,990 all it needs to do is keep track of some variable that's 596 00:28:19,990 --> 00:28:22,380 going to keep track of what the current count value is. 597 00:28:22,380 --> 00:28:25,620 So we can start by having this.state have a key called 598 00:28:25,620 --> 00:28:28,080 count and a value of 0. 599 00:28:28,080 --> 00:28:30,330 Basically, just saying that this component 600 00:28:30,330 --> 00:28:35,511 is going to start off by displaying a 0, for example. 601 00:28:35,511 --> 00:28:37,760 So I'll show you that in practice so that it hopefully 602 00:28:37,760 --> 00:28:39,470 becomes a little bit clearer. 603 00:28:39,470 --> 00:28:41,000 I'll go ahead and create a new file. 604 00:28:41,000 --> 00:28:43,720 We'll call it counter.html. 605 00:28:43,720 --> 00:28:47,150 And I'll go ahead and take all this code, and put it back in here at least 606 00:28:47,150 --> 00:28:48,300 for now. 607 00:28:48,300 --> 00:28:50,990 And instead of rendering a hello component, 608 00:28:50,990 --> 00:28:54,710 I'm going to render a counter component. 609 00:28:54,710 --> 00:28:56,390 And all right. 610 00:28:56,390 --> 00:29:02,220 What is the counter component going to do? 611 00:29:02,220 --> 00:29:04,800 Well, inside of the constructor-- 612 00:29:04,800 --> 00:29:08,310 again, super(props), just to make sure the constructor works OK-- 613 00:29:08,310 --> 00:29:11,100 we're going to define the state of the application. 614 00:29:11,100 --> 00:29:14,730 And the state of the application is going to have a count of 0 615 00:29:14,730 --> 00:29:15,570 to start with. 616 00:29:15,570 --> 00:29:19,260 This is the starting value of this particular piece 617 00:29:19,260 --> 00:29:22,180 of the state of my counter. 618 00:29:22,180 --> 00:29:24,820 And now, what is my render function going to do? 619 00:29:24,820 --> 00:29:31,330 Well the render function is going to return a div inside of which 620 00:29:31,330 --> 00:29:34,438 is going to just be this.state.count. 621 00:29:34,438 --> 00:29:38,970 622 00:29:38,970 --> 00:29:42,630 So in order to access the state of my component, 623 00:29:42,630 --> 00:29:45,480 I can say something like, this.state.count, 624 00:29:45,480 --> 00:29:50,640 and that's going to insert the current state's count value into my application 625 00:29:50,640 --> 00:29:52,950 at this point. 626 00:29:52,950 --> 00:29:55,680 If I open up counter.html-- 627 00:29:55,680 --> 00:29:56,730 all right, great. 628 00:29:56,730 --> 00:29:59,250 I see the number 0 because that's the current value 629 00:29:59,250 --> 00:30:01,432 of the state in JavaScript. 630 00:30:01,432 --> 00:30:04,090 631 00:30:04,090 --> 00:30:06,640 Questions about that so far? 632 00:30:06,640 --> 00:30:07,160 Yeah? 633 00:30:07,160 --> 00:30:10,118 AUDIENCE: Is props like-- 634 00:30:10,118 --> 00:30:14,564 [INAUDIBLE] or is it specifically [INAUDIBLE]?? 635 00:30:14,564 --> 00:30:18,520 636 00:30:18,520 --> 00:30:22,885 SPEAKER 1: Props is specific to-- it's a special name in React syntax. 637 00:30:22,885 --> 00:30:24,421 AUDIENCE: Like [INAUDIBLE]. 638 00:30:24,421 --> 00:30:27,747 SPEAKER 1: Yeah, this is specific to JavaScript, props is specific to React. 639 00:30:27,747 --> 00:30:29,080 But they both are special names. 640 00:30:29,080 --> 00:30:35,672 AUDIENCE: So then are props in general more like keyword arguments in Python 641 00:30:35,672 --> 00:30:37,463 as opposed to standard arguments because it 642 00:30:37,463 --> 00:30:40,964 would be like name equals something as opposed to just putting in quotes 643 00:30:40,964 --> 00:30:42,740 whatever the name you want. 644 00:30:42,740 --> 00:30:45,240 SPEAKER 1: Yeah, you can think of them as keyword arguments. 645 00:30:45,240 --> 00:30:46,769 That's a good comparison. 646 00:30:46,769 --> 00:30:47,310 Other things? 647 00:30:47,310 --> 00:30:47,810 Yeah? 648 00:30:47,810 --> 00:30:50,741 AUDIENCE: This is just like a kind of general syntax question. 649 00:30:50,741 --> 00:30:55,324 When should you use the semicolon? 650 00:30:55,324 --> 00:30:58,240 SPEAKER 1: The semicolons are actually usually optional in JavaScript. 651 00:30:58,240 --> 00:31:00,340 So most of the time, it's not going to matter whether you 652 00:31:00,340 --> 00:31:01,600 include the semicolons or not. 653 00:31:01,600 --> 00:31:04,307 I'll generally defer to using the semicolons most of the time. 654 00:31:04,307 --> 00:31:05,890 Though I will occasionally forget one. 655 00:31:05,890 --> 00:31:10,370 656 00:31:10,370 --> 00:31:11,510 Other things? 657 00:31:11,510 --> 00:31:14,870 OK, so notice now that I can change the value of the count variable 658 00:31:14,870 --> 00:31:16,311 in the state object. 659 00:31:16,311 --> 00:31:17,810 And that's going to change the page. 660 00:31:17,810 --> 00:31:21,380 If I change count to 1, for example, and refresh the page, 661 00:31:21,380 --> 00:31:25,160 the page changes in response to that state. 662 00:31:25,160 --> 00:31:27,290 But of course, what I'd really like to do 663 00:31:27,290 --> 00:31:33,950 is to add some code such that this component will modify its own state. 664 00:31:33,950 --> 00:31:36,140 So let me go ahead and take this.state.count, 665 00:31:36,140 --> 00:31:41,330 put that inside of an h1 tag, and add a button called "Increment". 666 00:31:41,330 --> 00:31:44,210 667 00:31:44,210 --> 00:31:45,680 And when I click the button-- 668 00:31:45,680 --> 00:31:50,060 onClick-- let's go ahead and run the this.increment function, which 669 00:31:50,060 --> 00:31:53,460 is a function that I'm going to write. 670 00:31:53,460 --> 00:31:54,780 Here's my increment function. 671 00:31:54,780 --> 00:31:57,290 672 00:31:57,290 --> 00:32:02,360 And what I would like to do-- what you think might be the easy thing to do is 673 00:32:02,360 --> 00:32:06,070 just to say, this.state.count-- 674 00:32:06,070 --> 00:32:08,570 if I want to increment it, let's just for simplicity's sake, 675 00:32:08,570 --> 00:32:10,670 say change it to 1-- 676 00:32:10,670 --> 00:32:14,120 you might think I would say something like this-- this.state.count equals 1. 677 00:32:14,120 --> 00:32:15,830 And that would be nice to say. 678 00:32:15,830 --> 00:32:19,430 But unfortunately, React is a little bit more complicated than that. 679 00:32:19,430 --> 00:32:23,440 React does not let you modify the state directly. 680 00:32:23,440 --> 00:32:26,600 And the reason for that is, React is going to be smart about things. 681 00:32:26,600 --> 00:32:29,570 It doesn't want to reload parts of the page 682 00:32:29,570 --> 00:32:31,940 if it doesn't need to, for efficiency reasons. 683 00:32:31,940 --> 00:32:35,180 And so, if you want to modify the state of the application, 684 00:32:35,180 --> 00:32:40,970 you need to use a special function called this.setState. 685 00:32:40,970 --> 00:32:45,260 This.setState is a function that's going to take a JavaScript object, 686 00:32:45,260 --> 00:32:48,390 and it's going to let me change the state of the application. 687 00:32:48,390 --> 00:32:53,030 So if I want to change it to have a count of 1, for example, 688 00:32:53,030 --> 00:32:54,920 this would be the code that I would use. 689 00:32:54,920 --> 00:32:57,350 If I want to change the state to have a count of 1, 690 00:32:57,350 --> 00:33:01,220 I call this.setState, passing in a JavaScript object, 691 00:33:01,220 --> 00:33:04,280 setting count equal to 1. 692 00:33:04,280 --> 00:33:07,860 I'll show you what that looks like, and then we go back to the code. 693 00:33:07,860 --> 00:33:09,780 Refresh the page, it's a 0. 694 00:33:09,780 --> 00:33:11,690 And I have a button called "Increment". 695 00:33:11,690 --> 00:33:15,420 And if I click the Increment button, OK, the 0 changed to 1. 696 00:33:15,420 --> 00:33:19,110 I didn't have to say, go into the h1 tag and get rid of the 0 697 00:33:19,110 --> 00:33:20,640 and replace it with a 1. 698 00:33:20,640 --> 00:33:24,570 All I did was, initially, I said, inside of the h1 tag, let's go ahead 699 00:33:24,570 --> 00:33:29,090 and have whatever the value of this.state.count is. 700 00:33:29,090 --> 00:33:32,670 And if I ever change the state, as via calling this.setState, 701 00:33:32,670 --> 00:33:36,360 that's going to change the value of this.state.count. 702 00:33:36,360 --> 00:33:38,730 And that's going to result in a different value being 703 00:33:38,730 --> 00:33:40,941 inserted into the h1 tag there. 704 00:33:40,941 --> 00:33:41,440 Question? 705 00:33:41,440 --> 00:33:48,606 AUDIENCE: If your initial state is [INAUDIBLE] 706 00:33:48,606 --> 00:33:51,722 how does it update or would you have reset the state for all 707 00:33:51,722 --> 00:33:53,582 of the other variables? 708 00:33:53,582 --> 00:33:54,790 SPEAKER 1: Oh, good question. 709 00:33:54,790 --> 00:33:57,248 So the question is, what if my state were more complicated? 710 00:33:57,248 --> 00:34:00,340 In addition to having count, I also have some other attribute 711 00:34:00,340 --> 00:34:06,180 1 that's equal to "hi", and some other attribute 2 the equal to "bye". 712 00:34:06,180 --> 00:34:09,060 What happens to attribute 1 and attribute 2? 713 00:34:09,060 --> 00:34:12,270 If I call setState, count goes to 1. 714 00:34:12,270 --> 00:34:15,840 Any key that's not included in the set.State object 715 00:34:15,840 --> 00:34:17,580 is just going to remain unchanged. 716 00:34:17,580 --> 00:34:21,120 So all setState is doing here is, it's going to set count equal to 1. 717 00:34:21,120 --> 00:34:23,880 But anything else in the state, if I didn't mention it explicitly, 718 00:34:23,880 --> 00:34:25,530 is just going to stay as is. 719 00:34:25,530 --> 00:34:28,080 So you don't need to worry about resetting those same values 720 00:34:28,080 --> 00:34:29,340 to the same things again. 721 00:34:29,340 --> 00:34:32,400 You just need to say, what is it about the state that I want to change? 722 00:34:32,400 --> 00:34:33,880 And put that into setState. 723 00:34:33,880 --> 00:34:34,380 Yes? 724 00:34:34,380 --> 00:34:40,090 AUDIENCE: In setState could you add a new key to your state [INAUDIBLE]?? 725 00:34:40,090 --> 00:34:42,880 SPEAKER 1: In setState, could you add a new key to your state? 726 00:34:42,880 --> 00:34:46,022 You probably could, but probably not a good idea to. 727 00:34:46,022 --> 00:34:48,730 Any state you want, you probably want to give it an initial value 728 00:34:48,730 --> 00:34:49,688 inside of the setState. 729 00:34:49,688 --> 00:34:52,630 730 00:34:52,630 --> 00:34:53,610 Yes? 731 00:34:53,610 --> 00:34:57,040 AUDIENCE: Is React an abstraction of that [INAUDIBLE]?? 732 00:34:57,040 --> 00:35:03,410 You mentioned we're not writing the JavaScript to go in [INAUDIBLE].. 733 00:35:03,410 --> 00:35:06,360 So is React actually doing that somewhere else or is it [INAUDIBLE]?? 734 00:35:06,360 --> 00:35:06,985 SPEAKER 1: Yes. 735 00:35:06,985 --> 00:35:09,300 So React is taking care of the process of actually 736 00:35:09,300 --> 00:35:11,430 updating the DOM whenever it needs to. 737 00:35:11,430 --> 00:35:12,870 But it's handling that logic. 738 00:35:12,870 --> 00:35:16,530 And so, all we need to worry about is what the page should look like. 739 00:35:16,530 --> 00:35:19,230 And React does the heavy lifting of figuring out what to insert 740 00:35:19,230 --> 00:35:22,110 and what to remove from the DOM. 741 00:35:22,110 --> 00:35:23,970 And the advantage here is that it makes sure 742 00:35:23,970 --> 00:35:26,739 that our data and our user interface stay in sync-- 743 00:35:26,739 --> 00:35:28,530 that it's possible in the quiz application, 744 00:35:28,530 --> 00:35:30,450 if there were a bug in your quiz application, 745 00:35:30,450 --> 00:35:34,260 that you could have your variables not be consistent with what it is the user 746 00:35:34,260 --> 00:35:35,360 is seeing on the screen. 747 00:35:35,360 --> 00:35:37,860 React is going to make sure that those things always line Up 748 00:35:37,860 --> 00:35:40,290 so it eliminates a large class of potential bugs 749 00:35:40,290 --> 00:35:42,640 that you could have in your application. 750 00:35:42,640 --> 00:35:43,270 Yeah? 751 00:35:43,270 --> 00:35:47,392 AUDIENCE: Why do we have [INAUDIBLE] state instead or props? 752 00:35:47,392 --> 00:35:50,100 SPEAKER 1: OK, what's the difference between the state and props? 753 00:35:50,100 --> 00:35:53,160 Props you can think of as attributes that you're 754 00:35:53,160 --> 00:35:55,240 going to provide into your component. 755 00:35:55,240 --> 00:35:57,310 And the component never changes its own props. 756 00:35:57,310 --> 00:36:00,060 They're sort of information you provide to the component about how 757 00:36:00,060 --> 00:36:01,440 that component should behave. 758 00:36:01,440 --> 00:36:03,660 And the component will never change its own props. 759 00:36:03,660 --> 00:36:07,020 State is something that a component has that the component might 760 00:36:07,020 --> 00:36:08,650 change at some point in the future. 761 00:36:08,650 --> 00:36:12,270 So something like the name that we're saying hello to, assuming we never 762 00:36:12,270 --> 00:36:14,730 want the hello component to change who is saying hello to, 763 00:36:14,730 --> 00:36:16,050 that should be a prop. 764 00:36:16,050 --> 00:36:19,770 But if it's something like the counter, where the counter component is 765 00:36:19,770 --> 00:36:22,290 going to change the value of the count, that 766 00:36:22,290 --> 00:36:25,211 should be part of the application state. 767 00:36:25,211 --> 00:36:25,710 Yeah? 768 00:36:25,710 --> 00:36:27,543 AUDIENCE: Can the initial value of the state 769 00:36:27,543 --> 00:36:29,482 be dependant on props passing [INAUDIBLE]?? 770 00:36:29,482 --> 00:36:37,220 771 00:36:37,220 --> 00:36:41,084 SPEAKER 1: Yes, you could make the initial state dependent upon the props. 772 00:36:41,084 --> 00:36:41,750 You can do that. 773 00:36:41,750 --> 00:36:44,772 774 00:36:44,772 --> 00:36:47,230 All right, so this application doesn't quite work just yet. 775 00:36:47,230 --> 00:36:50,146 Because right now it says 1, and I click Increment, and it stays at 1. 776 00:36:50,146 --> 00:36:54,005 Because all I'm doing right now on the Increment is setting count equal to 1. 777 00:36:54,005 --> 00:36:56,380 So of course, the simple way to actually do the increment 778 00:36:56,380 --> 00:36:57,880 would be to set count equal to what? 779 00:36:57,880 --> 00:37:01,600 780 00:37:01,600 --> 00:37:02,690 AUDIENCE: Count plus 1. 781 00:37:02,690 --> 00:37:03,690 SPEAKER 1: Count plus 1. 782 00:37:03,690 --> 00:37:06,156 And count is located inside of this.state. 783 00:37:06,156 --> 00:37:11,010 So I could say, this.state.count plus 1, would be one way to do that. 784 00:37:11,010 --> 00:37:15,489 So I set the count equal to whatever the current count is plus 1. 785 00:37:15,489 --> 00:37:16,280 I refresh the page. 786 00:37:16,280 --> 00:37:17,176 OK, now it's 0. 787 00:37:17,176 --> 00:37:17,925 I click Increment. 788 00:37:17,925 --> 00:37:19,040 It increments to 1. 789 00:37:19,040 --> 00:37:22,879 I click again, and every time, the state of the application is changing 790 00:37:22,879 --> 00:37:24,920 and the number is going to increment as a result. 791 00:37:24,920 --> 00:37:26,670 And so you can do that as much as you want 792 00:37:26,670 --> 00:37:29,730 to do by calling this.setState, updating the state to be 793 00:37:29,730 --> 00:37:32,130 whatever you want the new value to be. 794 00:37:32,130 --> 00:37:33,187 Questions? 795 00:37:33,187 --> 00:37:36,600 796 00:37:36,600 --> 00:37:38,330 So, a small, little nuance-- 797 00:37:38,330 --> 00:37:40,530 for if you actually go on to really want to start 798 00:37:40,530 --> 00:37:42,960 building React applications that are larger in scale-- 799 00:37:42,960 --> 00:37:46,290 in general, this is considered poor design 800 00:37:46,290 --> 00:37:49,861 to set the state and reference this.state 801 00:37:49,861 --> 00:37:52,230 inside of the setState function. 802 00:37:52,230 --> 00:37:55,770 Reason being, if you have multiple things happening simultaneously, 803 00:37:55,770 --> 00:37:59,040 it's possible that two this.setState calls 804 00:37:59,040 --> 00:38:00,947 might be happening at a similar time. 805 00:38:00,947 --> 00:38:02,780 And you might end up with a race condition-- 806 00:38:02,780 --> 00:38:05,238 something similar to what we described yesterday with SQL-- 807 00:38:05,238 --> 00:38:10,020 where someone else might modify the value of this.state.count before we 808 00:38:10,020 --> 00:38:12,780 have an opportunity to actually run this function. 809 00:38:12,780 --> 00:38:16,410 And so, in practice, React recommends that, 810 00:38:16,410 --> 00:38:21,150 if ever your new state is going to depend on your previous state, 811 00:38:21,150 --> 00:38:24,510 then you should actually change this.setState. 812 00:38:24,510 --> 00:38:26,940 So this.setState has a couple of possibilities. 813 00:38:26,940 --> 00:38:30,420 It can take just a JavaScript object, describing 814 00:38:30,420 --> 00:38:32,280 what the new state should be. 815 00:38:32,280 --> 00:38:35,310 But it can also take as its argument a function 816 00:38:35,310 --> 00:38:38,580 from the old state to the new state. 817 00:38:38,580 --> 00:38:42,660 So I could say, this.setState is going to be a function that takes-- 818 00:38:42,660 --> 00:38:45,440 I'll call it "oldState" to be explicit-- 819 00:38:45,440 --> 00:38:47,850 a function from old state to-- 820 00:38:47,850 --> 00:38:49,830 and then, in parentheses-- 821 00:38:49,830 --> 00:38:58,244 the new state, where count is going to be oldState.count plus 1. 822 00:38:58,244 --> 00:39:00,410 Usually, this is just called state and not oldState, 823 00:39:00,410 --> 00:39:02,690 but I'm calling it oldState for clarity. 824 00:39:02,690 --> 00:39:05,690 This is going to do basically the same thing that our previous code did. 825 00:39:05,690 --> 00:39:07,550 But it's a little bit more secure. 826 00:39:07,550 --> 00:39:09,620 By providing a function that says, here's 827 00:39:09,620 --> 00:39:11,960 how you translate the old state to the new state-- 828 00:39:11,960 --> 00:39:14,600 just take the old state count and add 1 to it-- 829 00:39:14,600 --> 00:39:17,480 that avoids against the possibility of race conditions. 830 00:39:17,480 --> 00:39:20,270 So you'll see me do this from time to time through the examples. 831 00:39:20,270 --> 00:39:23,420 And just know that I'm doing that for security purposes, just 832 00:39:23,420 --> 00:39:25,404 to prevent against potential bugs. 833 00:39:25,404 --> 00:39:27,320 But that's a small nuance of the way it works. 834 00:39:27,320 --> 00:39:27,957 Yeah? 835 00:39:27,957 --> 00:39:31,853 AUDIENCE: Why is it necessary to-- 836 00:39:31,853 --> 00:39:36,723 or what is the differentiation between referring to count as count 837 00:39:36,723 --> 00:39:40,792 and then having refer to it as the oldState or [INAUDIBLE]?? 838 00:39:40,792 --> 00:39:44,490 839 00:39:44,490 --> 00:39:47,260 SPEAKER 1: So this count on the left hand side 840 00:39:47,260 --> 00:39:50,110 is just the key of a JavaScript object. 841 00:39:50,110 --> 00:39:55,060 So it's-- much in the same way that when I was defining state up here, 842 00:39:55,060 --> 00:39:58,300 count was just the name of the key of the object that I'm assigning 843 00:39:58,300 --> 00:40:00,610 to a particular value. 844 00:40:00,610 --> 00:40:04,720 Whereas, if I want to actually reference the current value of count, 845 00:40:04,720 --> 00:40:07,020 there is no variable just called "count". 846 00:40:07,020 --> 00:40:10,565 It's stored inside of this.state. 847 00:40:10,565 --> 00:40:14,960 So to be able to access count, I need to use this.state.count. 848 00:40:14,960 --> 00:40:17,110 But if I just have some JavaScript object, 849 00:40:17,110 --> 00:40:21,130 I can have a key in that object that is called "count". 850 00:40:21,130 --> 00:40:23,600 That's the difference there. 851 00:40:23,600 --> 00:40:24,113 Yeah? 852 00:40:24,113 --> 00:40:25,940 AUDIENCE: Why is oldState [INAUDIBLE]? 853 00:40:25,940 --> 00:40:35,330 854 00:40:35,330 --> 00:40:36,920 SPEAKER 1: This is just a function. 855 00:40:36,920 --> 00:40:40,400 And setState, React's logic is going to take care of automatically saying, 856 00:40:40,400 --> 00:40:43,010 if I provide a function to setState, it's 857 00:40:43,010 --> 00:40:45,331 going to pass the current state into that function. 858 00:40:45,331 --> 00:40:48,122 And then we're just going to calculate the new state based on that. 859 00:40:48,122 --> 00:40:51,818 AUDIENCE: Right, but why doesn't oldState not count [INAUDIBLE]?? 860 00:40:51,818 --> 00:40:54,990 861 00:40:54,990 --> 00:40:59,430 SPEAKER 1: React handles this part of it for us by taking this function 862 00:40:59,430 --> 00:41:02,850 and providing the current state to it as the argument to that function. 863 00:41:02,850 --> 00:41:05,820 So that when it's calculating what it should set the new state to, 864 00:41:05,820 --> 00:41:08,460 it's going to say, all right, given this current state, 865 00:41:08,460 --> 00:41:10,080 let me pass it to this function. 866 00:41:10,080 --> 00:41:12,210 And whatever comes back should be the updates 867 00:41:12,210 --> 00:41:13,751 that I need to make to the new state. 868 00:41:13,751 --> 00:41:16,257 869 00:41:16,257 --> 00:41:18,590 I'll leave it up here if you want to keep looking at it. 870 00:41:18,590 --> 00:41:19,548 Yeah, another question? 871 00:41:19,548 --> 00:41:21,514 AUDIENCE: So oldState is also [INAUDIBLE]?? 872 00:41:21,514 --> 00:41:22,180 SPEAKER 1: Yeah. 873 00:41:22,180 --> 00:41:24,250 In fact, normally it's just called "state". 874 00:41:24,250 --> 00:41:26,350 But for clarity, I called it "oldState" so 875 00:41:26,350 --> 00:41:29,321 that it would be a little bit clearer. 876 00:41:29,321 --> 00:41:29,820 Yeah? 877 00:41:29,820 --> 00:41:32,300 AUDIENCE: If you had a more complex JavaScript object, 878 00:41:32,300 --> 00:41:38,252 how would you index into it given the dot index? 879 00:41:38,252 --> 00:41:43,034 Like instead of [INAUDIBLE] you have different elements within elements. 880 00:41:43,034 --> 00:41:44,950 SPEAKER 1: You could just chain dots together. 881 00:41:44,950 --> 00:41:47,260 If you have some key that is equal to some object, 882 00:41:47,260 --> 00:41:49,968 and there's some key inside that, you can continue to chain that. 883 00:41:49,968 --> 00:41:52,290 884 00:41:52,290 --> 00:41:52,870 Yeah? 885 00:41:52,870 --> 00:41:55,036 AUDIENCE: Why does passing the function of setState, 886 00:41:55,036 --> 00:41:59,059 why does that prevent race conditions? 887 00:41:59,059 --> 00:42:01,100 SPEAKER 1: So the reason this is going to prevent 888 00:42:01,100 --> 00:42:05,180 race conditions is because React will make sure 889 00:42:05,180 --> 00:42:07,640 that, when it's calling setState, it's going to provide it 890 00:42:07,640 --> 00:42:09,140 with the current value of the state. 891 00:42:09,140 --> 00:42:10,190 And that's going to give it a new state. 892 00:42:10,190 --> 00:42:13,280 And if there's some other setState function happening elsewhere, 893 00:42:13,280 --> 00:42:15,140 potentially concurrently, it will make sure 894 00:42:15,140 --> 00:42:17,330 that they don't interfere with each other. 895 00:42:17,330 --> 00:42:20,480 As opposed to, if we were just referencing this.state.count, 896 00:42:20,480 --> 00:42:22,370 if that line was taking a long time, there 897 00:42:22,370 --> 00:42:25,701 could potentially be interferences there that are happening. 898 00:42:25,701 --> 00:42:26,200 Yeah? 899 00:42:26,200 --> 00:42:43,312 AUDIENCE: [INAUDIBLE] 900 00:42:43,312 --> 00:42:44,020 SPEAKER 1: Right. 901 00:42:44,020 --> 00:42:46,990 This is something else on the same page that could be happening concurrently. 902 00:42:46,990 --> 00:42:48,140 This is a simple example. 903 00:42:48,140 --> 00:42:50,010 So it's not really ever going to happen. 904 00:42:50,010 --> 00:42:53,010 But you can imagine more complex examples where that could be a problem. 905 00:42:53,010 --> 00:42:55,197 906 00:42:55,197 --> 00:42:58,030 OK, just for sake of example, let's go ahead and try and extend this 907 00:42:58,030 --> 00:43:00,940 to add a Decrement button to decrease the value of the count. 908 00:43:00,940 --> 00:43:04,600 So a button that says Decrement-- 909 00:43:04,600 --> 00:43:07,600 when I click it, onClick, we'll do this.decrement. 910 00:43:07,600 --> 00:43:10,240 911 00:43:10,240 --> 00:43:14,230 And what Decrement is going to be is a function that 912 00:43:14,230 --> 00:43:19,480 sets the state of the application, taking the old state and saying, 913 00:43:19,480 --> 00:43:24,040 OK, the new count should be whatever state.count was minus 1. 914 00:43:24,040 --> 00:43:30,670 915 00:43:30,670 --> 00:43:32,440 All right, I now have an Increment button 916 00:43:32,440 --> 00:43:35,710 that increases the value of the count, and a Decrement button 917 00:43:35,710 --> 00:43:37,420 that decreases the value of the count-- 918 00:43:37,420 --> 00:43:41,230 each working just by changing the contents of this.state 919 00:43:41,230 --> 00:43:44,372 by calling this.setState function. 920 00:43:44,372 --> 00:43:45,354 Yes? 921 00:43:45,354 --> 00:43:48,434 AUDIENCE: Can we instantiate a multiple of these? 922 00:43:48,434 --> 00:43:49,100 SPEAKER 1: Sure. 923 00:43:49,100 --> 00:43:50,960 Can we instantiate a multiple of these? 924 00:43:50,960 --> 00:43:53,050 If I add another counter here-- 925 00:43:53,050 --> 00:43:53,560 and why not? 926 00:43:53,560 --> 00:43:54,830 I'll add a third counter-- 927 00:43:54,830 --> 00:43:57,200 we can reuse components as much as we want. 928 00:43:57,200 --> 00:44:00,140 And each component has its own state inside of it. 929 00:44:00,140 --> 00:44:02,690 So this component's count state is going to be 930 00:44:02,690 --> 00:44:05,060 entirely independent of this component's count state. 931 00:44:05,060 --> 00:44:07,310 And it's going to be entirely independent of this one. 932 00:44:07,310 --> 00:44:11,580 933 00:44:11,580 --> 00:44:14,680 Questions? 934 00:44:14,680 --> 00:44:15,180 Yeah? 935 00:44:15,180 --> 00:44:22,180 AUDIENCE: Can you-- if you wanted to pull in [INAUDIBLE] 936 00:44:22,180 --> 00:44:25,930 how do you access it if you're automatically generating because they 937 00:44:25,930 --> 00:44:28,670 don't have their own IDs [INAUDIBLE]. 938 00:44:28,670 --> 00:44:30,902 If I wanted to use in another function the value 939 00:44:30,902 --> 00:44:34,969 of the [INAUDIBLE] JavaScript. 940 00:44:34,969 --> 00:44:37,010 SPEAKER 1: Yeah, if you wanted to use this value, 941 00:44:37,010 --> 00:44:41,630 you would then just be able to access the state of that component, 942 00:44:41,630 --> 00:44:43,340 assuming you're inside of that component. 943 00:44:43,340 --> 00:44:46,889 And you can reference that state to be able to do something with it. 944 00:44:46,889 --> 00:44:49,430 And we'll see an example of that in just a moment when we try 945 00:44:49,430 --> 00:44:51,096 and build something a little bit larger. 946 00:44:51,096 --> 00:44:55,360 947 00:44:55,360 --> 00:44:58,669 All right, let's go ahead and try a bit of a larger example. 948 00:44:58,669 --> 00:45:01,210 Are there any other questions about the basic ideas of what's 949 00:45:01,210 --> 00:45:02,155 going on here so far? 950 00:45:02,155 --> 00:45:04,780 Hopefully it'll become clearer as we begin working with it too. 951 00:45:04,780 --> 00:45:07,650 952 00:45:07,650 --> 00:45:12,060 All right, what we're going to do now is build a game. 953 00:45:12,060 --> 00:45:16,367 And this is going to be a game that I used to use with my younger brother 954 00:45:16,367 --> 00:45:18,450 when he was growing up starting to learn addition, 955 00:45:18,450 --> 00:45:21,190 where we would just show him addition questions like, 3 plus 5. 956 00:45:21,190 --> 00:45:22,690 And you'd have to type in an answer. 957 00:45:22,690 --> 00:45:25,190 And if you get the answer right, you get some points for it. 958 00:45:25,190 --> 00:45:28,740 We'll implement a graphical web-based version of that sort of game. 959 00:45:28,740 --> 00:45:33,510 And so I'll go ahead and create a new file, and call it addition.html. 960 00:45:33,510 --> 00:45:37,570 We'll start with the same contents as hello, for now. 961 00:45:37,570 --> 00:45:40,870 And all right, what is our application going to do? 962 00:45:40,870 --> 00:45:44,590 We don't need a hello component anymore. 963 00:45:44,590 --> 00:45:50,150 We'll change the title of hello to addition, for example. 964 00:45:50,150 --> 00:45:52,934 And let's go ahead and create this application. 965 00:45:52,934 --> 00:45:56,480 966 00:45:56,480 --> 00:46:00,620 We'll add a constructor. 967 00:46:00,620 --> 00:46:03,719 And so, let me show you for a moment what the final game should look like. 968 00:46:03,719 --> 00:46:05,510 And then we can think about, OK, what state 969 00:46:05,510 --> 00:46:07,910 do we need to keep track of in order to make this work? 970 00:46:07,910 --> 00:46:10,280 And so let me go into-- 971 00:46:10,280 --> 00:46:17,470 972 00:46:17,470 --> 00:46:20,660 All right, this is what this game ultimately is going to look like. 973 00:46:20,660 --> 00:46:22,520 It's going to show us an addition problem. 974 00:46:22,520 --> 00:46:23,720 You type in the answer. 975 00:46:23,720 --> 00:46:25,820 You get it right, the score increases. 976 00:46:25,820 --> 00:46:32,880 You get it wrong, and the score stays the same. 977 00:46:32,880 --> 00:46:35,810 So I get it right, and I keep adding to my score. 978 00:46:35,810 --> 00:46:40,821 And I get it wrong, and the score doesn't change. 979 00:46:40,821 --> 00:46:41,320 All right. 980 00:46:41,320 --> 00:46:45,620 So given that-- that's the way we want the application to behave-- 981 00:46:45,620 --> 00:46:47,860 what needs to be in the state of this application? 982 00:46:47,860 --> 00:46:49,901 What are the things I need to keep track of here? 983 00:46:49,901 --> 00:46:53,370 984 00:46:53,370 --> 00:46:56,787 What changes about this application is one way to think about this. 985 00:46:56,787 --> 00:46:57,870 There are multiple things. 986 00:46:57,870 --> 00:46:58,370 Yeah? 987 00:46:58,370 --> 00:47:01,339 AUDIENCE: [INAUDIBLE] 988 00:47:01,339 --> 00:47:03,130 SPEAKER 1: The question that's being shown. 989 00:47:03,130 --> 00:47:03,230 Sure. 990 00:47:03,230 --> 00:47:05,640 And the question that's being shown has two parts. 991 00:47:05,640 --> 00:47:08,920 It has num1, which is just going to be some number. 992 00:47:08,920 --> 00:47:10,310 We'll maybe start it with 1. 993 00:47:10,310 --> 00:47:13,340 And it has num2, a second number that's also-- we'll start it off 994 00:47:13,340 --> 00:47:15,050 as 1, though these are going to change. 995 00:47:15,050 --> 00:47:15,680 So great. 996 00:47:15,680 --> 00:47:17,430 The numbers that are shown on the screen-- 997 00:47:17,430 --> 00:47:19,550 this plus that-- those are parts of the state, 998 00:47:19,550 --> 00:47:22,639 because we might want to change that part of the state. 999 00:47:22,639 --> 00:47:24,763 What else is part of the state of this application? 1000 00:47:24,763 --> 00:47:28,750 1001 00:47:28,750 --> 00:47:29,250 Yeah? 1002 00:47:29,250 --> 00:47:30,390 AUDIENCE: The score? 1003 00:47:30,390 --> 00:47:31,170 SPEAKER 1: The current score. 1004 00:47:31,170 --> 00:47:31,440 Great. 1005 00:47:31,440 --> 00:47:32,880 The score is part of the state. 1006 00:47:32,880 --> 00:47:35,269 And that's just going to be 0 for now. 1007 00:47:35,269 --> 00:47:36,560 Anything else you can think of? 1008 00:47:36,560 --> 00:47:37,059 Yeah? 1009 00:47:37,059 --> 00:47:37,970 AUDIENCE: The answer. 1010 00:47:37,970 --> 00:47:39,136 SPEAKER 1: Yeah, the answer. 1011 00:47:39,136 --> 00:47:43,220 The thing that I'm currently typing in the input field-- in the response 1012 00:47:43,220 --> 00:47:43,730 field. 1013 00:47:43,730 --> 00:47:46,280 That's also going to be part of the state as well. 1014 00:47:46,280 --> 00:47:48,560 So I'll go ahead and add response, and just 1015 00:47:48,560 --> 00:47:50,060 set that equal to the empty string. 1016 00:47:50,060 --> 00:47:52,570 Because initially, I haven't typed in anything at all. 1017 00:47:52,570 --> 00:47:53,070 So great. 1018 00:47:53,070 --> 00:47:56,030 Here are some basic components that are going to make up 1019 00:47:56,030 --> 00:47:57,860 the state of this application. 1020 00:47:57,860 --> 00:48:02,810 And let's go ahead and render this application. 1021 00:48:02,810 --> 00:48:04,310 We're going to render a div. 1022 00:48:04,310 --> 00:48:09,800 And maybe in an h1, just for now, we'll go ahead and have the addition problem 1023 00:48:09,800 --> 00:48:10,530 here. 1024 00:48:10,530 --> 00:48:15,360 this.state.num1 plus this.state.num2. 1025 00:48:15,360 --> 00:48:18,670 That's going to be the question that I'm ultimately going to ask. 1026 00:48:18,670 --> 00:48:22,090 It's just this plus that. 1027 00:48:22,090 --> 00:48:25,250 If I open up addition.html-- 1028 00:48:25,250 --> 00:48:26,830 all right, great. 1029 00:48:26,830 --> 00:48:30,250 I see an addition problem where I'm drawing the numbers from the state. 1030 00:48:30,250 --> 00:48:32,560 later if I change the state and change those numbers, 1031 00:48:32,560 --> 00:48:35,030 this page will change automatically. 1032 00:48:35,030 --> 00:48:41,520 And now in addition to that, I'm also going to need an input field-- 1033 00:48:41,520 --> 00:48:47,780 an input field whose value is going to be this.state.response, 1034 00:48:47,780 --> 00:48:50,540 in other words, whatever the user has currently typed in. 1035 00:48:50,540 --> 00:48:55,335 1036 00:48:55,335 --> 00:48:56,210 Questions about that? 1037 00:48:56,210 --> 00:49:01,010 1038 00:49:01,010 --> 00:49:03,650 All right, so now I have a place where I can ask a question, 1039 00:49:03,650 --> 00:49:05,300 and a place where I can type an answer. 1040 00:49:05,300 --> 00:49:08,000 And now, if I actually try and type an answer, something sort of strange 1041 00:49:08,000 --> 00:49:08,420 happens. 1042 00:49:08,420 --> 00:49:10,970 But it will make sense if you think about what's actually happening 1043 00:49:10,970 --> 00:49:12,345 in my code and what I've written. 1044 00:49:12,345 --> 00:49:15,280 If I try and press 2, for example, to answer 2-- 1045 00:49:15,280 --> 00:49:18,851 I press 2, but OK, nothing showed up in the text field. 1046 00:49:18,851 --> 00:49:21,350 I can keep pressing whatever keys I want to on the keyboard, 1047 00:49:21,350 --> 00:49:23,141 and nothing's showing up in the text field. 1048 00:49:23,141 --> 00:49:24,890 It's highlighted, my cursor is there. 1049 00:49:24,890 --> 00:49:29,690 So why is nothing changing in the text field? 1050 00:49:29,690 --> 00:49:30,470 Any thoughts? 1051 00:49:30,470 --> 00:49:30,970 Yeah? 1052 00:49:30,970 --> 00:49:33,689 AUDIENCE: [INAUDIBLE] 1053 00:49:33,689 --> 00:49:34,730 SPEAKER 1: Yeah, exactly. 1054 00:49:34,730 --> 00:49:38,120 Response inside of my state is set to the empty string. 1055 00:49:38,120 --> 00:49:41,300 And this input field right now, I'm saying its value 1056 00:49:41,300 --> 00:49:43,010 is this.state.response. 1057 00:49:43,010 --> 00:49:45,899 And this.state.response is never changing. 1058 00:49:45,899 --> 00:49:48,440 And so what's in the input field is always going to be empty. 1059 00:49:48,440 --> 00:49:50,314 It's never going to have anything else there. 1060 00:49:50,314 --> 00:49:54,200 So what I need to do is actually add some code to say, 1061 00:49:54,200 --> 00:49:59,970 what should happen when I actually change the value of the input field? 1062 00:49:59,970 --> 00:50:03,650 So the input field has a property called "onChange". 1063 00:50:03,650 --> 00:50:07,130 And I'm going to say, when you change the input field, let's call a function. 1064 00:50:07,130 --> 00:50:10,220 And I'm just going to call it "updateResponse". 1065 00:50:10,220 --> 00:50:13,820 So this.updateResponse is going to be a function that's 1066 00:50:13,820 --> 00:50:18,030 going to handle when I type something into the input field. 1067 00:50:18,030 --> 00:50:20,320 OK, so here is updateResponse. 1068 00:50:20,320 --> 00:50:22,150 It's going to be a function. 1069 00:50:22,150 --> 00:50:26,110 That function-- all functions that are event handlers 1070 00:50:26,110 --> 00:50:27,850 can take as argument their event. 1071 00:50:27,850 --> 00:50:30,700 And we're going to need this in just a moment, and you''ll see why. 1072 00:50:30,700 --> 00:50:33,850 Because what I want to do is, I want to update the state-- 1073 00:50:33,850 --> 00:50:41,740 this.setState-- and I want to set the response to event.target.value. 1074 00:50:41,740 --> 00:50:43,990 And event.target.value is nothing specific to React. 1075 00:50:43,990 --> 00:50:46,480 It's just JavaScript for saying, here's the event-- 1076 00:50:46,480 --> 00:50:48,730 the event of changing the input field. 1077 00:50:48,730 --> 00:50:53,034 The event's target is what triggered the event-- the input field, in particular. 1078 00:50:53,034 --> 00:50:55,450 And what is the current value of the input field, meaning, 1079 00:50:55,450 --> 00:50:57,820 what it is that I've typed into the input field. 1080 00:50:57,820 --> 00:51:02,060 I'm going to update the response to be that. 1081 00:51:02,060 --> 00:51:03,230 So what have I done here? 1082 00:51:03,230 --> 00:51:05,860 I've said on this input field, whenever it changes, 1083 00:51:05,860 --> 00:51:08,030 call the updateResponse function. 1084 00:51:08,030 --> 00:51:11,420 And the updateResponse function is going to set the state of my application, 1085 00:51:11,420 --> 00:51:16,010 updating the current value of a response. 1086 00:51:16,010 --> 00:51:19,180 And so, if I press Refresh now, now I can actually type numbers in here. 1087 00:51:19,180 --> 00:51:22,420 I can add 2, 3, whatever number I want. 1088 00:51:22,420 --> 00:51:26,320 If I scroll back here, you can actually see what I'm doing here. 1089 00:51:26,320 --> 00:51:32,190 If I say, current guess is, and then let me fill in this.state.response-- 1090 00:51:32,190 --> 00:51:36,910 just plug in whatever this.state.response is right now. 1091 00:51:36,910 --> 00:51:40,660 If I refresh the page, and I start typing 2-- 1092 00:51:40,660 --> 00:51:41,470 current guess is 2. 1093 00:51:41,470 --> 00:51:42,610 8, current guess is 28. 1094 00:51:42,610 --> 00:51:43,990 2, current guess is 2. 1095 00:51:43,990 --> 00:51:45,490 Empty, the [INAUDIBLE] goes empty. 1096 00:51:45,490 --> 00:51:48,040 The page is changing in response to the state 1097 00:51:48,040 --> 00:51:50,650 without me needing to go in and actually modify things, 1098 00:51:50,650 --> 00:51:56,260 because I have pulling from this.state inside of the render function. 1099 00:51:56,260 --> 00:51:56,901 Yeah? 1100 00:51:56,901 --> 00:52:00,749 AUDIENCE: Does the order of the functions matter in the same way? 1101 00:52:00,749 --> 00:52:04,597 Is it fine to have updateResponse after Render or is it fine to 1102 00:52:04,597 --> 00:52:05,724 have it before as well? 1103 00:52:05,724 --> 00:52:07,890 SPEAKER 1: The order of the functions doesn't really 1104 00:52:07,890 --> 00:52:10,701 matter-- updateResponse could be higher up, if I wanted it to be. 1105 00:52:10,701 --> 00:52:13,489 AUDIENCE: [INAUDIBLE] 1106 00:52:13,489 --> 00:52:15,280 SPEAKER 1: Yeah, when you define the class, 1107 00:52:15,280 --> 00:52:16,988 it's going to go through all the methods. 1108 00:52:16,988 --> 00:52:18,440 So it knows what methods it has. 1109 00:52:18,440 --> 00:52:20,970 And so it doesn't really matter what order they're in. 1110 00:52:20,970 --> 00:52:21,470 Yep? 1111 00:52:21,470 --> 00:52:27,790 AUDIENCE: How does the updateResponse know that event is [INAUDIBLE]?? 1112 00:52:27,790 --> 00:52:31,120 SPEAKER 1: I specify it here, that the input's onChange attribute 1113 00:52:31,120 --> 00:52:32,929 is this.updateResponse. 1114 00:52:32,929 --> 00:52:34,720 So when the input field changes, it's going 1115 00:52:34,720 --> 00:52:37,000 to call the updateResponse function. 1116 00:52:37,000 --> 00:52:40,871 And the event that did that calling is the input field's change event. 1117 00:52:40,871 --> 00:52:43,120 And so it has access to the input field and can access 1118 00:52:43,120 --> 00:52:45,100 the current value of the input field. 1119 00:52:45,100 --> 00:52:48,690 1120 00:52:48,690 --> 00:52:51,670 Other things so far? 1121 00:52:51,670 --> 00:52:54,340 All right, let me also, instead of showing the current score, 1122 00:52:54,340 --> 00:52:57,610 let me go ahead and have a div where I'm going to-- 1123 00:52:57,610 --> 00:52:59,260 let me actually show the current score. 1124 00:52:59,260 --> 00:53:04,000 I'll say Score: this.state.score to say, all right, let's plug in the score 1125 00:53:04,000 --> 00:53:06,890 into this section of the page. 1126 00:53:06,890 --> 00:53:11,230 So now, OK, 1 plus 1-- a place to input the answer, and a score that's 1127 00:53:11,230 --> 00:53:13,360 currently 0, 1128 00:53:13,360 --> 00:53:16,540 What I'd like to do now is, when I type in a number and press Return, 1129 00:53:16,540 --> 00:53:19,990 for example, that's going to trigger submitting 1130 00:53:19,990 --> 00:53:23,310 my response as a potential answer. 1131 00:53:23,310 --> 00:53:25,130 And so, the input field-- 1132 00:53:25,130 --> 00:53:31,100 there is no attribute of the input field that's like, when you press Return. 1133 00:53:31,100 --> 00:53:33,260 But there is onKeyPress-- 1134 00:53:33,260 --> 00:53:34,165 like, press any key. 1135 00:53:34,165 --> 00:53:35,790 And so we're going to need to use that. 1136 00:53:35,790 --> 00:53:38,840 We're going to need to say, whenever a key is pressed, let's go ahead 1137 00:53:38,840 --> 00:53:40,250 and call a function. 1138 00:53:40,250 --> 00:53:42,950 We'll call it this.inputKeyPress. 1139 00:53:42,950 --> 00:53:45,590 But again, it could be called anything we want to. 1140 00:53:45,590 --> 00:53:54,490 And lets, inside of the inputKeyPress function, we'll take the event. 1141 00:53:54,490 --> 00:53:58,060 If I want to get what the key is that's actually pressed, 1142 00:53:58,060 --> 00:54:01,930 that's as simple as saying, event.key. 1143 00:54:01,930 --> 00:54:07,990 And so, if event.key is equal to enter, and JavaScript is a slight difference 1144 00:54:07,990 --> 00:54:10,780 between what double equal sign is and what triple equal sign is-- 1145 00:54:10,780 --> 00:54:12,850 triple equal sign is going to do strict equality, 1146 00:54:12,850 --> 00:54:15,760 making sure things really match including the types of things. 1147 00:54:15,760 --> 00:54:20,150 And so, in general, it's safest to use triple equal side, if you can. 1148 00:54:20,150 --> 00:54:22,770 So I'm saying, if the key that I press is Enter, 1149 00:54:22,770 --> 00:54:25,140 then I want to go ahead and do something. 1150 00:54:25,140 --> 00:54:28,730 And so, one thing I could do is-- 1151 00:54:28,730 --> 00:54:30,200 well, let me pose the question. 1152 00:54:30,200 --> 00:54:31,250 What do I want to do now? 1153 00:54:31,250 --> 00:54:33,250 Now that I've pressed Enter, and now I'm running 1154 00:54:33,250 --> 00:54:37,550 code that will run when I press Enter after typing in a potential number. 1155 00:54:37,550 --> 00:54:42,499 1156 00:54:42,499 --> 00:54:43,290 What should happen? 1157 00:54:43,290 --> 00:54:43,970 Check what? 1158 00:54:43,970 --> 00:54:45,300 AUDIENCE: Check if the answer is right. 1159 00:54:45,300 --> 00:54:46,510 SPEAKER 1: Check if the answer is right. 1160 00:54:46,510 --> 00:54:46,710 Great. 1161 00:54:46,710 --> 00:54:48,510 So I want to check if the answer is right. 1162 00:54:48,510 --> 00:54:49,950 And so, what is the answer? 1163 00:54:49,950 --> 00:54:51,390 What is the answer? 1164 00:54:51,390 --> 00:54:55,350 Well the answer is stored inside of this.state.response. 1165 00:54:55,350 --> 00:54:58,710 That is what it is that the user has typed in. 1166 00:54:58,710 --> 00:55:01,420 But of course, what the user is typed in is a string. 1167 00:55:01,420 --> 00:55:04,650 And so in order to turn it into an integer, in Python, 1168 00:55:04,650 --> 00:55:06,510 we just used a function called int. 1169 00:55:06,510 --> 00:55:09,600 In JavaScript, that happens to be called parseInt-- 1170 00:55:09,600 --> 00:55:12,420 to say, take the string, parse it as an integer, 1171 00:55:12,420 --> 00:55:15,730 and save it inside of this variable called response. 1172 00:55:15,730 --> 00:55:21,690 And so now, what is the code for checking if I got the answer right? 1173 00:55:21,690 --> 00:55:24,830 What does that look like? 1174 00:55:24,830 --> 00:55:27,910 How do I know I got this addition problem right? 1175 00:55:27,910 --> 00:55:28,410 Yeah? 1176 00:55:28,410 --> 00:55:30,378 AUDIENCE: If answer equals [INAUDIBLE]. 1177 00:55:30,378 --> 00:55:35,172 1178 00:55:35,172 --> 00:55:35,880 SPEAKER 1: Great. 1179 00:55:35,880 --> 00:55:39,210 I've gotten num1 and num2 here stored inside of the state. 1180 00:55:39,210 --> 00:55:41,730 So to check if I got the answer correct, I'm going to say, 1181 00:55:41,730 --> 00:55:48,156 if answer is equal to this.state.num1 plus this.state.num2. 1182 00:55:48,156 --> 00:55:51,900 I'm going to do something if the answer is right, 1183 00:55:51,900 --> 00:55:58,110 else I need to do something if the answer is wrong. 1184 00:55:58,110 --> 00:55:59,407 Questions about this much? 1185 00:55:59,407 --> 00:56:02,490 I've now verified whether the answer is right or wrong based on the state. 1186 00:56:02,490 --> 00:56:02,989 Yeah? 1187 00:56:02,989 --> 00:56:06,240 AUDIENCE: Does the program know that the values are numeric? 1188 00:56:06,240 --> 00:56:08,781 SPEAKER 1: Does the program know that the values are numeric? 1189 00:56:08,781 --> 00:56:13,590 No, it's possible that parseInt is going to get something that's not numeric. 1190 00:56:13,590 --> 00:56:16,350 And that's why we have to try and parse it first into an integer. 1191 00:56:16,350 --> 00:56:20,010 num1 and num2 are definitely going to be integer numbers. 1192 00:56:20,010 --> 00:56:24,390 Because we've said in this.state that they are, in fact, integers. 1193 00:56:24,390 --> 00:56:26,693 But the response, you're right, is a string. 1194 00:56:26,693 --> 00:56:29,850 1195 00:56:29,850 --> 00:56:30,390 All right. 1196 00:56:30,390 --> 00:56:37,560 So if the answer is right, we want to change the state. 1197 00:56:37,560 --> 00:56:40,310 And how would we want to change the state? 1198 00:56:40,310 --> 00:56:42,780 I'll go ahead and say state arrow, so that we can base it 1199 00:56:42,780 --> 00:56:44,400 off the previous state if we need to. 1200 00:56:44,400 --> 00:56:49,082 But what about the state needs to change if I got the answer correct? 1201 00:56:49,082 --> 00:56:50,790 Just in English, not necessarily in code. 1202 00:56:50,790 --> 00:56:53,411 1203 00:56:53,411 --> 00:56:53,910 Yeah? 1204 00:56:53,910 --> 00:56:55,445 AUDIENCE: The score [INAUDIBLE]. 1205 00:56:55,445 --> 00:56:56,320 SPEAKER 1: The score. 1206 00:56:56,320 --> 00:56:56,560 Great. 1207 00:56:56,560 --> 00:56:57,768 So the score needs to change. 1208 00:56:57,768 --> 00:57:01,412 The score needs to become state.score plus one. 1209 00:57:01,412 --> 00:57:02,870 And the numbers need to change too. 1210 00:57:02,870 --> 00:57:04,390 I want to change what number one or number two 1211 00:57:04,390 --> 00:57:06,250 are so I can show a different question. 1212 00:57:06,250 --> 00:57:09,297 So num1 is going to be a new number. 1213 00:57:09,297 --> 00:57:11,380 And let me just go ahead and pick a random number. 1214 00:57:11,380 --> 00:57:14,710 And so, a common way that you'll see of generating random numbers-- 1215 00:57:14,710 --> 00:57:19,444 most languages have a way of generating a random number between 0 and 1. 1216 00:57:19,444 --> 00:57:21,610 And in Python, the way to generate a random number-- 1217 00:57:21,610 --> 00:57:24,820 or in JavaScript, to do that it's math.random. 1218 00:57:24,820 --> 00:57:28,420 That's going to generate a random number between 0 and 1. 1219 00:57:28,420 --> 00:57:31,540 If I multiply that by 10, that's going to generate 1220 00:57:31,540 --> 00:57:37,330 for me a random number between 0 and 10, non-inclusive on the upper bound 1221 00:57:37,330 --> 00:57:39,170 at least. 1222 00:57:39,170 --> 00:57:42,500 And so, if I want to generate-- take a potential floating point number, 1223 00:57:42,500 --> 00:57:43,610 like 2.8-- 1224 00:57:43,610 --> 00:57:47,060 a decimal number between 0 and 10-- and convert it into an integer, 1225 00:57:47,060 --> 00:57:49,880 I'll either need to take the floor of that or the ceiling of that. 1226 00:57:49,880 --> 00:57:53,160 I'll go ahead and take the ceiling of that 1227 00:57:53,160 --> 00:57:58,070 in order to, say, if it was p make it 3, for example. 1228 00:57:58,070 --> 00:58:02,190 And so what I get by doing this is I get a random number between 1 and 10. 1229 00:58:02,190 --> 00:58:04,200 By taking a random number, multiplying it by 10, 1230 00:58:04,200 --> 00:58:05,533 and taking the ceiling of that-- 1231 00:58:05,533 --> 00:58:07,380 that's a math trick you'll often see, where 1232 00:58:07,380 --> 00:58:09,630 you can generate a random number between 0 and 1, 1233 00:58:09,630 --> 00:58:12,870 and turn it into a random number in any range that you want to. 1234 00:58:12,870 --> 00:58:15,660 So this code is basically just saying, let num1 1235 00:58:15,660 --> 00:58:18,510 be some random number between 1 and 10. 1236 00:58:18,510 --> 00:58:20,610 And I'll go ahead and do the same thing for num2. 1237 00:58:20,610 --> 00:58:23,580 num2 is also just going to be some random number 1238 00:58:23,580 --> 00:58:26,790 in the range from 1 to 10. 1239 00:58:26,790 --> 00:58:30,994 Is there anything else about the state that needs to change? 1240 00:58:30,994 --> 00:58:34,870 1241 00:58:34,870 --> 00:58:35,370 Yeah? 1242 00:58:35,370 --> 00:58:37,594 AUDIENCE: You need to clear the response. 1243 00:58:37,594 --> 00:58:39,510 SPEAKER 1: Yeah, I need to clear the response. 1244 00:58:39,510 --> 00:58:40,890 And let's see what happens if I don't do that. 1245 00:58:40,890 --> 00:58:43,110 And then we'll actually go back and do it. 1246 00:58:43,110 --> 00:58:45,070 I'll go ahead and open up addition.html. 1247 00:58:45,070 --> 00:58:46,605 Here's the problem-- 1 plus 1. 1248 00:58:46,605 --> 00:58:47,860 I get the correct answer. 1249 00:58:47,860 --> 00:58:50,810 I'll type in 2, and press Return. 1250 00:58:50,810 --> 00:58:52,250 The problem changed. 1251 00:58:52,250 --> 00:58:53,810 My score increased. 1252 00:58:53,810 --> 00:58:56,540 But the two inside the input field are still there. 1253 00:58:56,540 --> 00:58:59,600 I'd ideally like to just clear it out when you get the question correct, 1254 00:58:59,600 --> 00:59:01,830 so that I can try typing in something else. 1255 00:59:01,830 --> 00:59:04,910 So in addition to updating the score, num1 and num2, 1256 00:59:04,910 --> 00:59:09,050 I'm also going to say a response is equal to the empty string-- 1257 00:59:09,050 --> 00:59:14,570 clear out the response so that I can type something new in in this position. 1258 00:59:14,570 --> 00:59:15,890 So I'll refresh this page-- 1259 00:59:15,890 --> 00:59:19,270 1 plus 1-- I type in a number, 2. 1260 00:59:19,270 --> 00:59:20,540 I get the question correct. 1261 00:59:20,540 --> 00:59:21,410 The score increases. 1262 00:59:21,410 --> 00:59:22,490 I get a new question. 1263 00:59:22,490 --> 00:59:26,480 I answer the question correctly, I get a new question and the score increases. 1264 00:59:26,480 --> 00:59:29,120 What should happen if I get a question wrong-- 1265 00:59:29,120 --> 00:59:30,350 answer incorrectly? 1266 00:59:30,350 --> 00:59:32,199 Right now, nothing's happening. 1267 00:59:32,199 --> 00:59:32,990 What should happen? 1268 00:59:32,990 --> 00:59:35,659 1269 00:59:35,659 --> 00:59:37,200 What about the state needs to change? 1270 00:59:37,200 --> 00:59:40,860 1271 00:59:40,860 --> 00:59:41,405 Yeah? 1272 00:59:41,405 --> 00:59:47,942 AUDIENCE: The [INAUDIBLE] the score did not change [INAUDIBLE].. 1273 00:59:47,942 --> 00:59:56,494 1274 00:59:56,494 --> 00:59:57,160 SPEAKER 1: Sure. 1275 00:59:57,160 --> 01:00:00,242 Let's at least clear out the response, so that we can say, you know what? 1276 01:00:00,242 --> 01:00:02,700 If you get the question wrong, let's clear out the response 1277 01:00:02,700 --> 01:00:05,180 so that you can try again. 1278 01:00:05,180 --> 01:00:07,880 So now, if I have a question and I happen to get it wrong, 1279 01:00:07,880 --> 01:00:09,920 I type the incorrect answer. 1280 01:00:09,920 --> 01:00:11,030 The problems don't change. 1281 01:00:11,030 --> 01:00:12,217 The score doesn't change. 1282 01:00:12,217 --> 01:00:14,300 But at least the input field is now cleared out so 1283 01:00:14,300 --> 01:00:16,400 that I can actually type in something new again. 1284 01:00:16,400 --> 01:00:19,530 1285 01:00:19,530 --> 01:00:21,595 Questions about what we've done here so far? 1286 01:00:21,595 --> 01:00:23,970 Hopefully now you're starting to see the power that React 1287 01:00:23,970 --> 01:00:26,152 is going to give you in building user interfaces-- 1288 01:00:26,152 --> 01:00:28,110 that we're able to update the score, that we're 1289 01:00:28,110 --> 01:00:31,890 able to have the problems change all without me having to say, 1290 01:00:31,890 --> 01:00:34,400 go into the DOM and actually change what's at these values-- 1291 01:00:34,400 --> 01:00:36,630 no query selectors to try and grab things. 1292 01:00:36,630 --> 01:00:38,664 I just changed the state of the application, 1293 01:00:38,664 --> 01:00:40,830 the parts of the component that are going to change, 1294 01:00:40,830 --> 01:00:43,680 and the web page is going to update on its own via React 1295 01:00:43,680 --> 01:00:46,780 in order to reflect what it is that I want the page to look like. 1296 01:00:46,780 --> 01:00:47,280 Yeah? 1297 01:00:47,280 --> 01:00:50,770 AUDIENCE: If you want to save the state in a simple database 1298 01:00:50,770 --> 01:00:54,690 or save it so it's constant for the next user, is there an easy way 1299 01:00:54,690 --> 01:00:56,480 to do that with React? 1300 01:00:56,480 --> 01:00:58,980 SPEAKER 1: So if you wanted to save the state somewhere-- it 1301 01:00:58,980 --> 01:01:00,290 depends on where you want to save it. 1302 01:01:00,290 --> 01:01:01,890 So, if you want to save it on the client side 1303 01:01:01,890 --> 01:01:03,240 so that the next time you open up the page 1304 01:01:03,240 --> 01:01:05,560 it's still there, that you can use local storage for. 1305 01:01:05,560 --> 01:01:07,980 And we'll probably take a look at an example of that tomorrow. 1306 01:01:07,980 --> 01:01:09,450 If you want to save it on the server, then you're 1307 01:01:09,450 --> 01:01:11,940 going to need to send the data off to the server somehow. 1308 01:01:11,940 --> 01:01:14,880 And you can do that using an Ajax request like we 1309 01:01:14,880 --> 01:01:17,190 were talking about a couple of days ago, just to say, 1310 01:01:17,190 --> 01:01:20,224 send this data off to the server so that you can store it somewhere. 1311 01:01:20,224 --> 01:01:21,390 But yeah, you could do that. 1312 01:01:21,390 --> 01:01:24,650 1313 01:01:24,650 --> 01:01:25,260 Other things? 1314 01:01:25,260 --> 01:01:28,220 1315 01:01:28,220 --> 01:01:28,720 Yeah? 1316 01:01:28,720 --> 01:01:31,912 AUDIENCE: What happens now if you enter something other than a number? 1317 01:01:31,912 --> 01:01:34,120 SPEAKER 1: If I enter something other than a number-- 1318 01:01:34,120 --> 01:01:34,240 So. 1319 01:01:34,240 --> 01:01:36,520 I type in "hi", for example, and press Return-- 1320 01:01:36,520 --> 01:01:38,140 it's going to count that is incorrect. 1321 01:01:38,140 --> 01:01:39,760 Why does it count that is incorrect? 1322 01:01:39,760 --> 01:01:45,310 It's because, if I take parseInt and pass in a string like "hi", 1323 01:01:45,310 --> 01:01:49,340 what I get is a special JavaScript value called NAN, or not a number. 1324 01:01:49,340 --> 01:01:51,550 And NAN-- what I'm really going to be doing 1325 01:01:51,550 --> 01:01:56,921 is comparing whether that value is equal to, like, 1 plus 1, for example. 1326 01:01:56,921 --> 01:01:58,420 And that's always going to be false. 1327 01:01:58,420 --> 01:02:01,030 Because not a number is not going to be equal to any number. 1328 01:02:01,030 --> 01:02:03,430 And so, the if condition and the logic here 1329 01:02:03,430 --> 01:02:06,940 is going to handle dealing with non-numeric inputs for me. 1330 01:02:06,940 --> 01:02:10,100 Because answer is just never going to be equal to that sum 1331 01:02:10,100 --> 01:02:12,210 if answer is not a number. 1332 01:02:12,210 --> 01:02:12,970 But yeah. 1333 01:02:12,970 --> 01:02:13,600 Good question. 1334 01:02:13,600 --> 01:02:15,174 And good corner case to consider. 1335 01:02:15,174 --> 01:02:15,674 Yeah? 1336 01:02:15,674 --> 01:02:22,010 1337 01:02:22,010 --> 01:02:25,130 Oh I-- so yeah, if you look at the example online, 1338 01:02:25,130 --> 01:02:27,740 I add the square to num1 and num2. 1339 01:02:27,740 --> 01:02:30,074 That's to, if you wanted to update the game a little bit 1340 01:02:30,074 --> 01:02:33,198 to make it a little more difficult, such that every time you get a question 1341 01:02:33,198 --> 01:02:34,460 right the numbers get bigger-- 1342 01:02:34,460 --> 01:02:36,260 if you take the score and add it to the numbers, 1343 01:02:36,260 --> 01:02:38,593 then you'll end up getting more difficult math questions 1344 01:02:38,593 --> 01:02:39,910 as the score gets higher. 1345 01:02:39,910 --> 01:02:41,510 But yeah, no need to do that. 1346 01:02:41,510 --> 01:02:42,147 Yep? 1347 01:02:42,147 --> 01:02:46,587 AUDIENCE: [INAUDIBLE] 1348 01:02:46,587 --> 01:02:48,045 SPEAKER 1: If you put in a single-- 1349 01:02:48,045 --> 01:02:51,326 AUDIENCE: Character in response. 1350 01:02:51,326 --> 01:02:52,700 SPEAKER 1: Oh, just the letter A? 1351 01:02:52,700 --> 01:02:53,700 AUDIENCE: Yeah. 1352 01:02:53,700 --> 01:02:56,430 SPEAKER 1: No, that's still not going to be a number. 1353 01:02:56,430 --> 01:02:59,635 Because-- yeah, it's going to try and take the literal string 1354 01:02:59,635 --> 01:03:00,760 and treat it like a number. 1355 01:03:00,760 --> 01:03:03,630 And the character A, even though it has an Ascii value that 1356 01:03:03,630 --> 01:03:06,060 is a numeric value, the character itself is not 1357 01:03:06,060 --> 01:03:08,660 what we would generally consider to be a number. 1358 01:03:08,660 --> 01:03:11,480 1359 01:03:11,480 --> 01:03:13,854 Other questions? 1360 01:03:13,854 --> 01:03:16,520 All right, so let's try and do something a little bit different. 1361 01:03:16,520 --> 01:03:20,080 Let's try and now say, when you reach a certain score, 1362 01:03:20,080 --> 01:03:22,390 I would like to display some different methods. 1363 01:03:22,390 --> 01:03:24,670 Like, when I get to a score of 5, for example, let's 1364 01:03:24,670 --> 01:03:26,860 say, OK, you won the game. 1365 01:03:26,860 --> 01:03:29,150 So how might I go about doing that? 1366 01:03:29,150 --> 01:03:31,900 Well I don't actually need to add anything else to the state. 1367 01:03:31,900 --> 01:03:34,390 All I need to do here is to say-- 1368 01:03:34,390 --> 01:03:36,250 all right, this render function-- 1369 01:03:36,250 --> 01:03:39,700 instead of having it render the entire game, 1370 01:03:39,700 --> 01:03:43,540 let me just rename this function to renderProblem 1371 01:03:43,540 --> 01:03:47,290 for rendering a particular problem that I want to answer. 1372 01:03:47,290 --> 01:03:51,370 And let me go ahead and add another function called renderWin, 1373 01:03:51,370 --> 01:03:55,000 for example, that returns a div that-- 1374 01:03:55,000 --> 01:03:57,220 we'll return it to h1. 1375 01:03:57,220 --> 01:03:58,630 "Congratulations, you win!" 1376 01:03:58,630 --> 01:04:01,760 1377 01:04:01,760 --> 01:04:05,720 So now I have two different functions-- renderProblem and renderWin. 1378 01:04:05,720 --> 01:04:09,330 And now in my actual render function, I can add logic to this. 1379 01:04:09,330 --> 01:04:11,690 Render doesn't just need to return something-- 1380 01:04:11,690 --> 01:04:13,400 I can add any JavaScript logic I want. 1381 01:04:13,400 --> 01:04:18,140 I can say, if this.state.score is at least 5, 1382 01:04:18,140 --> 01:04:22,080 then go ahead and return renderWin. 1383 01:04:22,080 --> 01:04:28,170 Otherwise, if the score is not at least 5, let me return renderProblem. 1384 01:04:28,170 --> 01:04:30,510 So I've added some logic to the render function 1385 01:04:30,510 --> 01:04:31,860 known as conditional rendering. 1386 01:04:31,860 --> 01:04:35,310 Depending upon the value of the state, I can render different things 1387 01:04:35,310 --> 01:04:36,209 on the page. 1388 01:04:36,209 --> 01:04:37,500 And so what's that going to do? 1389 01:04:37,500 --> 01:04:39,840 By adding this simple logic, now-- 1390 01:04:39,840 --> 01:04:41,310 Uh-oh, something's wrong. 1391 01:04:41,310 --> 01:04:43,000 "renderProblem is not defined". 1392 01:04:43,000 --> 01:04:43,980 Oh. 1393 01:04:43,980 --> 01:04:47,580 this.renderWin and this.renderProblem-- because they're 1394 01:04:47,580 --> 01:04:51,990 both methods inside of this component. 1395 01:04:51,990 --> 01:04:53,250 Refresh the page. 1396 01:04:53,250 --> 01:04:54,340 We get 1 plus 1. 1397 01:04:54,340 --> 01:04:55,710 And so the question correctly. 1398 01:04:55,710 --> 01:04:56,959 Answer the question correctly. 1399 01:04:56,959 --> 01:04:57,750 Correct, correct. 1400 01:04:57,750 --> 01:05:00,720 And when I get the 5th question correct, now suddenly 1401 01:05:00,720 --> 01:05:02,850 my score is going to be at least 5. 1402 01:05:02,850 --> 01:05:03,980 And the interface changes. 1403 01:05:03,980 --> 01:05:06,960 Nothing congratulations you win because we've 1404 01:05:06,960 --> 01:05:10,770 reached a different branching point in this conditional. 1405 01:05:10,770 --> 01:05:13,500 You get the question correct, and as a result, 1406 01:05:13,500 --> 01:05:18,680 we get a different output that gets displayed to the screen. 1407 01:05:18,680 --> 01:05:19,180 Yeah? 1408 01:05:19,180 --> 01:05:23,931 AUDIENCE: If you reload the page is that going to [INAUDIBLE]?? 1409 01:05:23,931 --> 01:05:26,430 SPEAKER 1: As soon as you reload the page, in this instance, 1410 01:05:26,430 --> 01:05:27,800 we get reset back to the original state. 1411 01:05:27,800 --> 01:05:30,710 Because we're reloading the whole page, it's running the JavaScript again. 1412 01:05:30,710 --> 01:05:32,669 It's going to reconstruct all of my components, 1413 01:05:32,669 --> 01:05:35,751 and it's going to reset the state back to the original value of the state. 1414 01:05:35,751 --> 01:05:37,490 And so, as someone was mentioning before, 1415 01:05:37,490 --> 01:05:39,350 you could save the state in local storage-- 1416 01:05:39,350 --> 01:05:41,516 and we'll probably see an example of that tomorrow-- 1417 01:05:41,516 --> 01:05:44,058 if you wanted to retrieve it back later afterwards. 1418 01:05:44,058 --> 01:05:44,558 Yeah? 1419 01:05:44,558 --> 01:05:47,003 AUDIENCE: Is there a reason you always start with 1 plus 1 1420 01:05:47,003 --> 01:05:48,960 or could you start with a random number? 1421 01:05:48,960 --> 01:05:50,760 SPEAKER 1: If you wanted to, you could start with random numbers 1422 01:05:50,760 --> 01:05:51,645 other than 1 plus 1. 1423 01:05:51,645 --> 01:05:54,630 You'd just have to change the initial value of the state, 1424 01:05:54,630 --> 01:05:58,550 changing them to random numbers instead of having them initially be 1 and 1. 1425 01:05:58,550 --> 01:06:00,382 But yeah, you could do that too. 1426 01:06:00,382 --> 01:06:01,595 Yep? 1427 01:06:01,595 --> 01:06:04,219 AUDIENCE: So is it calling render whenever you change the state 1428 01:06:04,219 --> 01:06:11,330 or when it is calling render, how does it know to call render [INAUDIBLE]?? 1429 01:06:11,330 --> 01:06:13,510 SPEAKER 1: So when React calls render is part 1430 01:06:13,510 --> 01:06:16,780 of React's abstraction, whereby it's going 1431 01:06:16,780 --> 01:06:18,940 to call render whenever it needs to. 1432 01:06:18,940 --> 01:06:23,410 And React is going to compute based upon the state when it needs to re-render. 1433 01:06:23,410 --> 01:06:26,710 And in particular, it's not even going to re-render everything. 1434 01:06:26,710 --> 01:06:31,600 It's only going to re-render the parts of the render's return value 1435 01:06:31,600 --> 01:06:33,160 that actually need to change. 1436 01:06:33,160 --> 01:06:36,370 And so, if I'm typing something into the input field, 1437 01:06:36,370 --> 01:06:39,130 the contents of the h1 that's displaying the problem-- something 1438 01:06:39,130 --> 01:06:40,750 plus something-- that's not changing. 1439 01:06:40,750 --> 01:06:42,760 And so React is not going to bother re rendering 1440 01:06:42,760 --> 01:06:45,980 that part, even though other parts of the application are changing. 1441 01:06:45,980 --> 01:06:48,355 And so React is going to be smart about it-- figuring out 1442 01:06:48,355 --> 01:06:52,750 which parts of the DOM need to be reloaded and re rendered in response 1443 01:06:52,750 --> 01:06:54,998 to the changing state of the application. 1444 01:06:54,998 --> 01:06:57,690 1445 01:06:57,690 --> 01:06:58,290 Other things? 1446 01:06:58,290 --> 01:07:01,710 1447 01:07:01,710 --> 01:07:02,210 Yeah? 1448 01:07:02,210 --> 01:07:06,620 AUDIENCE: [INAUDIBLE] file? 1449 01:07:06,620 --> 01:07:09,751 SPEAKER 1: Yes, you could definitely separate stuff into different files. 1450 01:07:09,751 --> 01:07:11,750 And in fact, tomorrow we'll probably take a look 1451 01:07:11,750 --> 01:07:13,460 at the more canonical way of doing things 1452 01:07:13,460 --> 01:07:16,370 like this, whereby we'll actually use a little bit of node 1453 01:07:16,370 --> 01:07:17,650 in order to do that too. 1454 01:07:17,650 --> 01:07:20,964 But more on that later. 1455 01:07:20,964 --> 01:07:21,464 Yeah? 1456 01:07:21,464 --> 01:07:23,797 AUDIENCE: You had the question go red when it was wrong. 1457 01:07:23,797 --> 01:07:28,802 Is that a set property of the state or [INAUDIBLE]?? 1458 01:07:28,802 --> 01:07:30,010 SPEAKER 1: Oh, good question. 1459 01:07:30,010 --> 01:07:32,700 So in the application that I demonstrated a moment ago, 1460 01:07:32,700 --> 01:07:33,750 the original version-- 1461 01:07:33,750 --> 01:07:37,530 when the question was wrong, I changed the color of the problem. 1462 01:07:37,530 --> 01:07:40,920 Like we changed it from just being black to being red text. 1463 01:07:40,920 --> 01:07:44,130 And so we could implement that feature here now. 1464 01:07:44,130 --> 01:07:46,784 In order to do that, whether or not the text is read, 1465 01:07:46,784 --> 01:07:48,450 that's an additional piece of the state. 1466 01:07:48,450 --> 01:07:51,600 That's something that the application state needs to know about. 1467 01:07:51,600 --> 01:07:54,030 And so I'll go ahead and add to this dot state 1468 01:07:54,030 --> 01:07:58,500 a key called "Incorrect" that is going to be equal to false. 1469 01:07:58,500 --> 01:08:00,180 I saw a couple of red frowny faces. 1470 01:08:00,180 --> 01:08:03,366 Questions before I go on? 1471 01:08:03,366 --> 01:08:05,490 All right, feel free to find me during project time 1472 01:08:05,490 --> 01:08:08,725 or ask questions later too, if you want to. 1473 01:08:08,725 --> 01:08:11,350 All right, so initially, we're going to say Incorrect is false, 1474 01:08:11,350 --> 01:08:13,980 meaning the problem is not incorrect. 1475 01:08:13,980 --> 01:08:18,930 And let me go ahead and say, here, if you get the question wrong, 1476 01:08:18,930 --> 01:08:22,410 let me set Incorrect to true, for example. 1477 01:08:22,410 --> 01:08:26,580 We'll change incorrect from false to true if we get it incorrect. 1478 01:08:26,580 --> 01:08:31,290 And now, what I'm going to do is take this h1-- 1479 01:08:31,290 --> 01:08:36,390 the information that's displaying the problem-- 1480 01:08:36,390 --> 01:08:39,816 and I'm going to give it a class name. 1481 01:08:39,816 --> 01:08:45,090 A class name is basically the same thing as what a class is in regular HTML. 1482 01:08:45,090 --> 01:08:47,729 But in React, we have to call it class name instead of class, 1483 01:08:47,729 --> 01:08:50,939 because class is already a keyword in React, or in JavaScript more 1484 01:08:50,939 --> 01:08:55,880 generally, that stands in for the class of the application. 1485 01:08:55,880 --> 01:08:58,102 And so I'm going to give this h1 a class name. 1486 01:08:58,102 --> 01:09:00,810 And in order to do this, I'm going to use some special JavaScript 1487 01:09:00,810 --> 01:09:04,200 syntax called the ternary operator. 1488 01:09:04,200 --> 01:09:05,890 The ternary operator is very common. 1489 01:09:05,890 --> 01:09:07,140 You'll see it in react a lot. 1490 01:09:07,140 --> 01:09:09,420 But basically, the idea of the ternary operator 1491 01:09:09,420 --> 01:09:14,370 is I say, I ask a Boolean expression question. 1492 01:09:14,370 --> 01:09:15,990 I add a question mark. 1493 01:09:15,990 --> 01:09:19,890 And then, I have a value for if the expression is true, 1494 01:09:19,890 --> 01:09:22,920 and then a value for if the expression is false. 1495 01:09:22,920 --> 01:09:26,279 And so, this is like a shorthand way of creating and if/else expression. 1496 01:09:26,279 --> 01:09:29,479 I basically just put a Boolean expression on the first hand side, 1497 01:09:29,479 --> 01:09:31,569 add a question mark, and then add two values-- 1498 01:09:31,569 --> 01:09:34,020 a value if the expression evaluates to true, 1499 01:09:34,020 --> 01:09:36,859 and a value for if it evaluates to false. 1500 01:09:36,859 --> 01:09:38,880 And so I can say class name-- 1501 01:09:38,880 --> 01:09:43,080 all right, if this.state.incorrect-- 1502 01:09:43,080 --> 01:09:46,800 meaning, if inside the state I've gotten the question wrong, 1503 01:09:46,800 --> 01:09:52,500 let me go ahead and give the h1 a class name of incorrect. 1504 01:09:52,500 --> 01:09:55,020 But otherwise if I didn't get it incorrect then, 1505 01:09:55,020 --> 01:09:56,600 it doesn't need a class name. 1506 01:09:56,600 --> 01:10:00,090 So I'll just go ahead and put two double quotes, meaning empty string-- 1507 01:10:00,090 --> 01:10:02,230 no class name here. 1508 01:10:02,230 --> 01:10:04,840 And so now, only if the problem is incorrect, 1509 01:10:04,840 --> 01:10:09,190 then h1 is going to have a class of incorrect. 1510 01:10:09,190 --> 01:10:12,430 And so now, up in this header, I can just do normal CSS code. 1511 01:10:12,430 --> 01:10:16,960 I can add some style code that says, if something has a class of incorrect, 1512 01:10:16,960 --> 01:10:20,380 then go ahead and color it red. 1513 01:10:20,380 --> 01:10:23,390 And so now, by adding style for what should 1514 01:10:23,390 --> 01:10:27,800 happen if you have a class of incorrect, and by adding to this h1 1515 01:10:27,800 --> 01:10:31,340 a class name that is only going to be incorrect if I've actually 1516 01:10:31,340 --> 01:10:33,940 gotten the question wrong. 1517 01:10:33,940 --> 01:10:36,970 Now when I load this page, I type in the answer, I get it right. 1518 01:10:36,970 --> 01:10:41,440 I type an answer and I get it wrong, the color changes to red. 1519 01:10:41,440 --> 01:10:45,730 Because it's gotten that new class of incorrect. 1520 01:10:45,730 --> 01:10:47,282 There is a small bug here. 1521 01:10:47,282 --> 01:10:50,240 Anyone catch what the bug might be based on the code that I've written? 1522 01:10:50,240 --> 01:10:50,740 Yeah? 1523 01:10:50,740 --> 01:10:52,239 AUDIENCE: [INAUDIBLE] 1524 01:10:52,239 --> 01:10:53,530 SPEAKER 1: Will it switch back? 1525 01:10:53,530 --> 01:10:54,030 Will it? 1526 01:10:54,030 --> 01:10:55,930 I type 15, I get the answer correct. 1527 01:10:55,930 --> 01:10:57,460 And no, I get a new problem. 1528 01:10:57,460 --> 01:10:59,170 But the colored didn't switch back. 1529 01:10:59,170 --> 01:11:00,878 And that's because I need to additionally 1530 01:11:00,878 --> 01:11:04,000 say, down here, if I get the question right, 1531 01:11:04,000 --> 01:11:07,400 well then, I better set incorrect equal to false 1532 01:11:07,400 --> 01:11:10,930 so that it goes back to having a color pf black afterwards. 1533 01:11:10,930 --> 01:11:11,950 So I'll try again. 1534 01:11:11,950 --> 01:11:13,390 I get the question right. 1535 01:11:13,390 --> 01:11:16,420 I get the question wrong, and I get the question right, 1536 01:11:16,420 --> 01:11:18,850 it changes back from red to black. 1537 01:11:18,850 --> 01:11:24,820 By changing the value of the state, the interface updates automatically. 1538 01:11:24,820 --> 01:11:25,820 What questions you have? 1539 01:11:25,820 --> 01:11:31,991 1540 01:11:31,991 --> 01:11:32,490 All right. 1541 01:11:32,490 --> 01:11:34,455 In that case, what I thought we'd do is, I'll 1542 01:11:34,455 --> 01:11:37,080 help get you started on what's going to be the morning project. 1543 01:11:37,080 --> 01:11:40,246 And one of the canonical things to do with React when you first try to do it 1544 01:11:40,246 --> 01:11:42,690 is to try and create a to-do list application-- 1545 01:11:42,690 --> 01:11:46,190 an application where you can just add tasks and remove tasks from them. 1546 01:11:46,190 --> 01:11:47,940 And so we'll go ahead and give that a try. 1547 01:11:47,940 --> 01:11:57,392 In order to do that, there are a couple of useful JavaScript tips and tricks 1548 01:11:57,392 --> 01:11:59,100 that you might want to take advantage of. 1549 01:11:59,100 --> 01:12:02,010 So recall that when you have application state, 1550 01:12:02,010 --> 01:12:03,930 you should never change state directly. 1551 01:12:03,930 --> 01:12:07,074 You should never say, this.state.whatever, 1552 01:12:07,074 --> 01:12:09,990 something equals something else in order to change the state directly. 1553 01:12:09,990 --> 01:12:12,810 You should always be calling this.setState. 1554 01:12:12,810 --> 01:12:15,600 But if you wanted to manipulate the state 1555 01:12:15,600 --> 01:12:18,892 without changing the original state, you might want to create a copy of a list. 1556 01:12:18,892 --> 01:12:21,350 And so, this is something that's probably going to come up. 1557 01:12:21,350 --> 01:12:22,590 So I'll show it to you now. 1558 01:12:22,590 --> 01:12:28,830 If I have a list of things, like list1 equals 1, 2, 3, 4, 5, 1559 01:12:28,830 --> 01:12:32,700 and I want to make a copy of that list so that I can manipulate that copy, 1560 01:12:32,700 --> 01:12:34,020 you can do something like this. 1561 01:12:34,020 --> 01:12:39,780 The dot dot dot list1 is basically saying, fill in list1 into this list. 1562 01:12:39,780 --> 01:12:42,750 And so, copy is also going to be a list, 1, 2, 3, 4, 5. 1563 01:12:42,750 --> 01:12:44,730 But it's going to be a copy of that list. 1564 01:12:44,730 --> 01:12:47,730 And we'll see in a moment why that might be helpful. 1565 01:12:47,730 --> 01:12:51,690 If I wanted to make a copy of the list and add something to the end of it, 1566 01:12:51,690 --> 01:12:54,360 well then it's as simple as syntax like this. 1567 01:12:54,360 --> 01:12:56,040 list1 is 1, 2, 3, 4, 5. 1568 01:12:56,040 --> 01:13:00,352 list2 is fill in all of list1 here, and then add the number 6. 1569 01:13:00,352 --> 01:13:03,060 And you can imagine this might be useful if, for instance, you're 1570 01:13:03,060 --> 01:13:04,710 building a to-do list application. 1571 01:13:04,710 --> 01:13:08,550 You have a list of things to do, and you want to add on one more thing 1572 01:13:08,550 --> 01:13:09,990 to do at the end, for example. 1573 01:13:09,990 --> 01:13:14,010 You've got a whole list, and you want to tack on something at the end of it. 1574 01:13:14,010 --> 01:13:16,260 So that might be useful as well. 1575 01:13:16,260 --> 01:13:19,160 You might also want to delete something from a list. 1576 01:13:19,160 --> 01:13:21,240 And in order to remove something from a list, 1577 01:13:21,240 --> 01:13:25,110 one easy way to do that in JavaScript is the splice method. 1578 01:13:25,110 --> 01:13:26,480 And so, if I have list1-- 1579 01:13:26,480 --> 01:13:27,840 1, 2, 3, 4, 5-- 1580 01:13:27,840 --> 01:13:33,750 and I say, list1.splice, and then 3 comma 1, what that's saying is, 1581 01:13:33,750 --> 01:13:37,260 pull out elements starting at index 3. 1582 01:13:37,260 --> 01:13:38,520 That's the first argument. 1583 01:13:38,520 --> 01:13:42,220 And the second argument is how many things should I pull out of that list. 1584 01:13:42,220 --> 01:13:46,200 And so here I'm saying, from index 3 in the array, which is the number 1585 01:13:46,200 --> 01:13:49,470 4, go ahead and remove one element. 1586 01:13:49,470 --> 01:13:52,620 And so now we get 1 2, 3, 5. 1587 01:13:52,620 --> 01:13:55,770 So just a couple of little tips and tricks for interacting with JavaScript 1588 01:13:55,770 --> 01:13:58,530 lists, since it's a syntax you probably haven't seen before, 1589 01:13:58,530 --> 01:14:00,670 but that's ultimately going to be helpful. 1590 01:14:00,670 --> 01:14:04,890 So let's go ahead and get started with this to-do list application. 1591 01:14:04,890 --> 01:14:06,810 I'll go ahead and create a new file. 1592 01:14:06,810 --> 01:14:09,096 We'll call it todo.html. 1593 01:14:09,096 --> 01:14:15,090 I'll go ahead and copy the contents of hello just to get us started. 1594 01:14:15,090 --> 01:14:17,710 The title will be todo. 1595 01:14:17,710 --> 01:14:22,680 And we'll delete the hello component. 1596 01:14:22,680 --> 01:14:23,680 We don't really need it. 1597 01:14:23,680 --> 01:14:26,410 1598 01:14:26,410 --> 01:14:29,580 And OK, here's our application. 1599 01:14:29,580 --> 01:14:31,995 Constructor, props. 1600 01:14:31,995 --> 01:14:36,920 1601 01:14:36,920 --> 01:14:39,345 What is the state of our to-do list application? 1602 01:14:39,345 --> 01:14:41,220 What are the things we need to keep track of? 1603 01:14:41,220 --> 01:14:41,719 Yeah? 1604 01:14:41,719 --> 01:14:49,727 AUDIENCE: [INAUDIBLE] do you use setState and append to a list? 1605 01:14:49,727 --> 01:14:54,551 Like if you had this [INAUDIBLE]? 1606 01:14:54,551 --> 01:14:56,800 SPEAKER 1: If you wanted to append something to a list 1607 01:14:56,800 --> 01:15:01,210 by setting the state, you should do it this way-- 1608 01:15:01,210 --> 01:15:03,910 by making a copy of the original list, and then adding something 1609 01:15:03,910 --> 01:15:04,662 to the end of it. 1610 01:15:04,662 --> 01:15:06,370 And that's, again, for security reasons-- 1611 01:15:06,370 --> 01:15:08,440 for the race condition issue that I mentioned before-- 1612 01:15:08,440 --> 01:15:09,880 that you want to make a copy of the state 1613 01:15:09,880 --> 01:15:12,116 instead of actually modifying the state directly. 1614 01:15:12,116 --> 01:15:15,360 1615 01:15:15,360 --> 01:15:16,637 OK, a to-do list application-- 1616 01:15:16,637 --> 01:15:17,970 what do I need to keep track of? 1617 01:15:17,970 --> 01:15:20,511 And I'll show you what the finished product should look like, 1618 01:15:20,511 --> 01:15:22,356 in case that helps. 1619 01:15:22,356 --> 01:15:24,980 We'll just create something looks a little something like this. 1620 01:15:24,980 --> 01:15:30,020 We've got tasks, a window bar that shows you how many tasks do you have. 1621 01:15:30,020 --> 01:15:33,780 You add a thing to do, add that as another task. 1622 01:15:33,780 --> 01:15:36,140 Pet otter, add that as another task. 1623 01:15:36,140 --> 01:15:38,030 So we've got this growing list of tasks. 1624 01:15:38,030 --> 01:15:39,821 And if you want to, you can add the support 1625 01:15:39,821 --> 01:15:41,940 for deleting them, checking them off. 1626 01:15:41,940 --> 01:15:44,340 So what is the state of the application? 1627 01:15:44,340 --> 01:15:47,192 What things can change? 1628 01:15:47,192 --> 01:15:48,070 AUDIENCE: [INAUDIBLE] 1629 01:15:48,070 --> 01:15:48,945 SPEAKER 1: The tasks. 1630 01:15:48,945 --> 01:15:50,394 Yeah, all the tasks themselves. 1631 01:15:50,394 --> 01:15:52,560 That's going to start out just being an empty array. 1632 01:15:52,560 --> 01:15:54,900 There are no tasks to begin with. 1633 01:15:54,900 --> 01:15:57,310 And what else? 1634 01:15:57,310 --> 01:15:59,762 There's one other piece of the state. 1635 01:15:59,762 --> 01:16:00,720 What else changes here? 1636 01:16:00,720 --> 01:16:01,219 Yeah? 1637 01:16:01,219 --> 01:16:03,969 AUDIENCE: Whether they're complete or not. 1638 01:16:03,969 --> 01:16:05,760 SPEAKER 1: Whether they're complete or not. 1639 01:16:05,760 --> 01:16:06,369 Sure. 1640 01:16:06,369 --> 01:16:09,660 You could implement it by keeping track of whether the task is complete or not. 1641 01:16:09,660 --> 01:16:12,210 You could also implement it just by removing the task from the list 1642 01:16:12,210 --> 01:16:14,377 if it's complete, since it's not going to come back. 1643 01:16:14,377 --> 01:16:16,959 So certainly, that's something you could add if you wanted to. 1644 01:16:16,959 --> 01:16:17,630 AUDIENCE: Input. 1645 01:16:17,630 --> 01:16:18,290 SPEAKER 1: The input field. 1646 01:16:18,290 --> 01:16:18,530 Great. 1647 01:16:18,530 --> 01:16:19,850 This is something that changes. 1648 01:16:19,850 --> 01:16:22,497 When I start typing, the value of the input field changes. 1649 01:16:22,497 --> 01:16:24,830 And so I'll go ahead and give it an input that, at least 1650 01:16:24,830 --> 01:16:27,870 initially, is going to be blank. 1651 01:16:27,870 --> 01:16:30,020 What is the render function going to do? 1652 01:16:30,020 --> 01:16:35,480 Well, let's go ahead and render an h1 that just says Tasks, for example, 1653 01:16:35,480 --> 01:16:41,970 and an unordered list where I'm just going to list all of the tasks. 1654 01:16:41,970 --> 01:16:43,460 And so how am I going to do that? 1655 01:16:43,460 --> 01:16:45,920 Let me just go ahead and, for sake of example, 1656 01:16:45,920 --> 01:16:51,140 start us off with a couple of tasks, like thing1, thing2, thing3, 1657 01:16:51,140 --> 01:16:53,510 in terms of things to do. 1658 01:16:53,510 --> 01:16:59,240 If I want to create one list item for every single thing in this.state.tasks, 1659 01:16:59,240 --> 01:17:01,430 well then we can go back to functional programming, 1660 01:17:01,430 --> 01:17:04,280 which we introduced a couple of days ago, and recall that if I-- 1661 01:17:04,280 --> 01:17:11,210 what I want to insert here is going to be this.state.tasks, 1662 01:17:11,210 --> 01:17:13,736 and then I can say, .map 1663 01:17:13,736 --> 01:17:16,400 Remember, map is a function that takes an array, 1664 01:17:16,400 --> 01:17:18,800 and goes over every element in the array, 1665 01:17:18,800 --> 01:17:21,050 and lets me apply some function to it. 1666 01:17:21,050 --> 01:17:24,410 And so I'm going to map over here. 1667 01:17:24,410 --> 01:17:28,490 And we're going to map over and take every task, and we're going to-- 1668 01:17:28,490 --> 01:17:31,520 1669 01:17:31,520 --> 01:17:34,090 I'll go ahead and fix the spacing a little bit. 1670 01:17:34,090 --> 01:17:39,020 And for every task, we're going to go ahead and return some list item. 1671 01:17:39,020 --> 01:17:44,690 And that list item, at least for now, we'll just go ahead and say, let's 1672 01:17:44,690 --> 01:17:49,170 print out the task there. 1673 01:17:49,170 --> 01:17:52,230 So long story short, we have an unordered list. 1674 01:17:52,230 --> 01:17:54,630 And we're going to take inside this unordered list, 1675 01:17:54,630 --> 01:17:59,440 go over this.state.tasks, mapping over it, going one task at a time. 1676 01:17:59,440 --> 01:18:02,760 And for each task, we're going to go ahead and print out 1677 01:18:02,760 --> 01:18:09,040 a list item that's going to be equal to whatever the value of the task is. 1678 01:18:09,040 --> 01:18:11,500 Let me go ahead and open up todo.html now, 1679 01:18:11,500 --> 01:18:14,930 so we can see what that looks like. 1680 01:18:14,930 --> 01:18:15,640 All right, great. 1681 01:18:15,640 --> 01:18:18,098 Now we have tasks, and we have this loop that's going over, 1682 01:18:18,098 --> 01:18:19,960 creating one list item for each element. 1683 01:18:19,960 --> 01:18:20,460 Yeah? 1684 01:18:20,460 --> 01:18:21,877 AUDIENCE: Could you do a for loop? 1685 01:18:21,877 --> 01:18:24,835 SPEAKER 1: You could also do a for loop in order to do this same thing. 1686 01:18:24,835 --> 01:18:28,010 So you'd do a for loop to sort of add to this growing string, for instance, 1687 01:18:28,010 --> 01:18:30,574 and then insert that string into the HTML page. 1688 01:18:30,574 --> 01:18:31,490 You could do that too. 1689 01:18:31,490 --> 01:18:34,440 1690 01:18:34,440 --> 01:18:38,010 One error you'll notice here-- and this is just a nuance of React that might be 1691 01:18:38,010 --> 01:18:38,970 worth solving-- 1692 01:18:38,970 --> 01:18:40,770 is, you get a warning if you do something 1693 01:18:40,770 --> 01:18:44,100 like this, which is that each child in an array or iterator 1694 01:18:44,100 --> 01:18:46,680 should have a unique key prop. 1695 01:18:46,680 --> 01:18:50,100 And basically, all this is saying is that, if you are looping over something 1696 01:18:50,100 --> 01:18:52,230 and creating a whole bunch of elements, React 1697 01:18:52,230 --> 01:18:57,210 would like you to give all of them a unique property called key. 1698 01:18:57,210 --> 01:18:58,860 And it does this for efficiency sake. 1699 01:18:58,860 --> 01:19:01,680 So that if you're updating only one element in the list, 1700 01:19:01,680 --> 01:19:04,040 it doesn't need to also update all the other elements. 1701 01:19:04,040 --> 01:19:05,970 It can just update the one in question. 1702 01:19:05,970 --> 01:19:09,360 And so, we'll give this a unique key. 1703 01:19:09,360 --> 01:19:11,760 The task name might not necessarily be unique. 1704 01:19:11,760 --> 01:19:16,580 But an additional feature of map is that it can loop over all the tasks. 1705 01:19:16,580 --> 01:19:21,300 But you can also give this function the optional argument, i for index, 1706 01:19:21,300 --> 01:19:25,352 that will let you access which index into the array is this right now. 1707 01:19:25,352 --> 01:19:27,060 And so, I'll go ahead and give this a key 1708 01:19:27,060 --> 01:19:32,070 of i, meaning the first one will be task 0, then 1, then 2, so forth. 1709 01:19:32,070 --> 01:19:32,570 Yes? 1710 01:19:32,570 --> 01:19:44,804 AUDIENCE: [INAUDIBLE] 1711 01:19:44,804 --> 01:19:47,970 SPEAKER 1: So if you start splicing the array, the indices will be the same. 1712 01:19:47,970 --> 01:19:50,640 But React is going to be smart enough to know that, 1713 01:19:50,640 --> 01:19:53,730 because the element at that index has changed, that it's still going 1714 01:19:53,730 --> 01:19:55,754 to be able to re-render it correctly. 1715 01:19:55,754 --> 01:19:59,060 1716 01:19:59,060 --> 01:20:02,405 OK, so if you do that, just add key equals i to it. 1717 01:20:02,405 --> 01:20:04,780 Then when you refresh it, you'll get rid of that warning. 1718 01:20:04,780 --> 01:20:05,613 So all right, great. 1719 01:20:05,613 --> 01:20:07,850 We've gotten this list of tasks now. 1720 01:20:07,850 --> 01:20:11,720 We're also going to want an input field underneath this list of tasks, 1721 01:20:11,720 --> 01:20:18,870 whereby I can have an input field that is going to have a value 1722 01:20:18,870 --> 01:20:23,261 of this.state.input, and probably also a button-- 1723 01:20:23,261 --> 01:20:25,260 and I'll actually put all this inside of a div-- 1724 01:20:25,260 --> 01:20:28,040 1725 01:20:28,040 --> 01:20:33,990 and a button called Add Task 1726 01:20:33,990 --> 01:20:41,430 So I have an input field whose value is whatever the current value of the input 1727 01:20:41,430 --> 01:20:45,780 is, and also a button that's going to add a new task for me. 1728 01:20:45,780 --> 01:20:47,190 I refresh this page. 1729 01:20:47,190 --> 01:20:48,930 And all right, now I have an input field, 1730 01:20:48,930 --> 01:20:50,370 and I have a button to add tasks. 1731 01:20:50,370 --> 01:20:52,570 But much like with the addition game example, 1732 01:20:52,570 --> 01:20:56,160 if I start trying to type a task here, nothing shows up on the screen. 1733 01:20:56,160 --> 01:21:00,720 Because I actually need to add, in the same as before, 1734 01:21:00,720 --> 01:21:04,500 an onChange handler to say, when I change the value of the input field, 1735 01:21:04,500 --> 01:21:07,400 call the handle change function. 1736 01:21:07,400 --> 01:21:11,110 And OK, what does handle change going to do? 1737 01:21:11,110 --> 01:21:15,750 Well, it's going to be a function that just sets the state the function needs 1738 01:21:15,750 --> 01:21:18,890 to take the event as its argument. 1739 01:21:18,890 --> 01:21:20,430 And we're going to set the state. 1740 01:21:20,430 --> 01:21:25,320 And the new value of the input is the event.target.value. 1741 01:21:25,320 --> 01:21:28,500 Same as before-- when I make a change to the input field, 1742 01:21:28,500 --> 01:21:32,306 update the input value inside of my state currently. 1743 01:21:32,306 --> 01:21:35,140 So I refresh this, and now I can actually 1744 01:21:35,140 --> 01:21:38,770 type a new task into the task page. 1745 01:21:38,770 --> 01:21:43,450 Clicking Add Task, of course, doesn't really do anything just yet. 1746 01:21:43,450 --> 01:21:45,430 So let's make it do something. 1747 01:21:45,430 --> 01:21:50,350 Button onClick-- let's go ahead and run a function called this.addTask, 1748 01:21:50,350 --> 01:21:54,080 for example, for when you click on a button. 1749 01:21:54,080 --> 01:21:59,920 addTask is going to go ahead and be a function. 1750 01:21:59,920 --> 01:22:04,384 And we're probably going to want to update the state somehow here. 1751 01:22:04,384 --> 01:22:05,800 Set the state to be something new. 1752 01:22:05,800 --> 01:22:09,140 1753 01:22:09,140 --> 01:22:12,750 I'll go ahead and do this.setState. 1754 01:22:12,750 --> 01:22:17,690 It's going to take the original state as its input. 1755 01:22:17,690 --> 01:22:24,900 And the new state is going to be what? 1756 01:22:24,900 --> 01:22:26,256 What should the new tasks be? 1757 01:22:26,256 --> 01:22:30,400 1758 01:22:30,400 --> 01:22:30,900 Yeah? 1759 01:22:30,900 --> 01:22:33,762 AUDIENCE: [INAUDIBLE] input. 1760 01:22:33,762 --> 01:22:34,470 SPEAKER 1: Great. 1761 01:22:34,470 --> 01:22:38,390 It's going to be whatever the current list is-- state.tasks-- 1762 01:22:38,390 --> 01:22:43,190 and then state.input, which is whatever it is that I've currently 1763 01:22:43,190 --> 01:22:44,790 typed into the text field. 1764 01:22:44,790 --> 01:22:48,520 So I'm updating the state, adding that task. 1765 01:22:48,520 --> 01:22:51,460 I'll go ahead and remove these sample tasks so 1766 01:22:51,460 --> 01:22:53,314 that we can get started with something. 1767 01:22:53,314 --> 01:22:57,050 1768 01:22:57,050 --> 01:22:59,770 Go ahead and refresh the page. 1769 01:22:59,770 --> 01:23:03,120 So tasks-- I can type task1 here, add the task, 1770 01:23:03,120 --> 01:23:04,410 and all right, task1 shows up. 1771 01:23:04,410 --> 01:23:06,160 Granted, it stayed here in the text field, 1772 01:23:06,160 --> 01:23:07,910 but that's something we can fix later too. 1773 01:23:07,910 --> 01:23:11,260 I type in a second task, click Add Task, and all right. 1774 01:23:11,260 --> 01:23:14,980 That task is added to the list as well. 1775 01:23:14,980 --> 01:23:16,890 Questions about what we've done here so far? 1776 01:23:16,890 --> 01:23:20,490 1777 01:23:20,490 --> 01:23:21,110 All right. 1778 01:23:21,110 --> 01:23:23,660 In that case, I'll post a distribution code in just a moment. 1779 01:23:23,660 --> 01:23:25,868 But we'll go ahead and break for our morning project. 1780 01:23:25,868 --> 01:23:27,511 Here we'll create the to-do list app. 1781 01:23:27,511 --> 01:23:29,510 We're going to allow the user to type in a task, 1782 01:23:29,510 --> 01:23:32,120 add a new task to a list of tasks, and delete tasks 1783 01:23:32,120 --> 01:23:33,920 by clicking a button next to each task. 1784 01:23:33,920 --> 01:23:36,971 I'll give you a suggestion of the order in which to do things. 1785 01:23:36,971 --> 01:23:38,720 I'll post a distribution code in a moment, 1786 01:23:38,720 --> 01:23:41,595 if you'd like to take a look at it and use that as a reference point. 1787 01:23:41,595 --> 01:23:45,620 I'd start by just displaying on screen the current number of tasks. 1788 01:23:45,620 --> 01:23:48,320 See if you can figure out a way to, on the application, 1789 01:23:48,320 --> 01:23:51,620 get the page to draw information from the state to display, like, 1790 01:23:51,620 --> 01:23:55,090 you currently have four tasks in your task list, for example, 1791 01:23:55,090 --> 01:23:56,540 and display that information. 1792 01:23:56,540 --> 01:23:58,370 Once you get that working, go ahead and see 1793 01:23:58,370 --> 01:24:01,100 if you can clear out the input field after we add a new task. 1794 01:24:01,100 --> 01:24:03,260 So you type something in, you press add task, 1795 01:24:03,260 --> 01:24:06,530 and the input field clears out so that you can type in a new task. 1796 01:24:06,530 --> 01:24:09,110 The thing to do after that is going to be, 1797 01:24:09,110 --> 01:24:11,430 let's take each task in the task list. 1798 01:24:11,430 --> 01:24:13,490 In addition to just displaying the task, also 1799 01:24:13,490 --> 01:24:16,880 display a button next to it with maybe an X or a checkmark to say, 1800 01:24:16,880 --> 01:24:18,200 completing this task. 1801 01:24:18,200 --> 01:24:21,851 And just add that button there so that every list item has a button with it. 1802 01:24:21,851 --> 01:24:24,350 And then finally, as a final challenge, if you're up for it, 1803 01:24:24,350 --> 01:24:26,450 make it such that when you click on that button, 1804 01:24:26,450 --> 01:24:29,330 that actually triggers changing the state so that we remove 1805 01:24:29,330 --> 01:24:32,270 that task from the list of tasks, therefore 1806 01:24:32,270 --> 01:24:35,944 allowing you to complete and add new tasks to your task application. 1807 01:24:35,944 --> 01:24:38,360 If you'd like to, feel free to add other features as well. 1808 01:24:38,360 --> 01:24:40,651 Or feel free to take the game from earlier this morning 1809 01:24:40,651 --> 01:24:43,550 and add features to that too as part of the morning project. 1810 01:24:43,550 --> 01:24:46,340 We'll go ahead and all just stay in this room for this morning. 1811 01:24:46,340 --> 01:24:52,750 And we'll go until 12:30, and then break for lunch then, and reconvene at 2:00. 1812 01:24:52,750 --> 01:24:53,923