REACT BASICS - CS50 on Twitch, EP. 8

Key Takeaways

All right. Hello world. This is CS50 on Twitch. I'm Colton Ogden. I'm joined today by CS50's Brian Yu. Brian, what will you be uh talking to us today about? Hey everyone. Today we're going to be talking about React, which is a uh web framework that's designed to help with to make it easier to develop uh dynamic web applications that have interactive user interfaces. So, we'll be taking a look at how to get started with that and some of the basic features of it. We'll only scratch the surface because there's a lot to React, but hopefully you'll learn enough over the course of uh the next 2 hours or so to get a good sense for how to use React to build a web application of your very own. And uh CS uh Brian is CS50's head teaching fellow currently and also taught a course through the extension school, the web course. Let me just plug that really fast here. cs50.edx.org/web. If anybody's interested, uh what were some of the topics that you taught in in that web class? Yeah, the web development course was a course we ran last spring. It was about web application development using Python and JavaScript. So, we talked about continuing where CS50 leaves off, talking about the design and implementation of web applications using Flask. We moved to a more advanced Python-based web framework called Django that has a bunch of additional features as well. And throughout the course we were talking about issues of database design and security and scalability and ultimately how to design and deploy web applications on the internet. So, all of those lectures are freely available online. So, definitely feel free to check those out if that's something that's interesting to you. And so, would you say that's more of a back-end course and what we're doing today is a little bit more on the front end? Yeah, I'd say that there was a lot of back-end work over the course of that class where we were teaching things about how to use uh how to design APIs for instance, how to design ORMs for interacting uh with databases in particular. Although, we did touch on some JavaScript on the front end. Today is going to be entirely front end. React is really a framework designed for front-end web development and you can connect it with just about any back end that you use, not necessarily written in JavaScript. You you could connect it with a Flask or Django app, for instance, or some other web server. Okay, super excited. I know React is one of the big the big front end frameworks. Is it the biggest one? Uh as of right now, it's the biggest. So, these web frameworks sort of come and go, and they sometimes get more popular and lose popularity. Right now, React is right now number one in terms of popularity. Uh number two is Angular, which is developed by Google. Uh they Angular 2 is a relatively recent uh addition to the mix. And then there are other frameworks as well, such as Vue, that are also uh growing in popularity, as well. Awesome. So, we got a couple comments there in the chat. We got some regulars here. So, Bavik Knight and Bill Akers are regular folks who join us all the time. Say, "I'm on time today," says Bavik. Uh Bill Akers saying, "Hello, how are you?" Uh M Kloppenburg says, "Hello, everybody." Uh good to see you, M Kloppenburg. And uh oh, looks like Bavik says he's enrolled in the web course. I want to learn more about it about Django, he says. All right, great. Glad to hear you're enrolled. Yeah, Django comes a little more than halfway through the course. Uh it gives us an opportunity to start to talk about uh testing our code in order to make sure that our routes work properly and gives us an opportunity to talk about security and some other issues. Uh so, definitely look forward to that. Awesome. Cool, cool. All right. Well, uh do you want me to bring your computer up here, and we can uh start taking a look? Yeah, sure. Let's do it. So, let's start by working on a a very simple web uh front end using Django. And what I have here is just a basic HTML file, the same way that you would design uh any other HTML file if I were building a web page. But what you'll notice right here, just to start us off, I've added three scripts that we're going to use in order to allow us to add some React code into this HTML file. Uh so, the first one up here on line four, I'm uh importing the React library itself, uh the development version of the React library. On the next line, I'm importing a related library called React DOM. This is going to be a library that's going to give us the ability to take some React code and actually render it inside of the DOM. And if you're unfamiliar, the DOM, or the document object model, de- describes the structure of the web page. Cuz we're going going we're going to add some HTML element to this webpage eventually, and we're going to say this HTML element is one where we want to place some React elements inside of it. And so, we'll place some what are actually called React components inside of our HTML page, and React DOM is going to help us do that. And React is interesting in the sense that while you can write it in pure JavaScript, the convention nowadays is to use something called JSX. So, not just JavaScript, but JavaScript X, where the convention is to mix our JavaScript and our HTML uh elements together. Where in JavaScript natively, things like integers and strings and functions can all be considered values, in JSX, we can consider HTML elements to be values as well. And we can use regular HTML-like syntax in order to define an HTML element that we could save to a variable, for instance, and put in a list of other HTML elements, um which gives us a lot of expressive power, which we'll see in just a moment. And so, this last script right here, uh Babel, that's going to take care of uh translating the JSX code into regular JavaScript, which our web browser is going to be able to understand, such that we can render it. So, let's go ahead and get started by building something very, very simple. So, inside of the body of my web application, the first thing I'm going to do is create an area inside of the body of my application where this React application is going to live. And generally speaking, this is going to be a div element. A div just defines some uh block of the webpage where some particular HTML content is going to go. And this div is going to have an ID of app. Because uh app is just an arbitrary name that we're saying, but we're going to identify this div by the ID. The ID is app, such that later in the JavaScript code that we're about to write, we're going to say, "Take some React component or some piece of React code and insert it into the div called app." So, we're giving it a name, such that later we can begin to reference it. It's like Shane LG says hello with a Bob Ross icon. I think it's become a trope. Um the streams that make some people feel like we're watching a CS version of Bob Ross. Bhavik Naik says, "How is React different from Ajax and jQuery?" Uh good question. So, Ajax is sort of separate. The idea of Ajax is just a the mechanism of a client asking a server for additional information without needing to reload the page for instance. So, for instance, if you're in a chat application on Facebook Messenger or uh GroupMe or WhatsApp or whatever chat application you happen to be using, and someone sends you a message, you don't need to refresh that page in order to get the next message. And that's due to some technology WebSockets are a popular way to do that, but you could do this using something like Ajax, where the idea is that you are asking the web server for additional information, and that new information gets loaded on the page without you necessarily having to do anything. So, for instance, uh this is the way Twitter, for instance, might go about loading new tweets. If new tweets come in while you're still on a page, uh if you were watching the New York Times website last night and if you live in the United States for the US uh midterm elections, you saw a similar thing where you didn't have to refresh the New York Times page, but new content about the latest election results were coming in. That can all be done via Ajax, for instance. And jQuery, meanwhile, is an older JavaScript library. And that JavaScript library is designed to make some things more uh easier, in particular trying to uh select elements and trying to modify elements in particular ways. And so, you can certainly use pure JavaScript or jQuery to do a lot of the things that React can do. Uh React is just designed to allow for um what we would call stateful components, components that can update based on some sort of internal state. And we'll see an example of that uh shortly. Would you maybe use React and Ajax together in an application? Yeah, certainly. If you had a React front end and some sort of back end server, you might inside of your React code make um Ajax requests, make calls to a web server in order to ask for additional information that you would then render inside of your web application. We won't see that today, uh but definitely something that you could do using React. Nuanda 3333, who is Asli Turken, says, "Finally, JavaScript with a heart." So, people have been very excited for that. Uh very thorough explanation, wow. Best of Babel May. Awesome. All right. So, we have this div right now that just says app, but right now this div is empty. So, this / uh then greater than symbol just means there's nothing inside of this div right now. And in fact, if I were to go ahead and open index.html inside of my web browser Chrome, what you'll notice is right now it's blank. There's nothing there. So, let's go ahead and put something inside of this web page such that we can do something interesting with it. And to do this, I'm going to use some JavaScript code. So, I'm going to put this JavaScript inside of a script tag, but because I'm going to be writing JavaScript X JSX code instead of pure JavaScript, what I need to do is transpile that code from JSX into regular JavaScript that my web browser is going to be able to understand. And so, to do that, I'm going to say this script's type is going to be text/babel. And what that's going to say is that Babel, which is a technology that's going to do this transpilation for us, is going to take this code and before it actually renders the page, the first thing it's going to do is transpile or translate this code into regular JavaScript such that Chrome, my web browser, which doesn't understand JSX but does understand pure JavaScript, is going to be able to understand it. So, what's the code that I'm going to write? Well, in general, we're going to create React components. So, any piece of your website you can generally consider to be a component. And one way that React likes to think about user interfaces is by taking a user interface and dividing it up into the different components that make it up. So, for instance, an application might have a menu bar that is a component. It might have a form that is a particular component. A visualization of data in a particular way might be a component. And components can even be nested within each other. You can have a component that has components inside of it, for instance. Like a form could have like a bunch of sub components like field text fields and drop downs and stuff like that. Yeah, certainly. That definitely be possible. Gossen says, is Bootstrap I'm I'm assuming he means Bootstrap the framework different from React? Uh good question. So, Bootstrap is a CSS and JavaScript library that's designed to help uh style our websites a little more easily and add some basic uh uh interactive features, things like form validation that Bootstrap allows for. It is different, but you can use them together. So, React is going to be what's taking care of the logic of like what ultimately gets displayed on the page based on the state of the website, as we'll soon see. And you can add Bootstrap to this application in order to say, "I want to style this webpage in a particular way." And Bootstrap offers some great CSS code that just makes a website look a whole lot more modern and look a whole lot better without you having to go through the effort of writing a lot of that same CSS for yourself. And so, you could definitely use these in conjunction. Awesome. All right. So, we're going to create a React component. And to do that, we're going to use the latest version of JavaScript. It's called ES6, and it allows us to define classes. So, this is something you may be familiar with if you're familiar with other object-oriented programming languages like Java, for instance. But the idea of a class is we're going to define what this component is, and then we can instantiate that class or say, "Let's create a new component and put it somewhere inside of my web application." And so, I'm going to define a basic class, which is going to be called hello, which is just going to be a a React component that is going to say hello on my page. And I'm going to say this class hello is going to extend React.Component. Component. So, the idea here, if you're familiar with object-oriented programming, is that the hello class is going to inherit from the React component class. But if you're not familiar with object-oriented programming, totally okay. The basic takeaway here is that hello is an example of a such component. And all right. So, we have this React component, and what we need to tell this component is what should this component do when we try to render it to the screen, when we try to render it inside of the DOM, render it on this webpage. And to do that, we're going to give it a method called render. And this render method or function is going to decide is is to return what it is that gets displayed on the page when I try to render this component. And so, let me return something. And then what I'm going to return is a div that just says "Hello" for instance. And so, this syntax of div followed by "Hello" and then {slash} div, this is something you might see in just regular HTML for instance. This is just an HTML element inside of which is "Hello", the text that I want to display inside of this div. And my render function is just saying "Hello is the thing that I want to return when someone tries to render this component onto the screen." So, it actually gets to render a return like sort of raw HTML within our JavaScript, which is something we normally definitely don't get to do. Exactly. We can just expressively put the HTML that we want to to show inside the page right inside of that render function. And this is an example of that JSX syntax, that mixing of HTML elements along with our JavaScript syntax. Awesome. So, we've defined this class called "Hello", but we haven't yet rendered the "Hello" element, this component inside of my HTML page just yet. So, that's the last step. So, down underneath the class definition, I'm going to say react dom.render, meaning I want to render some react component. And the component I want to render is "Hello". And we're going to treat "Hello" almost as though it's an HTML tag, the same way that div is a tag or body is a tag. And I'm just going to say, let's render this "Hello" react component. And where do I want to render it? Well, I want to render it back up here where I said, all right, we have this div whose ID is app. That's where I want to render this component inside of the body of my page. So, I'm going to say, let's render this "Hello" "Hello" component inside of that part of the page. And if you're familiar with JavaScript, one thing we can use is something called document.querySelector, which is a built-in JavaScript function that's going to allow me to select for a particular part of the page. And if I say document.queryselector pound app, that's going to mean find the thing whose ID is app and render the hello component there. So, that's the basic idea. We define a class called hello that has a render function that basically says what should the hello component do when I try to render it to the screen. And then underneath that, after we finish defining the class, we use react-dom.render to say let's take this hello component and actually render it. And where are we going to render it? We're going to render it inside of this div whose ID is app. So, you could imagine if you had a more complex page where you had other HTML elements involved, you could just insert some react code in particular at one particular part of your web page for instance. Almost like it lets us extend the very nature of HTML. Yeah, exactly. So, That might says tags are ended like image instead of image tag of HTML for I'm guessing he's referring to your hello tag. Yeah, so the idea is that this hello tag in some HTML tags like div for instance, we have both an open tag like angle bracket div ending bracket and then an ending tag {slash} div to mean all right, this is the end of the div with the content of the div in between. With some tags like the image tag as you point out or like the hello tag in this particular case, we don't need to do that because it's not that there is any textual or other information that we need in between a start and end tag. All of the information that this hello component needs in order to render itself is already inside of this hello class. I'm guessing there are tags that we could define that do allow us to sort of put other tags nested within other react tags. Uh generally not the convention. In fact, what we would likely do is add some what we would call props to this react component where we could pass additional information, but we would pass them in the way we would pass in HTML attributes for instance. So, we would say like hello some property is equal to some value for instance which you could do. But in this case for relatively simple component, we're ultimately not going to need to do that. Got you. Looks like Elias says hello. Elias is a regular. Good to see you, Elias. Div tag beneath the body as well ended on the line. Yeah, exactly. So, this div right now is empty, and so we didn't need a separate closing tag cuz there was really nothing inside of that div. Great. So, assuming I did everything right, if I now go back to my web page and refresh the page, we see that now there's hello rendered on this web page even though I didn't actually write hello into the div inside the body itself. All I said was if we go back to this code to render this hello component inside of this div, and the hello component knows that it should just render a div inside of which says hello. And that'll be reflected if you looked at the page source, I'm guessing it would just say div hello world and div just like we literally wrote in that component. The page source itself is going to contain the JavaScript. So, if we look at the page source, for instance, let me shrink this down a little bit. We're going to see the same JavaScript that we originally wrote. But, if you take a look, most web browsers nowadays support the idea of like, "Okay, let's explore the HTML elements that have actually been rendered to the page." So, if I control-click and click on inspect, for instance, I could go to the elements, open up the body, and inside of the div now you can see that we do in fact have just a div that says hello right there. And so, that's the result of what's been rendered inside of that particular application. So, you can see that right there. Great, makes sense. We have our ID equals app as well. Yeah, there it is. So, that's how we knew where to put that particular div into this web application for now. And so, that was our first React component, the React component that allowed us to add some interesting information into uh into this page. What questions do you have about that so far? There's a there will be like a probably 10 or 15 second delay as well. So, if you want to continue, I can I'll monitor the chat for you as well. All right, sounds good. So, given that very basics, let's go ahead and try and build something a little bit interesting. And what I thought we'd do today is build a game that uses React as a way of exploring how to manage state about how to update the HTML of our webpage dynamically. And so, that's what we're going to try and do. We're going to build a game that is akin to like a flashcard type game. I remember when I was uh my younger brother for instance when I was trying to teach him math for the first time and we trying to I would show him flashcards. Like I got 1 + 1, what is that? And he'd okay, he would say two. And show him another flashcard. 2 + 3, what is that? And so, we're going to build this like addition flashcard game. We're going to see a what something plus something up on the screen. Uh there will be an input field where you can type in an answer. Uh if you get it right, you move on to the next question. If not, you have to try again. Um and maybe we'll keep a score or two eventually just to keep track of that information. And we're going to do all of that using the power of React. So, that's ultimately where we're going to be headed. And so, let's try this out. Uh instead of a class called hello, let's go ahead and call this class uh app because it's going to be our application, but it could be called anything. And instead of rendering a component called hello, we're going to render a component called app. And inside of this render function, let's go ahead and render and I'm going to put this in parentheses just because I'm going to probably take this onto multiple lines just for clarity's sake. Uh though technically you could put it onto one line. It's often conventional if you've got a lot of HTML just to space things out the same way you would space out HTML uh even if you weren't using React to do it. And so, instead of saying hello inside of my code, I'm going to instead uh try and define a a question, like a an addition question, something plus something else. And so, let me create a a div where that question is going to go. Uh where that question is going to go. And for now, I can just say something like 1 + 1. I'm going to give this div an ID. I'm going to call it problem for now just because later I might want to do some styling or reference this particular div at some point in time. Uh but right now it's just going to be a div whose ID is problem. And right now it's just going to say 1 + 1 for instance. If I go back to the webpage and refresh that, Instead of hello, I now see 1 + 1. So, here is the interesting thing. It's not actually going to be all that easy now inside of this 1 + 1 if I ever want to update the problem. If I want to update it to be 2 + 2 or 3 + 5 for instance because I'm going to need to find this div and update the contents of this text to be whatever it is that I want the numbers to actually be. And so, one of the philosophies of React is that everything belongs in state or our components have this idea of state where for any given component, anything that determines a any information that it it wants to store that could potentially change, you can put in something called the state of the component. And then your HTML inside of the render function can reference that state in order to decide what to display. So, what I want to do here is not say this is 1 + 1, but I want to store these numbers in some kind of state inside of my component such that later on when I render it, I can just say rather than 1 + 1, let's draw this information from the state of my component. That way if I ever update the state, my web application will also update as well. So, for now it's going to seem like we're doing more work than we need to because we're going to add extra code just to get the same 1 + 1, but we'll see down the road when we want to change the problem for instance or when we want to verify that the user got the answer right that having this these numbers stored inside of the application state is actually going to be very very helpful. Kind of like declaring variables for our application. Yeah, exactly. It's using variables for these numbers rather than just writing the numbers one hard coded into the HTML of the page itself. So, to do that what I'm going to do is inside of a JavaScript class, I can define what's called a constructor. And the constructor is what's going to run uh when I first create an app, when I first try and create an app and put it into my web application. Uh it's taking this argument called props. These are just additional properties that can be used to modify what it is this component looks like. We're not going to use these props too much for the sake of right now, but certainly they're very powerful feature of React and are especially helpful when you're nesting components within themselves. But the first thing I'm going to do is just because this is a class that's extending from react.component, I technically need to say super props, meaning let's let the super class, the component itself, initialize itself as well, call its own constructor class. But the interesting stuff that I want to do is set the state, this.state of this particular React component. And this.state is going to be a JavaScript object, so a bunch of keys and values that are going to define um what it is that's contained within the state of my React application. So, what are the things that are right now in the state of my React application? Well, in the state of this game of showing numbers and typing in results, at minimum, I need two pieces of state, one to represent each of the numbers that I want to display on my web application. So, I'm going to call those num1 and I'm going to call it num2. Uh num2. And by default, each one of them is just going to be one, such that the first thing that gets displayed on the page is just going to be 1 + 1. Num1 is going to be the state of the first number in the pair of what's being added, num2 is going to be the second one. All right. So, we've defined the state of the application there in the constructor. And now what I need to do inside of the render function, rather than just say 1 + 1, I instead want to draw from num1 and num2 inside of my state to decide what it is that my application's going to look like. So, instead of this one, I'm going to insert a JavaScript value here. And to do that in React, we're going to use the curly brace syntax to mean insert some variable here. And the variable that I want to insert is this.state. And which part of the state is the first number? Well, it's just called num1. That's what I defined up on line 17. So, I have this.state.num1, which is going to take num1 from the state and just insert it right there in the HTML code for our web application. It's almost like using a templating language. Yeah, it's very similar to a templating language if you've used things like uh Jinja for instance along with Flask or Liquid for instance. Um very similar in spirit. We have a couple comments there, too. Pick9117 says the target audience of this channel are not used to NPM yet. Um it's going to kind of vary. I think we'll likely will go into a lot of videos in the future that are for people that are used to NPM, but I'm assuming that the today's video relies on no prior knowledge of NPM. This is a more of a I mean, I guess you can develop React with NPM, but I think this is just like a from-scratch um tutorial. Yeah, in fact, it is probably more conventional to uh design React apps using something like uh using Node and NPM for instance um in order to manage your packages. Um we're doing it this way in just a static HTML file for now just to make it easy to follow for people that don't have that installed for instance. But, if you are interested in the probably more conventional way to do this, take a look at Create React App, which is a way of of just creating a sample React app just from scratch that uses NPM for instance in order to install and manage dependencies and packages. That tends to be the way that uh people will conventionally start building a React front end nowadays if they want to. This just happens to be another way to do it that's a little bit simpler if you don't have that background for instance. As the timer can new on the 3233, you explain everything thoroughly. Thanks a lot for that easier to follow. I'm I'm glad you're finding it easy to follow. Uh React can definitely be challenging at times, so not to worry if some of this seems complicated. There are a lot of resources out there available on the internet uh to help you out there. And Babak Matt wants clarification. Um so, super is the react.component, right? The super class? Exactly. The react.component is the super class, and so super refers to that precisely. Awesome. All right. So, we've extracted the first number from the state and put it in the first part of the addition. And as you might guess, the analog here is with the second number in this addition problem, this plus one, rather than the other plus one. I'm going to say this.state.num2. So now instead of hardcoding 1 + 1, I'm saying extract num1 from the state and then do plus extract num2 from the state and we're going to display that instead. So now if I go back to the page and refresh the page, you notice that it stayed the same. Nothing changed. We added a whole bunch of code and we didn't see any noticeable result, but the idea here is that now these numbers one and one are being drawn from the state of my component rather than just being hardcoded into the HTML of the page such that later on if I were to change the state, if I change num1 to be 27 for instance and I save that and I refresh the page, now it's okay, 27 + 1. Just by updating the state, I've been able to update what it is that the front end of my web application is ultimately going to look like. I'm guessing you can make a component that takes input two and then changes the state as a result of that. Yeah, certainly. So if you want a component that takes input right at the start, that's generally done through the props of that component and so you can do that as well. So all right, we've defined this problem that's going to define num1 + num2 and now we also need some place where we can begin to type in some the answer to this. So let me underneath this div, let me define an input field and this input field right now I'm just going to say, okay, it's just an input field. That's it. Where the idea is going to be this is going to be the place where the user playing this game is going to type in the answer to this addition problem for instance. So if I refresh the page after adding that input field, here it is. Here's my new game. I've got 1 + 1 up at the top and I've got this input field down at the bottom. Can you can you read that last comment there in the in the Twitch chat? 10 + 1. So anyone wants to know what 10 + 1 is. This is a a joke for people that have been keeping up with CS50's lectures here on campus for fall 2018. The 10 + 1 is it comes up at one point in time. So if you haven't seen those lectures, you might want to Oh, that's David. Hi. Shout outs to David J. Malan for joining us on Twitch today. Uh you can read that last one, too, if you want. Uh what configuration software do you use to record the video? I'll turn the number to four. Peter Frey, push it up. Uh so, we use uh Streamlabs OBS software. We have a full production setup. Mr. Dan Coffey's actually here in the studio. Now, do you want to say hi on camera, Dan? Or or or our cameraman, our production staff. Um they actually want to you answer the question. What do What do we use to uh record the video besides Streamlabs? Uh the camera we're using is a uh Sony a7S with a Canon 70-200 mm uh Mark II lens, I believe. Um we have a PC with the streaming software set up, which you talked about. Um and otherwise, we have some simple lights hanging up and that green screen in the back. Pretty simple setup. And uh what are you What are you going to be on here next Tuesday to talk about? Uh next Tuesday, join us for a little bit of Paper.js and uh maybe some Hammer.js as well, the underlying components of Draw 50. Nice. Yeah, the the software that David uses to actually draw in the lecture, like a digital chalkboard, so. And I'm here just to check on Brian's microphone, so excuse me. Oh, okay. Hopefully, we didn't screw it up. Working okay? All right. Sounds good. All right. So, we now have this these two numbers, uh 1 + 1 and plus an input field wherein I can begin to type uh the what I think is the answer to this problem. And so, at this point, we have a new piece of state that we want to keep track of inside of this web application. In particular, we want to keep track of what it is that the user has typed in because that's technically part of the state of the application. But part of the state of this component is knowing what the user has typed in cuz ultimately, we're going to want to check that against uh whatever the actual answer to the addition problem is. So, let me go ahead and add something to the state of this application. In addition to keeping track of num one and num two, the two numbers that I'm going to try to add, I'm also going to add to the state a response, which is going to start out being the empty string, meaning by default, there should be nothing in the input field, no response. But this response is going to be the part of the state that keeps track of what it is that the user has actually typed in into this input field. And now I'm going to go down to this input field and I'm going to say that the value of this input field is going to be this.state.response. In other words, whatever it is that is inside of this.state.response, that is going to be what gets filled in into the input field. So now if I refresh the page, 1 + 1 + the input field, nothing's changed just yet. There's nothing in the input field because response by default is the empty string. But if I wanted to change that for instance, if I went back here and I changed the response to be like hello by default for instance, and I refresh the page, well now okay, hello shows up in the input field because whatever this.state.response is, that's what gets put filled in into this input field. But it should be empty just to begin with. An interesting side effect is and maybe you won't be able to tell this if because the keyboard's behind the camera, but I'm going to try typing something right now. I'm going to try and type numbers and what Colton at least can notice is that as I'm typing numbers, nothing is actually showing up in the input field. Verified. Yeah, so this seems like a little bit of of a strange thing cuz you might expect, right, input field, I start typing things into it, things should start appearing, but nothing's appearing. The input field is still blank. And so that's a sort of a strange quirk of React. Why might that be? Well, it turns out, if we look back at the code, look at what we've said. We've said whatever is contained inside of this.state.response, that should be what shows up in the input field. And this.state.response is always just the empty string. It never changes. We've never changed what it's equal to right here. And so as a result, we're always seeing the input field as blank no matter what we try to type in. And so what are we going to have to do here? Well, we probably want some notion of, all right, whenever we try to change the value of the input field, let's go ahead and update this.state.response to reflect whatever it is that the user has actually just typed in. So let's do that. In this input field down here, I'm going to say on change and notice the capital C just happens to be a React convention. So, on change with a capital C is how we're going to say when the input field's value changes and I try to type something in for instance. Let's go ahead and call a function. And what function do I want to call? I'm going to call it this. update response. Could be called anything, but update response feels like a reasonable name to give it just for now. Now, what is I haven't defined update response yet. So, let me go ahead and do that. Down underneath the render function, let me define an update response which is going to be equal to and here I'm going to use an ES6, the latest version of JavaScript specific feature known as arrow functions which are just another way of defining what a function is. And I'm saying that this is a function that's going to take in as its input the event, the event of me actually typing something in, trying to change the value of the input field. And when I get that input of the event, here's what I'm going to do. So, the arrow is saying the input is the event and now here's the body of the function itself. And now here's what I'm going to do. I'm going to update the state of my application. And to do that, React has a special function called this.set state. And I'm going to set the state. And in particular, I'm going to set the response equal to something. Remember, response is the part of the state that corresponds to what the user has typed in. And in JavaScript, which you may or may not be familiar with, the way to take an on change event and extract the thing that's actually been typed in is to set it equal to event.target.value. Event is the actual change event. I tried to change the value of the input field. Its target is, okay, what was I trying to change? It was the input field. And what is that input field's value? Meaning, what did I actually try to type in? That's going to be the thing that I should update my response to be now. Gaston says, "Why do you talk about states whereas you have likely declared variables just like the response variable? What's the meaning of the word state?" Yeah, good question. So, state you can think of it sort of like a variable. But, before React and before the React-like user interfaces, if I had some state, some variable that was keeping track of information about my application, and I wanted that reflected inside of my actual webpage, I would need to first update the variable, update my state, so to speak, and then also run a a command that would actually take the value of the variable and like update the HTML. So, you might have You might be familiar with like inner updating inner HTML of an element, for instance, if you've used JavaScript before, like take the value of a variable and put it inside of a particular HTML element, for example. What React is going to allow us to do is not need to worry about any of that. Where the idea is going to be, our interface is going to update itself dynamically, reactively, based upon the state. So, the idea here is that on line 35, when I set the state and update what the value of the response is, that's going to result automatically in my user interface updating what value is in the input field, without me needing to say, all right, grab the input field, let me update the value there, insert something there. Everything is just going to respond to that state. And you might imagine that in a more complicated user interface, where multiple different parts of the user user interface depended upon the same piece of state, it becomes a whole lot easier, cuz you update the state once, and anywhere in the user interface where that user interface is dependent upon that piece of state will update automatically. And so, we'll see examples of this, and you'll start to see how this is powerful as we continue to build out this particular application. Good question, though. I think also said input's like setters, I guess, using a setter? Um input in this case is just an HTML element. So, when we're describing the structure of a webpage, we can use HTML elements like div to define a particular section of the page, and input in this case to mean this is a part of the HTML page where we can begin to type something in, for instance. So, all right, we just added this update response uh function that gets called whenever the input field is changed. Let me go ahead and go back here, refresh the page. Nothing seems to be different, but now if I try to type something in, 1 + 1 is 2. All right. Great. Now, when I typed it in, that updated inside of the state what the response is, and we're seeing it right there. And in fact, I can prove this to you that it's actually updating the state and showing the response by adding a little bit of extra code that I'm going to delete in just a moment. But let me add another div where I say, for instance, that the response is this.state.response. Where I'm just effectively printing out what the current value of this.state.response is right now, for instance. Twitch Hello World says, "Thank you for starting with a static site. Is there a book that covers this to refer to later by chance?" A book that covers this. Um, I wouldn't necessarily recommend you refer you to a particular book because libraries like React are always updating. React is constantly being updated with new features, features that are coming and going. And so, by the time that a book is published, odds are that a lot of the everything was that are described in it are already going to be out of date. But there are a lot of online resources with regards to React. You can look to Facebook's own React documentation for a lot of tutorials and guidance on how to do this sort of thing. And many other people out there on the internet have also put out tutorials for how to do particular things with React. So, a lot of great online resources there, even if there aren't any good books on the subject, at least not that I'm aware of. There are a lot of YouTube videos, too, I imagine. Yeah, I'm sure. Plenty of YouTube videos. Uh, the blue is a little bit hard to read, but it's Andre Pedelin, who's on our Facebook, if you're familiar. Oh, yeah, yeah. Um, he says, "Hi Brandon and Colton. So, the argument to this.set state is a JSON object?" Uh, yeah, it's a You can think of it like a JSON object. It's really You can think of it in this case as specifically a JavaScript object, which looks very much like a JSON object would look in this case. So, all right. I've added this response is this.state.response. And now you can really see what I mean, that I see right now response is nothing, but if I start to type something in, like 2, my user interface is automatically updating anytime I I or remove a character because whatever I type in is becoming part of the state, and because whatever after his response is is just referencing that state, whenever the state changes, my web application is updating dynamically in response to it as well. So, I'm going to get rid of that because I don't actually want that in the application, but that's just to show you that this.state.response is actually updating anytime my input field is changing. So, all right. I'm on my way to starting to build this game. I'm able to see a math problem now. I'm able to type an answer. And what I'd like to do is, you know, when I press return or enter on my keyboard, I'd like for that to mean like, okay, submit my answer. But right now I'm pressing return, and you know, nothing's happening right now. So, let's add a new event handler. Let's handle the case when the user presses the return or enter button, and do something interesting in that case. So, I'll go back here. In addition to input on change, let me add one that says on key press. In other words, whenever I press a key. There's no particular event for pressing the enter or return key specifically. Um, but there is an event for saying when I press a key. And what I'm going to do is say, okay, when I press a key, let me check what key I pressed, and if that key is the enter key, then let me go ahead and do something interesting. So, on key press, I need a function here. I'm going to call it this. input key press, for instance, but I could again call it anything. And let me now define that function. The input key press is going to be a function that takes an event, as with before. And first does a check. If the event.key is equal to enter, well, then that means the user pressed the enter key, and I should do something interesting now in response. So, what am I going to do? Well, let me first actually get what the user's response is. I'm going to save that inside of a variable called answer, and I'm defining it as a const, meaning a constant variable, meaning this variable is not going to change, at least for this particular invocation of the function. And it's going to be equal to Well, where is the user's answer stored? Well, what the user typed in, that's stored in this.state.response. But, there's a small nuance here is that in that what the user types into the input field is a string. It's text the user's typing into that input field. And the answer to an addition problem shouldn't be text, it should be an integer. And so, I want to in JavaScript now take this text, convert it into an integer. And the way I'm going to do that is by using a function built into JavaScript called parseInt, which is going to take in this case this.state.response and it's going to convert it into an integer. I see that someone's a little bit confused about the triple equal sign and what that means. This has to do with JavaScript equality. There technically a lot of things that could be equal to each other via double equal signs, even if they're not strictly speaking equal to each other. The triple equal sign is going to strictly check just to make sure that they're equivalent. In this particular case, double equal sign probably would have worked just fine. But, convention in JavaScript or good design practices when you can use the triple equal sign indeed to do so. So, I've defined this variable called answer, which is what it is that the user has typed in to the input field. And now what I want to do is I want to check to see whether or not the user got the answer right or not. Did the user get the answer right? And so, how might I check that? Well, all right. I'm going to run an if condition. I want to check if answer is the sum of the two numbers that are in the problem. And now, where were the two numbers in my problem stored? Well, if we think back, it was really stored in this.state.num1. And I want to check if answer is equal to this.state.num1 plus this.state.num2. In other words, did the user correctly get an answer that was the sum of the two numbers that the user typed in that were presented as the problem on the screen. And so, if the answer was correct, well, what do we want to do? Well, what I want to do is I want to set the state of my application and I want to give them a new problem. I want to give them a new num one and I want to give them a new num two because they got the answer right. Let's give them a new problem to work on. So, in this case I'm going to say, all right, num one is going to be what? Well, I want it to be some random value. And so, JavaScript has a function called math.random. Math.random is going to get me a random number between zero and one. Um probably not too interesting if those are the only numbers I'm dealing with. So, let's deal with things a little bit bigger. Uh if I do math.random * 10, that's going to give me a random number between zero and 10. Uh or zero and up to but not including 10 for instance in this particular case. So, I've got a random number, but this could be a floating point number. I might get something like uh three In fact, it probably will. Get something like uh 3.28574 something something. Um but what I really want if this is just going to be a beginner's addition flash card program is not to have this be a floating point number, but for it to be an integer for instance. And so, the math operation I'm going to use here is math.ceil uh meaning math.ceiling. And the ceiling of a of a number that has a decimal is just take the next highest number. So, if the number is uh 3.28, the ceiling of that is just going to be take the next integer that's higher than that, in this case four for instance. And so, this is going to get us uh a number from one to 10 for instance. Just some randomly chosen number that we want to be the next num one. Ashley says uh the triple equals is because JavaScript is three times cooler. Can you verify that that's true? Uh you know what? I wasn't the person who designed the triple equal sign, but maybe that was part of it. Who knows? Um num two meanwhile is going to be the same thing. I also want it to be a random number between one and 10. So, I'm going to set it to be the ceiling of math.random * 10. This is a conventional way, not just JavaScript specific, but oftentimes uh programming languages will give you a way of getting a random number between zero and one and when realistically what you want is a random integer in some other range. And so knowing how to do the multiplication and maybe addition in order to shift your random floating point number between zero and one to the range that you want is often a useful trick to be able to use if you want to generate a random number. And so this is what I'm going to do. If the answer is correct, then update the state of my web application, update num one to be some random number, and update num two to be some random number as well. So let's give this a try. Assuming I did everything right, I'll refresh the page. We have 1 + 1. If I get the answer wrong, if I type in three for instance, and I press return, well all right, nothing happens. And that's to be expected, right? Nothing happens because what I typed in three is not correctly the sum of one and one. But if instead I type in two, which is the correct answer, and I press enter, watch what happens, hopefully. All right, I press enter, and the problem changed. It changed to 8 + 1. If they changed back to 1 + 1 again out of randomness, that would have been cool. It would have been possible for it to change back to 1 + 1 randomly, but in this case it did in fact change to something else. It changed to 8 + 1 by generating new random numbers in this particular case. Um So, why did that happen? Well, if we go back to the code, when the input key was pressed, we checked to see if the key was the enter key. It was. We calculated what the answer is by taking what the user typed in, parsing it as an integer, in that case two. We checked to see if the answer was equal to the sum of the two numbers. Two is equal to 1 + 1? Yeah, it is. And since it was, we updated the state to reflect two new numbers. Now there's a user interface suboptimality here, something that's not quite great about the way this user interface works. Um and I'm sure that you saw it if you if you saw me do it. I'll do it again. If I try and get this answer right. If I type in nine, getting the answer right, and I press return, I get a new problem, but in my input field the nine is still there. Probably not what I want, cuz probably I want an opportunity now to type in something new. So how do I fix this? Well, in in reality this becomes pretty simple. This nine is only there because nine is the current value of this.state.response. It's the current value of the response inside of the state of my current React component. And so, if I want to clear out the text field anytime the user gets the answer right, well, let me go ahead and say, all right, num1 gets a random number, num2 gets a random number, but let me also update the state's response and just set it to be the empty string again. In other words, clear out the response if the answer is incorrect. Do you want to start about halfway down the chat? Twitch Hello World has a question for you. Yeah. Uh let me show this real quick and then we'll answer the questions. Uh so, if if I refresh this now, 1 + 1, I type in the correct answer two, and when I press return, I get a new problem and the input field clears out. So, much better user interface uh from the perspective of the person using it cuz now you can actually type in another answer, press return, you get a brand new problem, and so that's definitely a whole lot better. We shouldn't show this one to David. He probably wouldn't get it right. Uh all right. Uh Twitch Hello World asked, "Does Math.random generate a pseudo-random number?" Uh yes, Math.random generates a pseudo-random number uh between zero and one. Um and that's the way most random number generators ultimately are working. And one of them says, "Aren't they all pseudo-random?" Um Andre has a uh I think he's making a point about um being able to visually see the difference between double equal and triple equals, which you can do in a terminal. Yeah, we can show this right now actually if people are curious. So, if I go into the JavaScript console and I can just open up the inspector to see it. the chat off there for you. Oh, yeah, great. Thank you. Um if I do something, what is the example there? If I do one equals equals the string one, press return, all right, that's technically true. So, you can see this double equal sign is doing a bit of a a loose equality. Yeah, one is basically the same thing as one, and it's a little more flexible in what it counts as equality, whereas this triple equals is a strict equality. Is the integer one equal to this string one? Well, that's ultimately going to be false cuz no, those are different things. One of them is an integer, one of them is a string. You can likewise see this if I check if zero double equal to false for instance, that's true. Zero and false are both falsy values in the world of JavaScript. So double equal sign those compare as equal, but zero triple equal sign false for instance, that's false cuz the number zero is not strictly equal to the boolean value false. And so the triple equal sign gives us a slightly different result. And so just for precision's sake, I'm using the triple equal sign where it's appropriate to do so. Would you say this flexibility is a reason for some of the weird sort of type coercion bugs that are topics of like the what talk for example? Yes, definitely. You should definitely go take a look at those talks if you haven't already seen them, but it's amazing that the things that the sort of strange features of the JavaScript type system where because of the way the type system works, you can get it to behave in very strange ways that you might not initially expect. But definitely some funny talks out there about that subject if that's if that's interesting to you. Twitch Hill Award, I heard there is no such thing as CSS generating a true random number though. Haven't verified exactly. That's correct, right? Yeah, computers can really only do can only follow the instructions that they are given. And so really what ultimately happens in order to generate a random number is that the computer is doing a whole bunch of mathematical operations to generate a number that feels random to us and that follows the expectations of a random number like it'll be distributed randomly across a range, but that ultimately it might not actually be truly random. And the question of what truly randomness is is an actually really interesting question not only in computer science, but in math and philosophy as well. The technical term for that is stochasticity. So feel free to look into that if that's something interesting to you as well. Metal Eagle looks like he has a question addressed directly to you if you want to read that one off. Yeah, is it more user-friendly if you enter an incorrect answer, there is a visual indication that you got it wrong. Great question. There that is definitely the case cuz right now if I get an answer wrong, 10 plus 9 if I think the answer is 11 for instance and I press return, nothing happens and that's probably not the best user interface. So, definitely um improvement that we can make there and in a couple minutes we'll go ahead and make that improvement just to make the interface a little bit better if the user does in fact uh get the answer wrong in this case. Gaston says, "In case of a non-integer input, does the instructions throw an exception? Because frankly I see that it's based on Java philosophy just taking advantage of the web scripting." Yeah, good question. So, if I type in a a text like hello for instance, uh you'll notice that nothing quite happens um and uh uh that is a good question. So, it looks like um it's never going to be the correct answer if you type in text cuz answer is not going to be equal to num1 plus num2. I can't remember exactly how parseInt is handling it. I actually thought it was going to throw an error, but interestingly it does probably console parseInt hello. a good idea. parseInt hello. Oh, it returns NaN, which stands for not a number, uh which is what you might ex- the Batman part of the WAT yep, if you've seen that talk. Uh and indeed NaN, not a number, is not going to be equal to the sum of these two numbers, so it's actually fine in this case to just use parseInt. Good question. And Bavik Nagesh says, "Java is weird as well. String one plus one is 11, yes, with the default string concatenation being the plus operator." Uh Twitch hello world, I might not remember accurately though. I thought you said a number less than 10 would be generated. Did you change this in the second step? I thought maybe the pseudo random number generator was between zero and one maybe. Oh, good question. So, yeah, it's not going to generate the number 10, but it could generate a number like 9.5 for instance. And if it generates 9.5 and then I take the ceiling of that number right here in math.ceil, the ceiling of 9.5 is ultimately going to bring 9.5 up to 10. And so, that's how I'm able to get a number ultimately between uh 1 and 10 in that range. Bavik just chimed in with that same same detail there. Yep, good observation. Awesome. So, all right. I I forget it was uh Metal Eagle who mentioned it. The way that we handle an incorrect answer right now is not ideal, right? Because right now if I enter an incorrect answer, 10 + 9 I type in 11 for instance, I press return, nothing happens. So what should happen? Well, I feel like at minimum we should clear out the response field just as we did before to give the user an opportunity to try again for instance. So let's do that. If the user got the answer right, then we're setting the state. But else, if they got the answer wrong, let's do something interesting there too. Let's say this.setState and let's just for now set the response equal to be the empty string. In other words, clear out the response um because we want to clear out the input field such that the user can now type in uh some new answer. So go ahead and run this application again. 1 + 1 I type in two, I got that right. 9 + 8, let's say maybe I struggle with this a little more. The correct answer is 17, but instead I type 16 for instance, and I press return. Input field clears out, but I don't get a new problem because I didn't update num1 and num2 in the state. Those are still the same thing. It's just clearing out the input field such that now I can actually type answer, press return, and get a new problem there. We need like a really obnoxious buzzer sound when you get it wrong. Yeah, so we could add sounds in a little bit fancy than we'll do here, but I think at minimum we can do some UI improvement. Like if I get the answer wrong, right now it clears out the input field, but maybe let's try and say, let's get this problem field to uh turn red for instance when I get the answer wrong cuz that might be a visual indication that all right, I got the answer wrong, input field cleared out, and the text turned red. So let's try and do that as well. So now how might I go about implementing this? Well, the first thing to realize is that whether or not the user got the answer wrong, that's going to be part of the state of my application, you might imagine, that by default I didn't get the answer wrong, but you might say later on if I do get the answer wrong, that's going to change the state of my application because I want my UI to reflect the fact that the answer was wrong by turning the text red for example. So up here, when I initially define the state of my application up in the constructor, let me add a new part of the state that I'm going to call like incorrect. Did the user get the answer incorrect? And when the game first starts, they haven't yet gotten anything incorrect. So, incorrect by default is going to be false. So, all right. Now, when the user gets an answer wrong, in addition to setting response to be equal to uh the empty string, let me also set incorrect to be equal to true. I'm updating the state such that this incorrect value is now going to be equal to true. Now, how am I going to style the web application? I want to turn the text red if the user got the answer wrong. My first inclination would be CSS. CSS is a great inclination, actually. In fact, let's try this right now. What you might do is up here in my application, in the header, I might define some style. And you might want to move this to a separate file just to separate things out, but for the sake of example here, we'll just put it in one place. And maybe let's define a class called incorrect. And the dot in CSS means if something has a class of incorrect, well, let's go ahead and change the color to red, for instance. And that might be what we do. If something has a class of incorrect, the color is going to be red. And we can test this now. If I go down here to my problem, where I have num1 + num2, and I say, let's give um this ID a class. And in React, because the word class is already used for like class app, the way we define a class using React is to call it class name, technically. And let me set class name equal to the JavaScript string um incorrect. So, if I set the class name to be incorrect, plugging in the JavaScript string there, And a question, why why is it in a the curly brackets there instead of the like ID equals Uh cuz I'm inserting a JavaScript value here. Uh it'll be clearer in a moment why I'm doing that. Um Now, if I refresh the page, we see that the text has indeed turned red. Uh we get 1 + 1 in red there. Is that showing up on the It's red, yeah, yeah. It's red? Okay. Um it shows up on my screen as red at least. Um TV color isn't the greatest, I don't think. Oh, okay. Um so 1 + 1 is red, which works. I was able to use CSS now to change the color of the text of the problem, but this isn't quite right because 1 + red 1 is red from the get-go, and I only want it to be red if the user got the problem wrong. So what I'm going to do here, I'm going to use a some JavaScript logic here inside of the class name. In other words, I don't want the class name to always be incorrect. I only want the class name to be incorrect if the user actually got the answer wrong. In other words, if the incorrect part of the state is equal to true. And so to do that, I'm going to use what's called the ternary operator in JavaScript. It's very similar to the ternary operator in C or Java if you've used it in other languages. But basically, I'm going to ask myself the question, this.state.incorrect, did I get the answer wrong? Is the value of incorrect in the state true? If it is incorrect, if the user got the answer wrong, then the class should be incorrect, but otherwise, we'll go ahead and just use the empty string. In other words, don't give it a class name if the user didn't get the answer wrong. Makes sense. So anytime you use curly brackets, basically, if you want to do any sort of programming programming logic. Exactly. Any JavaScript programming logic, that's going to go in the curly braces. And so here I'm adding some logic saying, don't always give this div this class of incorrect. Only give it that class if the answer is in fact wrong. And so let's see what the result of this is. I refresh the page. 1 + 1 shows up, and 1 + 1 is in black text, which is to be expected. If I get the answer right, input field clears out, I get a new problem. Same thing if I get it right again, input field clears out. 2 + 5, the answer is 7, but if I get it wrong, if I type in 8 for instance, and I press return, watch what happens. Two things happened. Input field cleared out and the text now turned red cuz I updated the state incorrect is now true and as a result this div gets that class of incorrect. And according to my CSS code, that's going to style it as red. Doesn't have to get it right again. Now okay, so here's an interesting bug. If I get the answer right, I type in seven, what's going to happen? Well, this is the right answer. I expect myself to get a new problem. I expect the input field to clear out. I expect the text to turn black. I press return. It didn't clear. It cleared out and I got a new problem but the text stayed red. And it's still red. It still thinks I got the answer wrong. Why is that? Well, it's red based on the value of this.state.incorrect which starts out as false and we set it to true down here if I get the answer wrong. But in particular, we never reset it if I get the answer right. And so this is where the bug is. So when I get the answer right, I want to also say, all right, now the answer is no longer incorrect. Incorrect is false. We can go ahead and show up the text as black again. Yeah, exactly. So I'm going to refresh the page. Get 1 + 1. I get the correct answer, two. Get a new problem. Get the correct answer again. Get a new problem. If I get the answer wrong, type in seven for instance, press return. All right, text turns red now and the input field cleared out. But if I get the answer right again, now I get a new problem and the text turns back to black. So that's what I expected it to be. Twitch Wars, thank you so much. I have to see the rest later. I have to run. Thanks Twitch for joining us. I'll catch you next time. Catch you on Friday, hopefully. Yeah, thanks for joining. All right. So at this point in time, we've got a pretty functioning web application at this point. We have uh a user interface where we display a problem that updates dynamically, that generates new random problems every time the user gets the answer right. And if the user gets the answer wrong, our UI reflects that. We it all turns red to indicate that the answer was wrong. And once we get it right again, it changes. And that's all based on this little bit of JavaScript state inside of our React component. The state is keeping track of the first number, it's keeping track of the second number, it's keeping track of the response, and it's keeping track of whether or not I got the answer right or not. And so certainly there are things that I can begin to do now. Um maybe I just want to make some aesthetic changes. This has nothing to do with React specifically, um but I might say, "All right, let's go ahead and take my entire application and text align it so that it's centered, uh give it a font family of sans-serif." This is just me making some UI improvements just to make it look a little bit nicer even though none of the actual content is changing. Uh let me take the problem and maybe give it a font size of 72-point font just to make the problem bigger. Um The background of some sports equipment, Fresh I Am style. Yeah, something like that. So now, all right, now I've got uh centered text, the problem is a little bit bigger. Maybe this is a little closer to what I want the ultimate web application to be looking like. Um but the missing thing, at least right now, um is I'd like to keep track of the user's score. I'd like to keep track of All right, how many questions has the user gotten right? So how am I going to go about doing that? Let me go back here. And the score, as you might guess, is also going to be part of this component's state. Part of this application is not only going to keep track of the response and of what the two current numbers are, but it's also going to keep track of what the user's current score is, for instance. And so inside of here, I'm going to add part of the state that is equal to score, and score by default is just going to be zero. And now I'll scroll down here. And underneath the input field, let me go ahead and just say score, and let me fill in the score into this part of the HTML page. And I'm going to do that by saying this.state.score to mean, all right, let's display the score in this part of the HTML page. Using Vim key bindings in VS Code, I would do something like that, says Bhavik Knight. Oh, yeah, I I like the combination of VS Code and Vim a lot. Uh there are a couple of good Vim extensions in VS Code. If you just go to the extensions page in VS Code, uh there are several good Vim extensions that work pretty well. I think I'm just using the most popular one uh in this case, that adds a lot of the standard Vim key binding support into your VS Code editor, and so that can definitely be a helpful thing to do. And so that can not also do it for Chrome? Do I do it for Chrome? Oh, yeah, I also have a a Chrome extension, it's called Vimium, I think, uh that allows me to uh use Vim controls in order to uh scroll through a website. For instance, if I go to like uh the New York Times website.com, for instance, I can uh J in Vim means go down a line, for instance. I can press J, which takes me uh down through the page. K brings me up, for instance. And so, you can do that, as well. Nice. All right. So, I've now defined score, and I've tried to insert that score into uh the main part of this website. Again, all of this is inside of this render function, this function that runs anytime that I try to load the contents of this particular component. Such that now, if I refresh the page, uh we see that I see 1 + 1, input field, and score zero. And all right, this isn't probably the greatest of user interfaces. I probably want score to be on a line of its own. Anything contained within a div is going to get basically a horizontal area of the web page to itself, and so I'm going to surround score inside of a div now, such that now I can say, okay, score is zero and that looks a little bit nicer. And of course, there are UI improvements we can make here, but for now this is going to work just fine. I get a question right, 1 + 1 = 2, and the score stays zero. So okay, that's not quite what I want. What I want to do is when I get the question right, I want to update the state of my component. I want to update the score to be whatever the updated score should be, in other words 1 + what the score was previously. So the simple way to do that is down here, when I get the answer right and I update the state to give myself two new numbers, to clear out the response field, to say that I didn't get the response incorrect, would be to also say score equals something in particular. In this case, this.state.score + 1 might be a reasonable way to do that. And this would work. Um if I went back here, refreshed the page, 1 + 1 I get the answer right, I click two for instance, I get it right. All right, the score updates. So I get a new problem, input field clears out, the score is now one. I type six for instance, get that right, my score is now two. If I get the answer wrong, press return, clears out, turns red, score doesn't change cuz I'm not updating the score state when I get the answer wrong. Now you might imagine different game mechanics, maybe I want the score to decrease if I get the answer wrong for instance. You could do that too, but for now I'm saying if you get the answer wrong, just go ahead and don't change the score. There is one uh minor design issue with this particular paradigm, and this gets to be a little bit more advanced um in terms of how React works, but one interesting thing is that technically speaking um when I say this.state.score + 1 and set that equal to the new score, this opens me up to something called in maybe not in this particular case, but doing something similar to this in other React components, especially as your React applications get more complicated, this does open me up to potential race conditions. Where the idea might be if I'm evaluating the value of this.state.score before the state has totally updated or while someone else is trying to update the same state or some different part of the application is also trying to update the state, there's a potential for conflict there. And so, there are many ways to deal with this, but React actually has a pretty straightforward way of dealing with this. And that's to say that right now setState is taking as its argument a JavaScript object, meaning here's the updates that you should be making to the JavaScript state. If I instead wanted to say, um, let's try and update the state, but make the new state dependent upon whatever the previous state was in a way that doesn't open myself up to race conditions, you can instead pass to this.setState a function. A function that takes the state as an argument and returns whatever I want the new state to be. And then instead of this.state.score, I would just say state.score, where this state refers to this argument to the function. And so, slightly more complicated, the reason I'm doing this is just to be consistent with best React design paradigms in particular trying to avoid the potential for race conditions. No worries if that was a little bit complicated, um, setState can also just as easily take a JavaScript object as well. Perfect. Now he was asking, um, we have to set score as a class variable, right? Instead of an instance variable? Um, in this case, this.state itself is an instance variable that is going to contain all of the parts of this particular component. And you might imagine that if we wanted to, we could create two of these games for instance running in parallel, where each one had its own score for instance. We could do this right now actually. Instead of just div app, if I copy that, um, oops. And called this div app two, for example. And then down here at the bottom, in addition to rendering the app inside of app, I also render the app inside of app two. So, now I'm I only defined the class once, but I'm rendering it twice in two different parts of my HTML page. You might imagine that now if I refresh the page, Uh, why didn't that why didn't that work? app two Cuz your uh does your thing is looking for just the app ID, right? Not app two. Target container is not a DOM element. ID app two Oh, wait. No, that is your query selector. Target container is not a DOM element. Um I'm not entirely sure why that's happening. Um but let me try to get back to you on that one. Uh for now, we'll just try and render the application once. Part of the fun of live coding. Yep, indeed. But the the point I guess that we see is you could have you wouldn't just necessarily have one app or whatever component. It wouldn't want it be a static variable necessarily. It's good to have it be an instance variable so you could have multiple components running together. Yeah, exactly. And I wonder if Actually, let me try this one more time. Uh let's see if instead of just rendering If it makes you feel better, I I messed up big time on camera like three times last stream and No worries. Uh let's try this and see if it'll work. Inside of a let's render a div inside of which we're going to render app twice, which we should be able to do. If I refresh that All right, great. Now, there we go. Uh now we've rendered the the app application twice inside of this. And you'll notice that each one of them is going to function independently. If I get an answer right here, get an answer right, get an answer right, get an answer wrong, I can have an independent score, I have independent problems, I have independent did I get the answer right or not running simultaneously. Each one is just an instantiation of this app component and I can use that app component multiple times and each one is going to have access to its own state for instance. So that's what's going on here in order to allow me to basically run the same thing multiple times. Nicely done. That was fast, too. Uh Cloud FF06 says hey from South Africa. Good to have you Cloud. Thanks for joining us today. And uh Babak Niaz says I don't know. He's impressed, too. Glad we were able to get that working. All right, but we'll go back to just having one game uh because that'll make things a little bit simpler uh just for our purposes. But you can imagine that now you have this capacity of reusing components. If you wanted to create a multiplayer game for instance where people are racing to see who can get to a particular score first, that would be something you can do. And that's the one of the beauties of React components which is that you design them once, they self-contain their own state and their behavior and how they should behave, and you can then uh you reuse those components in other parts of your application wherever you see fit. You can reuse them multiple times if need be. And all of that goes to show uh just the power of what React allows you to do uh using these components. So all right, we've uh we're almost at the state place where we basically have a complete application. Maybe the last thing we'd like to do is allow the user to win this game. Right now this game could go on forever. You could just keep answering questions again and again and again, and you would never get to the end of this game. Your score would just keep going up and up and up and up. Maybe you want to say, all right, once you get to a score of 10 for instance, we're going to um allow you to win the game. We'll say, okay, you've won the game, game over at the point at which you get a score of 10. How might we go about doing that? Um one thing you might imagine doing is you might say, okay, well, we could add a part to the state to saying, all right, have you won the game or not and add that as something that the state is keeping track of. But we really don't need that. We can infer whether or not you've won the game based on the existing values of the state. And this is part of the React design paradigm, that I could add like a one, which is set to false for instance, and when I get to a score of 10, update one to be true for instance. But, this is a duplication of state information technically, that all the information I need to determine whether or not the user won is inside of the score part of the state. So, I don't need one to be able to tell me that, too. And in fact, having both opens myself up to potential bugs. Like, what happens if the score is 15, but one is false? Those seem to be in direct contradiction with each other. And so, oftentimes, what a good thing to do is only keep around the state that you actually need. Um such that you can just infer what the rest of the state should be based on the state that you have. And so, that's what I'm going to do here, just infer whether or not you've won the game based on what the current value of score is. Colton says, "Hey Colton, let's add in some gooey and turn it into like a Flappy Bird game." Uh I don't know if we'll have enough time for that on stream today, but in my games course, we do look at Flappy Bird from scratch, so I'll toss the link in the chat. Um here as well, if you could pretty good go on. Yeah, definitely another good course to take a look at if game development is something that's interesting to you. This is just going to be a very simple text-based game, but a whole lot more opportunities for a game development, and we have some lectures on that that Colton's done uh to help you with that, if you're interested. Awesome. So, all right. Thus far, throughout the design of our application, what the user interface is structure has looked like has never changed. The numbers have changed, the score has changed, what the user's typed into has changed, but the structure of it of okay, number plus number, input field, score, that stays the same throughout the entirety of the gameplay. When the user wins the game, I probably want to clear out the problem, clear out the input field, clear out the score, and just show some text that says you won for instance, which means that I can't just always render this sequence of divs that are going to display the same thing every single time. And so, here's what I might do instead. What I might do is inside of the render function, um rather than call this render, I'm going to call this function render problem. As in, in this case, I just want to render a new problem for the user to try and solve. And at the end of the game, once the user has won the game, there's going to be no need to call render problem anymore because there's going to be no more problem to display. The user has won the game, and we can go ahead and move forward and just display a screen that says, "Congratulations, you won." Now, React doesn't natively understand what render problem is. React still requires me to have some function called render that's going to return something. But, you might imagine that I could do something like this, where I might say, um if this.state.score is equal to 10, then let me return this.renderWin, which is a function that I've yet to define. Meaning, if the score is 10, once I get to a score of 10, go ahead and render some page that says, "All right, you've won." Else, go ahead and return this. render problem. So, what's the logic here? The logic is, once I've reached the score of 10 and I've won the game, we're going to call the render win function, and that's going to decide what I render on the screen. Otherwise, if I haven't yet reached a score of 10, then I'm going to return this.renderProblem, which is going to be the same thing that I did before, this whole function that's going to return to me what it is that is the problem that the user needs to be solving. Will you be doing error handling, i.e., random character insert? Uh, good question. We actually handled random character insert as we talked about a little bit ago. You may have missed it, but the idea is that if I type in a character into the like a text character rather than a number into the input field, then we might run into a scenario where we're calling parse int on something that isn't an integer. And as we found out by looking at the JavaScript console, when we call something like parse int on something like hello that's not in fact an integer, what we end up getting is not a number, a special JavaScript value that means it's not a number, and that's actually okay. We can just compare to see whether the sum is equal to that not a number value, in which case it's going not going to be equal, and so that's going to be an indication that the number is invalid, for instance. I don't mean to put you too much on the spot, but would this code be on GitHub by chance? Can we share it with people? Um, yeah, we can find a way to share this with you afterwards. Okay, I'll talk to you about the link I'll put in the YouTube. Mhm. Yeah, we can do that. On game one, you should shoot some particles and play a fanfare sound. Uh, certainly you could do that. Probably beyond the scope of what we're going to be doing here today. For sunlight lastly says hello right, nice to see you on the live stream. Hello, great to have you with us today. So, all right. Back to winning the game. We've defined this render problem function, but the function we haven't yet defined is the render win function for what happens when the user does in fact win this game. And so let's go ahead and define that. I'll go down here and say render win. And when you win, let's return some div. Uh, we'll call it a div whose ID is winner. And we're just going to say you win. And that's it. So now let's try playing this game. Again, 1 + 1, I get the answer right. Get the answer right again, we'll answer a couple questions. Got the same question twice in a row, which can happen if you end up generating random numbers every time. It's going to happen from time to time. We could add some extra checking to make sure you get a distinct question every single time if you wanted to. That's certainly something we could do. Uh three, uh 13, 14, and all right. We got 10 questions right. And now, rather than calling render problem, we're instead calling render win. And what we get as a result of that is a screen that says, "You win." And none of the rest of the content of the page is there anymore cuz we're not calling the render problem function, which is the function that's ultimately going to be displaying the problem and the input field and the score field. It's just going to display you win. Some virtual fanfare. Yeah, virtual fanfare. You know, we could style it up a little bit. We could go up here and say, "All right, for the winner, let's go ahead and change the font size to 72 pixels. Let's go ahead and change the color to be green." And then we could try winning again. Uh for the sake of time, I'm going to say when I get three questions right, we win the game. Um so, two, 15, get the third question right, and all right, you win shows up in green uh in big text. And so, that's something uh that you can do uh there as well. Nice. All right. Uh so, there we have it. There's actually a complete React web application that just exists inside of an HTML file now. Um that allows for maintaining a state that dynamically updates itself based upon that state. And so, uh hopefully that gave you a good sense for uh React. We still have some time left though. So, happy to answer questions if there are particular questions about uh aspects or features of React or if we want to make particular extensions to this particular application, certainly something we could do there as well. Yeah, that was an excellent excellent talk. Thank you so much for for coming on the stream today. Yeah, of course. Um but yeah, we'll stick around for a few minutes. So, if you have any questions, let us know. And uh yeah. That was React flashcards. Feels nice building something uh tangible that people can at the end of the day look at and experiment with or, you know, at least you know, cuz we're talking in sort of abstract terms a lot of frameworks, but it's nice to actually see it be sort of put to the grindstone for an actual use case. Mhm. Definitely. Uh one last thing I'll show actually since we have a little bit of time. Um one nice thing about React that we haven't even seen yet so far is uh nesting components within each other which I mentioned at the very beginning but we didn't actually get a chance to see. So maybe this you win component that right now is actually a pretty simple one that just says you win for example. We might want to separate that out into a different component for instance just like a winner component that gets displayed anytime you win something. You might imagine that if this application were extended to have a whole bunch of different games that are part of this uh that you might have the winner screen appear on all those different games once you win it and we might want to factor that out into a different component for example. And so we could do that pretty easily by instead of just defining a class called app, let's also define a class called winner that also extends react.component and this defines a render function that's just going to return a div with ID as winner that says you win. Same as before but we've just separated out into this winner component. And down here in render win rather than returning this div, I can just say return winner. Return that winner component. And let me set the game winning score to be three. Just make this a little easier again. And assuming we did everything right here, if I refresh the game get some questions right get the last question right, we still get the same you win that shows up. Um but this time rather than just being part of the same app component, it's part of a separate component. And so this winner component might be something that other games could use as well. Now you might imagine that maybe we want this winner component to be customized for instance that um doesn't just always say you win but says you win like the addition game for instance where we have the name of the game as part of the winner component. Now, of course, the name of the game is going to vary depending upon the game. So, different games might try to render the winner component in different ways. And so, what I might do in this case is say, "You win." And what I want to do is not just render a winner component, but pass some information into the winner component. Pass information the same way you might pass arguments to a function, for instance. We're going to pass what are called props to this component. Where I'm going to say, um maybe the name of the game, uh const name is the addition game. And I'm going to say, all right, winner, let's pass in a variable called name that is equal to this JavaScript value, again using the curly braces to mean insert a JavaScript variable here, that is called name. So, this is something we haven't seen before. This is an example of a React prop, a property of the winner component that I want to pass into the winner component such that it can use it. And these props, unlike the state, which can change and can update, the props are never going to change. You pass in the name into the winner component, and that is going to um the winner component is never going to change its own props. It's like an image tag having like source equals and then actual path. Exactly, very similar to an HTML attribute the way you would add a source for an image tag or an href for a link tag, for instance. That's the same idea. And so, now in here in winner, rather than just saying you win, I can say you win this.props.name, meaning take the props and extract the name from them and display it there. Such that now if I play the game, get Oh, I got 1 + 1 for a second time. Uh 1 + 6, get that right. You win the addition game. Right, we've been able to shrink that down if you can see it a little bit better. Um So, the chat in the way a little bit there. No worries. Um And so, that's allowed us ultimately to customize this winner component even when using it from an outside component by passing in some prop, the addition game, into the winner component such that I can display and render correctly. And you might imagine that other games that are also using the same winner component could use the same component but pass different props into it as well. Makes everything super nice and modular. M Kloppenburg says, "Thanks Brian. Always enjoyed your CS50 CS50 web explanations as well." Great, glad to hear it. Glad you enjoyed. Could we add an app for the typing test as for sunlight? Probably not today, but maybe in the future. That'd be cool idea actually. Not today, but certainly something you could do with the knowledge that you have with React right now. It would really be probably some state. Maybe that state is going to contain information about what it is the user is expected to type and some state about what the user has actually typed. It might contain state about what time they started typing for instance. And then based on the current time, the time they started typing, and the number of characters they've typed you could probably estimate a rate at which they were typing and maybe you have some algorithm for factoring in mistakes they make or errors they make there as well. So definitely something that you could do using the same general paradigm. Frans P asks, "Any thoughts on the new React feature hooks?" New React feature hooks. Actually not too familiar with those feature hooks. But happy to chat more about that later afterwards if you want to shoot me an email or some instance. Happy to chat about that too. Do you want me to read off Cloud's question after that? When you added the second app in, could you create a multiplayer kind of interface that compares scores at the end of both players' completion and displays the overall winner? Would increasing difficulty be as easier as easy as increasing the multiplied random number each time you get a correct answer? Yeah, certainly. So two separate questions there. One about the multiplayer game. So for those who joined a little bit late, one thing we did at the beginning of this was to say, "All right, what if we instead of just rendering the application once, tried rendering the application twice?" So I have the application twice here, inside of the same div. And then I rendered the game here such that I now have two parallel games that are going on. Certainly, you could imagine that we had an interface that compares scores at the end of it and tells you who got the overall who was the overall winner. Um but in order to do that, you probably would need to have some other component, some wrapping component that wraps the two games and that contains its own state of keeping track of like who's winning the game, that handles events for when an application wins a game, for instance. So, definitely something you could do. Uh it would just require probably an additional component uh to keep track of managing all those different games. manager, and then those two are app manager, and then have those two apps. Yeah, yeah, exactly. Uh would increasing the difficulty be as easy as increasing the multiplied random number each time you get a correct answer? Yes, exactly. And in fact, we could do that right now without a whole lot of difficulty. Rather than just adding numbers from let's try and find it. Uh from This will get us numbers from 1 to 10. If we want to make the game more difficult, actually, why don't we try taking a number from 1 to 10 and adding state.score to it, for instance. So, this will update uh the random number adding whatever the current score is, such that as my score gets higher, the numbers that are inputted get more difficult. And let's go ahead and change the winning threshold to 10 just so we can get some more opportunity to try questions. But now, all right, 2 uh 11 uh yep, uh 15, 17. And let's All right, so now 12 + 12, this is not a problem that we would have gotten before if we were just going from a 1 to 10 scale, but because we're now increasing the values of the numbers that we're typing in, every time we do it, we're going to start seeing higher and higher numbers. Um and if we do this a couple more times, like 15 + 14, these are the types of numbers that we weren't getting in the original game. But yeah, but the number, you could definitely make the game a little bit more exciting. Thanks, Brian. You explained very well everything. You did a good job. Awesome job. Uh Boston Mass says, "Wait, you're in Mass?" Uh so, yeah, we're in Cambridge, Massachusetts, where Harvard uh University is located. Um shooting here live from campus, actually. Every time there's a long message, Colt makes the other person read it. That's actually true. That's a good point. Uh I thought that was Zac Efron. Brian, could you make another session showing the multiplayer interface? Um Uh we haven't scheduled the remaining sessions yet, but certainly I would encourage you to try making the multiplayer interface. That's something that's interesting to you. You can do it using much of the same technologies and features that we talked about today, and this idea of just composing components. In the same way that we put our winner component inside of our app component, you might have a a game manager component, inside of which are two apps, for instance, and you could give that a try, certainly, uh as something to to work on. Why don't you go ahead and read the other long message towards the bottom? Uh would adding a restart button essentially just be adding a button that instantiates a fresh copy of the React component on click? You could do that. Uh you could instantiate a fresh component of the React component. Though, what might be easier would just be resetting the state back to the original state. So, in fact, let's try that. Uh why not? Um It won't be too difficult. So, after the end of the score, let's add a button, uh and that button is going to be reset. So, now we refresh the game. Here's the reset button. I got some questions right, but of course, clicking the reset button right now does nothing. So, let me add something to this. Button, on click, let's call a function called this. reset game. Now, of course, I haven't defined reset game yet, but let's define it now. Uh let me go down here to the bottom. Let's do reset game is going to be a function that takes in the event. Although, actually, I don't think we're going to need the event. We're going to set the state. And all right, what things do we to reset? Well, num one, let's set it back to one just for the beginning. Num two, we'll set that back to one. The response, we'll set back to the empty string. Whether or not you got the answer incorrect, we'll set that back to false so it goes back. The score, we'll set back to zero. This is the original state of the application. And when we reset the game, we're just going to reset the state back to the original state. And maybe you can imagine factoring this out to avoid duplication. For now, this will suffice for our purposes. Um such that now I'm playing the game, I get some questions right. Oops, that was wrong. Uh I 16. I type in it, I get a wrong answer for instance. All right, my score is three. I'm not too sure about this question. Uh the answer is wrong so the text is red, but I click the reset button. And all right, the game resets back to normal. The state went back to normal. Num one and num two go back. Uh the answer is blank again. The score goes back to zero. And so you can generate that effect of resetting something just by taking the state and setting it back to normal. Nice. It's like an encore. Cool. All right, well, it's 3:58. Uh we'll stick around for a couple more questions. Um but tune in on Friday. On Friday, we're actually going to be doing some Unity programming in C#. So a completely different venture than today. Um Oh, Cloud also follows up with his other question that I made you read. It says, "Thank you for answering. I'm in second year of software engineering. Busy with Swift at the moment. First time encountering your live feed and really awesome. So thanks." So Um or we can find original state function and just use that function to call. More modular, less dry. Yeah, exactly. So I had mentioned before that I was doing a bit of replica of duplication of code here where in the reset game, the state I was setting it to was equivalent to um the state that I was originally setting this.state to. So you could imagine either putting it inside of some sort of class variable that everything has access to or um by using a function for instance that you could try to avoid that need for that redundancy for instance. Is your computer equipped to do a GitHub on this account? Would you be able to fire up a link for it so it's in the video or do you want to wait to do that later? Uh let's go ahead and do it later. Okay. Sure thing. Yeah, cuz just Mavic just said you're going to push this on GitHub, right? Please share the link. We'll share the link. So, it's going to go up on YouTube and it'll be in the description. We'll post the We'll post the GitHub link in the description there. Um we're just going to go for just a couple more minutes, but we we hit hour and a half, which is the That's the David time as well. David Is it hour and a half? All right. It's a good amount of time. But yeah, that's a it's a nice example. It's like kind of introduces all the core concepts very nicely. Yeah, thanks everyone for listening. Uh hope you enjoyed. Hope you learned a little bit more about uh React and how it can be useful as opposed to just using plain old JavaScript, which you could design an application like this just using JavaScript. Certainly, React is not necessary to do something like it. But especially as web applications get more complicated and web interfaces get more involved in the front end and what's going on and there's a lot of things happening and a lot of things changing inside of the application, React can just be very very powerful for trying to minimize the amount of code that you have to write and maximizing the expressiveness of the work that you're doing. Again, I'm Brian Colton Ogden. So, Brian, you head teaching fellow for CS50. What's what what class are you? What's your I am a currently a senior at the college. So, is it be Oh, so it'd be '19? Class of 2019. Class of 2019 and I'm Colton Ogden, technologist here at Harvard University. Um and we do this stream so far pretty consistently four times a week ish. So, again, we'll be doing another stream on Friday. Students or teachers? Well, you're both. Uh Brian taught the CS50 web class last I'll I'll put the link in the chat one more time. Oops, I'll do it here. So, Brian taught cs50.edx.org/web which was not a React course, but um like you said earlier, my more of a back end oriented Flask, Django, that sort of thing. So, cybersecurity and excellent GitHub first lecture, too, if you want to uh review some GitHub fundamentals. Um and then I am not a student here, but I am a um uh tech full-time technologist and also do a little bit of teaching and other stuff and I taught a games course. So, you can go to both of those links. Those are both of our courses from this year on edX. So, awesome. Ashley says, "This was great. Thank you both. Have a great day." Thanks so much, Ashley. Thanks for coming by again. And thanks so much everybody else. Uh we'll go to the wide shot here. We we still see the chat on the left-hand side. So, this was Brian Yu with an intro to React. Um, stay tuned for Friday. Um, but this is CS50 on Twitch. Any anything you'd like to follow up with? Yeah, thanks so much. Enjoy the rest of your day. Awesome. Thanks so much.