React.js Fundamentals - Create a super-fun calculator!

1. Hello and welcome to React.js fundamentals!: everybody. My name's Luke faddish and on the professional software developer I wrote my very first HD male back in 1997 which looks kind of like this. Not really. But today I'm here to talk to you about react J s if you haven't heard of it. React is a job script library use for building front end Web interfaces. And the great thing about react is it removes a lot of the complexity that we normally face when we're building a Web application, I'll get more into that later during the class. But for now, what minutes knows that reactors become so popular that we can now build desktop and mobile applications in reactors? Well, so that's why I'm super excited to be teaching this class, which is react fundamentals forefront and developers during this class, and we'll build this calculator as out project. It might seem fairly simple, but the great thing about it is that it covers everything we need to know in order to be able to start building react Web applications. I'm super excited to get started, and I can't wait to see you inside the class 2. Let's get you set up.: everybody will. Welcome back in this lecture, we're going to make sure that you're able to run a react application in your browser. Now, you've been running react applications in your browser already? Almost certainly. Because if you run Facebook, then you have undoubtedly run a reactor application before Facebook invented reactor, and they use it everywhere. But we're gonna be using react a little differently to those guys during our development and practice exercises. So it please download from the resources recount complete doctors it here. I've got it sitting here in my little fonder window already. Give that a double click to open it on. You can see that on compresses into these recount Complete photo. Open that up and inside. We have re Calcutta dot html. Now, in your browser, you can go ahead and open that file up like clicking Recount that HD and hurled like open up. By the way, you can use command o on a Mac or control over on a PC in order to open a far from your brother. And here we have our little calculator. And if we do some tricky math nine divided by three. Hey, Todenhofer did anything or not, because the answer is three anyway. That's it. It's there. It's working pretty much as we expect if it's not working. What we expect to see is this. Rick out. Hang on, Deal hats, everyone. It's the React calculator and then a big fat nothing blankness next to it that will be most likely because you're not connected to the Internet. All that's something wrong with your Internet connection. I just turned by and often demonstrate this. That's because we pull in some external libraries to use without react application. If you can't see the Internet, you won't be able to use the application, and you won't be able to complete the rest. Of course, um, the other most likely reason is that you would be using quite an incredibly old browser if you still have no luck. You've got you Internet on. You got a new browser? Oh, yes, of course. Make sure you got JavaScript turned on as well, and you've got javascript turned on to, and you're still getting nothing. Hey, let me know and we'll work out what's going on and get you up and running. But that's all for now. Hope you saw a lovely there were calculated in your browser, and I look forward to seeing you in the next lecture when we start building it. 3. Start building the calculator!: Hello again, everybody. Today's lecture is where the rubber meets the road and we start working on our recount calculator. So we're going to get started like this calculator and implementing it. And I just want to really spell out that today's goal is to see what react looks like. Give it of a handle on it. Thompson React code into a text editor. Play around with it a little bit. It's not about learning theory. Everything that we do here today, we will be covering or later in the courts. So we'll have other lectures devoted to, like what components out, how we should implement them, what they do with data they received from other components, all these kinds of things. So we'll be looking into that. Ah, whole lot more. What we need to do to get started is to download a ZIP file that contains a skeleton html file that we're going to do our coding in. As you can see, this file is called a recount from Scratch Doctor, which you can download, and I'm just going to double click that, and you can see that creates a folder in that same directory inside that folder is a recount dot HTM L So let's open that with one of my many thousands of text. Editors will use visual studio code today. As you can see, we've got an HTML document here, has a head and a little bit of content. Then it links resources. Hey, we've got some pre defined styles just to save us. They hassle off playing around with CSS what we're learning about react. And here we have some externally linked files that we require for reacted to run you Now browser. Now this is an educational exercise, so we're really linking directly to these files in the browser, but in a normal development situation, we wouldn't would like this. So just keep in mind if where I can't be doing this in a production development environment . Ah would be doing all this kind of stuff on the command line and producing one bundle file to include, you know, source. But that's a little outside the scope off what we're looking at in this particular course, because we're here to learn about the fundamentals, off building interfaces, using react, and that's what we're going to start doing right now, said You have got reactor code starts here and you can see what a script tag type equals. Text travel is how we indicate that were typing something that's not going to be quite proper JavaScript. And, uh, this file babble mindo Js He's responsible for looking after it now, reacting to faces are made up with components. And so we better start by defining our very first component, and it will be a once I stopped doing my type of be a little function in a local calculator , and in this case, a function doesn't really have to do anything other than return something. And in this case, it's going to return J six. Now, at the end of this particular lecture, will be looking at JSX in more Ditto. Um, it looks an awful lot like HTM No. Ah A Z can see there's a few differences like this camel cased class name Andi. We'll give our how little components class, name off, calculate or wild with top was here today and inside out calculate I will have a big fat zero, and so that's a function to render a react component. And that's about as simple as a reactive component is ever going to get. As I said, We're returning some JSX. We'll be talking about J six in a moment, but this isn't enough to actually get something, you know, browser. Because if you get on the crab browser right now, do a reload of this file. You can see there's nothing there, and one of the things we need to do to display a component in browser in React is used. React, dongle, Render said. Here you can see we've got react, Dom, And this is the file that's responsible for rendering our react in a browser. Because, of course, react doesn't have to appear in a browser. We could be generating service side as well on. There's a lot of talk right now about react fiber, which is going to support multiple renderers for react, but many to use really dumb to render how component in the browser. So we can reference how component like that. As you can see, it looks like we've just gone and made a custom HD no Ted called calculator, which is which happens to be self closing and so react. Dorm dot Render requires a component on. It also needs to know where it should render that component. So we will put it and we'll put it in here. So we've got this deal with an I D off container, and this is where all our react code is going to get rendered in our HTML document. So I've got document Get Nana by I d Container, and that should be enough to get us going. And there's a big fat zero. How exciting. So really, we want to do something a little bit more interesting than that. And so we should have a calculator display and so will render that him pretty much exactly the same way. I'll just making coffee of that guy because it's going to be very similar, and we'll call it Cal Display. I will follow through with remaining convention once again, and we'll still have a zero in there, you know, just to keep things interesting. But now, in our that was suckers. And by the way, um, but now inside out calculated component, way free to reference out couch display component. And so what that will do is when we render out calculator, that calculator is gonna come up here and it'll return. It's J. is X and inside that jail sexes Cal could display and say, Well, we need that count Display. So here, that will in turn, caused this character spy function to be executed. And it's JSX will be rendered Dad and him. Let's see how we're looking now. And I've got a zero and you can see that Al zero has changed appearance because once again , just remember, we've got some prettify and CSS and that see, it says defines styles for something with the class nine carat displayed so you can see how we're starting to build up an interface by combining reactive components. The next thing out calculate is going to need is a button. So I want button. We'll make a function. Well, for now, thes props business. We will, uh, we'll see how that works in just a moment, actually, like right now, because we're going to have to use it in order to hear make a couch button. Okay, so once again, we're gonna return a deer. Um, very much alive. The HTML tags that supported by J six, by the way. So you have spans and peas, and so they could have spans and P tags and the all articles knaves everything but will stick. Teoh gives right now. And, of course, that will have a class name home ahead. Talking and typing is not my forte. Okay, Dave, as ah, like that said everything. That how we doing in this lecture will be looking at in a lot more detail later on. Uh, just go over things for now. Inside here. Well, we're gonna have a lot of bottoms or a calculator, so it doesn't really make sense to hard code values. I mean, it doesn't make sense. The hard coded values in our characters play either, but it'll do for now. But in a cath Barton, we want things to be a little bit more interesting. So I'm gonna referenced something called this thought Krups value. And these Kelly prices an indication Teoh how, uh, double package or bubble, library that we are using an expression inside a j six and that that expression should be evaluated. And so in this case, we're referencing some data structure that belongs to this, and it's going to have something called value in it. And what does that value come from? Well, value is easy to find name what we could call it Elephant Popsicle or whatever we want. Um, but of course, value. And so we can get a hit and just pop in a cow like a cow. But it's a value equals and say Why. Yeah, so let's see how that looks. He now browser reload and nothing. Why's that, then it's because referring to this stuff props, that was a foolish mistake because it was clearly receiving props up here. We don't need to refer to this that comes from the habit off using classes rather than functions at needing Teoh refer to a current instance. Uh, we're gonna be using classes, uh, later to define react components. For now, using functions and functions are pretty good, but we but the classes give us a bit more functionality, which we will require. But the whole point is I didn't have to refer to this desk. You have to use props and, uh, let me specify and value like that attributes is what we would call it in html. Ah, and react. It's a property off the couch button component and, uh, react, but it renders the couch button it passes. Whatever it finds here in a data structure called props into the function, we can reference it their proper stock value. Okay, so I've saved that haunt. You won't reload again alone. The whole Here's one his zero great. But it doesn't look like calculated yet, Really. So Ah, I'm just gonna go ahead on what will they see in a different separate, dear? All right, um, far, far six. Okay, so that constitutes a row of buttons in a calculator. And you can see now that well, and you can see how we can use, uh, complainants Teoh compose a interface in react. Because once you've got one defined and it's working the way that we wanted to, then we're in pretty good shape to go and use that component wherever and however we please . And that's not supposed to be subtractions. First creative vision. As you can see, I'm just really sticking close. Teoh calculated standards here. Hey, how order of operators and that will be this attraction on. We need more of these guys, right? Way needed. How? Uh, we got C for clear and we need a zero throughout, calculator on equals and finally edition. Okay, So save that. Well, there it is. But that's looking a little bit wonky off going antipodes. Something else, I'm sure. Um, count Bottoms. Okay. Ah, he's the culprit. Calculate or that fucks while I'm talking until he he can see a lot of that. I apologize. I can't say we're looking a bit better. And how Here's our calculator. As I said before, we've got some pre defined styles. Um, which are what? Making out which is what's making out buttons. How I don't hover and what not. Uh, but you can see how we have to find some react components using functions how those components contain. Well, I defined by j six and how we've combined those components together, which is to say, composing with them with composed a web interface by combining these components which we then Renda using react Dom. So right now, we're gonna hop back to the presentation to look a chain sex a little more closely, sir, in our little coding exercise just now, we saw an awful lot off J S X. Is that stuff that looks like HTML? That really isn't html. What is JSX? It is JavaScript, syntax extension. At least that's the name that Facebook gave it a little while ago. Um, they seem to have backed away from that a little bit now, Haven't said it called that in a while or referred to his JavaScript syntax extension. Uh, but you can't think of it as HTML that you get to customize if that helps on up. I guess there may be that we need to keep in mind is that J six tags correspond to react components, so it he's a happy doggy. Why is he happy? Always happy, because Jazz X gives us an pretty awesome things. It's intuitive. If you know HTML, you can look at JSX and have a pretty good idea of what's going on. It's concise. Ah, those tags take up a lot less space and require much those typing than typing in the job script. You would have to type in instead of riding a giant sex tag. Because every time you see a JSX tag, what's really happening is we're creating a reactor components and passing out a bunch of properties, and all this adds up to having quite readable code. That's awesome. This makes things much more obvious and just cuts down on our opportunities from making mistakes. But he's a said donkey. Why is this doggy so said? Well, JSX is a perfect. Unfortunately, it requires more tooling. We did Teoh use the Babel Library to interpret our JSX and Trans pile it into a regular JavaScript. Uh, it makes his semantics include, which is just like some people crazy. They hate that, Um, because, of course, it looks a lot like HTML and HD villains all about creating semantic structure on the Web page personally doesn't bother me. And well, once upon a time, pages rendered with javascript were kind of invisible toe Web crawlers like Google. But that's no longer true. It's a recent tests, say recent, not bet recently, like 2015 some folks tested their J s ex generated webpage. Uh, just he helped was indexed by bunch of Web callers and search engines, and it was thoroughly indexed by everybody. Except, I think Baidu from China because these search engines now they're executing the JavaScript , their rendering the page before they attempt to crawl it. So if you see anybody saying, well, jazz exit reactor, Okay, but they're gonna be invisible to search engines no longer true. The next thing we kind of need Teoh go over is some little changes that have occurred in the way that we tell a browser that way, using J s ex now normally in the usual kind of development set up. We don't have to tell the browser this because we're not directly including a JSX in the HTML Falls. But for the sake off learning react. How are we going to do that? And we need to tell the browser that we're using JSX code and not some maki really formatted html mixed up with JavaScript. So what's the point in time? We did this to put a comment at the start off our J six like this. JSX wrecked at dawn so the browser would know what it was getting. We don't do that anymore. Now we do this in our script tag. We give it a type text slash bevel, which tells the browser Hey, babble needs to take care of this stuff that's given to babble. And then our J six and the rest of our code will be fast and executed successfully. And the reason I'm going into all of this is because you will still find the old way referenced in some old articles. If you're googling around form or information on J s ex how it works. So that's a heads up for you. So just a quick summary of all of that. That's quite a lot to cover in one nature. But just remember, JSX tags are equivalent to react components and also finally remember that the render function defines the appearance all a react component. 4. Creating components with classes: Hey, everybody all welcome back in this lecture will be talking about defining react components with classes. You can see that we've defined an overall calculated component and fills it filled it up with a Siri's off components to define a calculator display and buttons. At the moment, these air order fired with pure functions on that's awesome. Whenever we can use pure functions to define a component, we should. That makes out code much easier to maintain and to understand when we're trying to figure out why things aren't working their way, they should. However, classes give us more functionality that let us do more without components, and that's why they're going to be checking them out today. What's the goal of today's nature? Well, first of all, we want to make some components using classes, and second of all, will briefly cover. Why wouldn't want to use a class in the first place? So why would we want to use it? Class? Let's check it out. As we can say, we've got these little functions defining out components and even our calculator component , which is a bit bigger. It's noticed the function, however, there's some things that we just can't do with functions. Those things include maintaining state like tracking values from, ah, one user interaction to the next defining default values. We look briefly at passing of value into a component like prop start value here. What if we wanted Teoh give that a default value? But if we wanted to validate it, we can't really do that in a function. These are the sorts of things that, uh, classes give us. OK, so we're going to convert our pure function into a class, and the first thing we need to do is create a class definition was a class scout button and it extends. Well, react. Come on It. Okay, so it expands Reactive component. And the one function that a react component class must have is Orender render is three function that's responsible for defining how component appears in the browser. Onda render functions Gonna do exactly the same thing that our pure function did previously . We do have to change prop stock value to this dark pop stop value since we now get out properties from a class instance and they're not being passed into a pure function. No, that reactors taken care of all of that. Behind the scenes, we just call count display We call Cath Button, but I have to worry about how properties get in there. But we've now converted account button into a class, so let's just go and see how that looks in the browser. Give that a reload and there it is. You can see that we're displaying without buttons exactly the same way that we did before. And we didn't have to change the way that we used talc button down and here and the calculator component. It all happened up here, and the changes went through it seamlessly, so that's great. So as a tiny little clothing exercise, I now invite you to convert the Cal display component, and the calculator component from pure functions in two collapses said, Please pause the lecture and going. Do that and then come back to the lecture and I'll work through that quickly as well. Okay, so here we have back in the food and it's my turn to convert these things from functions to classes, say class cap display. I don't need outcrops that extends extends, extends, react component. We have our render function, which will return the same thing out. Your function did previously and similarly will get in. He It's about calculator. It's a class calculator and react her name and render that please. Bryant's gonna staff 44. It was that that's like, um, 20. Mm, so good. Correct. I'm happy because I counted my indentations right. Okay, so we'll save that. We have applied a class definition to our components implemented render. That's going to see if all this works. And then we have it out. Little calculators now to find with components that at classes and not pure functions. So let's head back to our lecture so we can talk about what we shouldn't do when we define our components as classes. What's about a time like ah, six months ago? This is how we would define a red class would use react dot Create class. This is no longer the way. As you saw, we now use class whatever extends react dot component and just be aware that you'll see the old version again when you're googling around and reading up on react stuff. You'll see the previous way off doing that, using our react dot create class. Don't do that anymore. Extend react component instead. So remember, classes give us more functionality like constructors, default values, validation event handling, lots of exciting things. Um, they are created by extending react, dr Component and not react dot Create class. I hope you enjoyed that. And I look forward to seeing you in the next lecture when we talk more about react component properties. 5. React component properties: Hey, everybody, welcome back. Today we're going to be talking about react Properties. As you may have heard, read components have two kinds of data. This two kinds of data out properties and state. Today we're gonna be checking out properties. So what's the coloured stays? Lecture? Well, it's to learn to use component of properties in react and will also help to define default property values as well, said Properties are assigned to a parent to a child just like that, and they're accessed via the this dot props construct. So check it out. We have already seen this in our little pre implementation. Off the calculator. We have our Woe Be clause calculator here and ah, it's using these cack button components and you can see it's assigning the value of, in this case, one to something called value. So properties, they look an awful lot like attributes in HTML, but they are properties for in a reactor component. And so if we have our cock button only sign something to our property called value there, up here in the couch button definition, we can then go ahead and reference this that problems start value. And we didn't have to use the name value here, can you? It's Ah, name that weaken. Assign ourselves. It could be horseradish or dingbat or whatever we like. But that point is that in the parent, we give it a value in the child. We access it via this stop props, thought value. And I guess one of things that's most important to realize at the moment about properties is that they are immutable. So if I were to go, actually, let's take a look at this in the browser first. And here it is, his out. A little calculator doesn't do anything yet if we check out our control. And here we have our standard warnings about installing the reactive tools, which I haven't bothered to do in Chrome. Huh? Had also telling us that we are kind of using it in development mode. This is not a production configuration, and indeed they are so correct. But we're not gonna worry about that now, Um, this being a learning exercise. So as we can see, we don't have anything else to worry about in the concert hall right now. But if we go through here and I very northerly calf button modify it or modify our render function. Right? I would put that in the return statement, saying you start props. The value equals, Say he, uh okay. Excuse me. Lost control. Edit of it. Okay, He's Ah, yeah, I wanted to do Was put a similar common on the individual. So he is how? Yee hah! And if I go back to the browser and reload, Uh oh, look at this. Cannot assigned to read on the property value of object slash object hash object. Um, and then a bunch of other, um, potentially helpful information about where this is. It could you can see, uh, yet does not hold back. So they say that they're props are indeed immutable. Were not allowed to change them in the class. That is really them. Fear this Stop prop stock value. Ah, the kind of data that we can change is Cold State. And we will be looking in at that in a couple that she's done. So I'll just get rid of that right now. So let's have a little bit of a look at how properties will work. OK, so let's just say that we've got some web interface and out of this pink marshmallow relooking cloud here that's representing our data coming out of a network somewhere. We've got a likes value and likes is set to 12 and he we have a parent component. Good. So the apparent component gets this likes value of 12. But you know, it doesn't really know how to display that. It's in charge of marshalling information. That's, Ah, associate ID we that displaying likes. But when it comes to the actual display, well, it's, ah, it's a bit lost, but that's OK, because it's got another component that it can pass. This likes value to as a property to a child component. Great. So he is outright. And so it passes its belly through to the child. And then the child knows exactly what to do with that here and there's, ah, big thumbs up and 12 next to it on. So we've got l likes rendered in that way. And even though react is all that the view when it comes to user interfaces, we still do have to maintain a kind of separation of concerns between different components and the management off their functions. So in there in this case, the parent knows how to get data out of the cloud, and it probably knows how to organize it in a way that makes sense on the Web page. And then we have another layer. The child, which probably doesn't know anything about where the data came from, doesn't much care about how it's organized. All it knows is that it just has to just play 12 likes on the page. This is a fairly common pattern in react. So now it's time to do some coding, and what we're going to do is start using properties on our component cal display, which is not using properties right now. It just displays a fixed value off zero. Let's take a look at that right now. Okay, so this is not much use to us yet. I've got this calculator display. It's displaying the value zero. Um, but, you know, he probably wanted to display other things. Probably values that we pass into it. So let's go down to where it's used. And, uh, let's give it a property, and we can call. Oh, that. Uh, yeah, I think we'll call that display a number on and very, uh, just said Reno that we've made change here will set it in 99. Now, this is really not that much more useful than just displaying this zero here. But this is what we can do for now and others on using curly braces here. So in JSX were free to use out tags and out camel cased properties, some of which are pretty find, like, last name. Um, but if we want to use an expression, we need to do it inside these girly races. So now we want an expression. We want to reference this stuff for upstart display number. Yeah, Okay, I'll save that. And now when we go through to our calculator and do a quick reload, you can see that I display displaying 99. So this is not super, um, surprising. Really? Because you have already seen how this works. Phillips head back to our code and well said that back to zero for now, shortly, we're going to be updating the calculator so that the calculator display actually changes when we press a button. Um, that's in like, two elections time. But first, there's something we have to explore, and that is the notion off default values for properties and one off the good things about using classes is that we get to have some extra functionality. Like I mentioned, one of which is, uh, these static functions. And we'll call that to fault. Perhaps default props is part off the react component interface for a P I. And its job is to return a JavaScript object. And that job script object will have a key value pair or key value pairs in it, which said to fall values for the properties for that component. So in this case, we need a default value for display number. Something's a display number and will sit there from backed in 19 9 Okay, so let's go down here. And well, if we save this Aiken hot through to our browser, do it relied on, you can see it's going back to zero. And that's because we're assigning zero to display number here. But is that for some reason we wanted to count displays? Yeah. Um, what else? Um, calculated that would they and that first one's going toe have, like no value assigned to display number said to do that and into a reload, here's out to calculator displays. So he's the 1st 1 with no value assigned to display number. Ernie can see it's the Father to 99 and the 2nd 1 which does have a default value assigned to it, has been set to zero. And so just to wrap up, remember that while I react, components have two kinds of data. Today we've been looking at properties ah, properties air access via this dot props dot whatever the property name is and they're assigned by apparent to a child component. And finally, they have default values set by the aesthetic getter function default props. 6. One-way dataflow - why it's awesome!: Hey, everybody, welcome back. This is just I really quick little kind of review. Or if, but a review just I, uh, different way to summarize what we've just been talking about with react component properties and to also explore these slightly wider implications off that I said we're going to be talking about are one way dot for in react. Now, this is kind of a big deal in react because it was really a hunt of a fundamentally different way off doing things to most javascript applications. We're going to be checking out what one? My daughter for years And, um, some of the benefits it gives us as react developers. When we preference one way data flow. Because, as we'll see, it's not super practical just to have all your data going in one direction anyway. So many JavaScript applications look kind of like this. So if we say that these blue dots represent nodes in help browser Dom and an event occurring in any of these blue dots could cause any one of the other blue dots to change. And I think we've seen that right, because, you know, you must total a button, no click something or type some text Ian somewhere And have you want to change a validation message on your page? Or you want a status to change its being represented by color. See changing color on these things can end up. Listen, all have the page. And, um, it can be kind of tough to work out what is changing. What exactly that when we get to react, it looks a little bit more like this. And you may think I'm kind of over selling the case a little bit here by presenting a typical JavaScript being with all these crazy lines going everywhere and it's react one with these, like nice, neat little simple lines going down. Really, this is as much as possible how we'd like our applications to work. But it does require kind of a fundamental shift in the way that you think about how you develop your application. Because when we've got this, it's really super easy just to think Well, I need to go and sit some different styling on this element all the way over there. Well, the way that they're, um, talking inside a class, do it or modify it directly, Um, that in this case, we need to fig super carefully about where our daughter comes from and how interactions work. But anyway, you're not typical. JavaScript. If you have this situation, where is orange? Guy has changed somehow. And if that was unexpected behavior, we've got quite a task ahead of us working out why, Where? Uh, it was changed. But in react, we know that there's really only one other node now parent component that can affect that note. Or we hope so. So our job off debugging, nothing suddenly becomes a lot simpler or we at least we have one list question to answer, which is which node caused the change Now, which noted, started the challenge might be a completely different question, but it really has made life a lot simpler starting from there. But if we go back to our previous example off our like liking interface, um, but we've got data coming out of the cloud, and that goes to parents apparent positive to a child. Child renders it on the Web page. You know what if somebody clicks light? Well, the data obviously needs to get back the other way. We just can't have our like sitting on 12 forever, right? Huh? Clearly, data needs to go back in the other direction, and that's what state is for. So hang around for the next lecture where we investigate river start a flow in react. 7. Reverse dataflow - why we need it!: Hey, everybody, Welcome back in this class, we're gonna be talking about reverse darter flow, which is to say, we're gonna check out how a child component can pass information back up to apparent component, and then we'll see what a parent component would typically do under those circumstances. So what are our goals today? We will understand. Reverse data flow in react, and we will even midget too. So let's get cracking. Take a look at this. Looks like trouble, doesn't it? We need to have reversed out of foreign react because parent components need to know what their child components are getting up to. So here we have our little mini Dom. So this is a very good It's simple. It's understandable, makes a code easy to debug. But when we're looking at our little liking, you device, I have to ask well off, like is clicked. What happens? It needs to be updated. And so this leads us to the idea that we can pass functions as properties as well as data. Now, of course, functions are like these. They traded his first class members in Javascript so we can treat them his daughter. And so it's gonna redundant to say we can pass data and functions. But the point Kim kind of get lost, because when we pass a function into a react child component, it becomes a callback function. And, of course, JavaScript programmers generally no hole about callback functions. And so what we can do without callback function is if our little blue dark down the bottom here is clicks, it can call the function that was passed as a property. That function is executed, which occurs independent component on typically the child compile some kind of data into that function and that will tell the parent component about what's going on. And so this gives us a clear understanding still off. Where are values that coming from? Because if we're now parent component the green guy here and we want to know well, how did it get that value that it's got at the moment that it's passing through to its job ? Well, that valley will be typically sit, um, within the parent component and only within the parent component. And we know that that value can be changed as a side effect off a callback function being executed now, a little word of warning recently deprecate ID or something called the Linked state. Mix in and you'll still see that cropping up in Google search results here and there. Uh, this was a vaccine. You could apply to your react component classes that would let you curl link up state with input fields and so that the state would be automatically updated when you entered something into some kind of input field. Um, baseball ditched that, and the Link State Mixon is no more. So if you see something like that in a Google search result, I know that you're looking at out of date information. There's one way for a child component to update data in a parent component. And that's using callback functions. No, Clearly, it's time that we started implementing. Ah, some reverse data flow in our calculator, so hang tight. We're going to go and do that in the code right now. So please open up your heart starts going in your favorite text editor and code along with me. Okay, everybody, welcome back to our cud. So I just go back to the browse to talk about what we're going to do now. So what we want to do is implement some kind of reverse data flow in our calculator. And, uh, we're gonna do that by making sure that when that button is clicked, then that calculated component knows about It's a calculator component like the whole thing with all the buttons into. Despite its apparent component and all the buttons thes guys, they are Children off that parent component. So what we want to do is make sure that we click a button and a parent knows about it and can do something useful with the child components value. So here we are in a code. Here's out cock button component, which is implementing the bottoms on the calculator, and right here we had out calculator component on. You can see who he can see that hits using Calcutta buttons to implement that calculator interface. So what we want is to pass a function from the parent into the child component and then have the child component used that function when it's clicked. So first thing we'd better do is make sure we have a function that we can pass in seer. Let's say we'll have a button, not a button, a function code up today number because ultimately that's what it's gonna do. It's going to update. Um, I calculated display number, which is what would want to have happen on a calculator when the button is clicked, right? I see value in there, and we won't do anything terribly exciting without of a moment. Orders put a value right. And so he is at function very good. And and now we want to pass that in as a property to out cal button component. And we need to pass that into out cal button component as a property. I'm gonna give it this'll on our ridiculously long name. Um, just for the fight of clarity. Really More than anything else, this is not a number Carrie area. So when they're passing, uh, that function into now child component and our child comported better do something with it , said it's idiomatic in react had the moment not to execute functions or callback functions directly from an event. It's more idiomatic to you. Make yourself a little local function for handling events and then from that function, execute your Colback function. And so we're gonna have handle, click. And so when our cap button is clicked. We want handle Click to be executed so well, put on click equals Note the camel case. My friends this start click and again you can see that we're using, uh, these curly braces because this is an expression reference to a function is an expression and the stuff props dot report a button press. Here we go. And, um obviously, we received a value. We will pass that value back to out. Apparently component so that we know. But number one has been clicked in that button Number two, but number three or the division button so that they stop perhaps dark value. Okay, so we have sit out on click Handler. And now, on flick handling function, we execute now callback function. So we say that we can go to our browser, re lewd and click number one on, and nothing happens. Let's check this out, Inspector. Get a consul and oh, lovely. Look at that. Cannot read property props off. No, dear. Now we have running to a charming through wrinkle in reactor development. So here we are, in Capital button and executing handle. Click right now and we have a little bit of a problem That's because handled like doesn't know what this is in this case. Sadly, when we use functions for event handling like this, the current instance off our cap button isn't automatically bound to that function. So he doesn't know what this is. What's this? We don't know So sadly, we need to do at ourselves in the constructor Now, even though this component didn't need to be a class at the time we turned it into a class earlier Uh, this is the reason why um, we need to do it. I get constructors tape props and testing duties called Super When our props said that out parent class can have our properties and do something useful with them. And then we need to say, Mr Handel, click equals this handle. Find this and obeying Well, we'll save that and magically hamper Hausa will display a one because that's what we've set our update function to do at the moment and not grumble in the JavaScript console. Fantastic. And of course, we click to three. Anything else doesn't work yet because we only assigned and a calculator report button press Teoh, help button number one. OK, so I'm just going todo at that, too. Rest off. How, But hones senior, constructing typos Thank a, you know, just going to go and put those through the rest of the done. Okay. I should really have a space between, but and Curly Brace. And how about a closed tag was gonna do that quickly. Bear with me. So take, like, no time proof. That's better. Gosh, now we said calculator reload on one. Very good. And I were as it started to complain about all these dialogues so you can see they're compressed. These buttons and beings work. Yeah, kind of. OK, but that's okay. Really. What we want to do is at least have our calculator display display One number, just one number instead of zero. So I let's try doing that now, And this is really an introduction to state. We'll be talking more about state in the next lecture, but we'll have a little look at it now. So they constructor. It takes props, Of course. And I'm doing this for two reasons. One is because but that number is going to need to be downed. All right, Uh, this not number because, you know, I find do this uh huh. The other thing we need to do is sit some state, and so we can design some default state, which is a pretty good idea. So I only say that he's stuck. State and state is once again a little JavaScript object. I will say Display number is zero. One day we'll get to display something other than zero. But anyway, we can no good at here will say that Instead of passing zero like that, you'll say things that ST dot display number looking. So we've said somebody should start, he said. That would be a street Medscape industry. All right, Sue, we'll go That Gov he do a reload and happily at calculator is still playing, displaying zero. So we know that our default state assignment is working happily and in here in update number, we can do away with our A look, displaying business and instead say, it's that state. No, not like that. No. You see, the constructor is the only place where we can assign state like this and have it actually stick. Otherwise, we need to use a special function called you start, sit stage, and then we pass a javascript object into the set state function. And this will actually sit outstayed if we just went end, assigned a value to it directly. Without using set state, we would lose that value. Um, it's a real to say, uh, display number is equal to value. That's okay since faced it. Okay, so we'll say that and hit across to a browser Really lewd. And it's a one, all of that and that display updates. And that's not, you know, days. But it's, ah, a big improvement on what we had previously. So that's pretty. I'm happy with that. But there's a love, a little thing that we can do just before we finished fooling around without state and that's ah calculator to create a number larger than one digit set, I think we will say well, to find a new value, which we will coal. Um, I say I will say Let freedom. Yeah, cost, I guess. Okay, you display number equals distorts data number. Oh, actually, they want No, that's right. Yeah. Excuse me. Online was born. Drink first value. Okay. So what are we doing here? We're taking a countess. My number and we are Couldn't Katyn ating during edition Katyn Aging value onto the end of it because we are dealing with strings here. So now we can. So go ahead and say it is that sets that you display number and good, whatever. As, ah, doing a date. Thank you. They won a deity three, 46 and so on. And so, if you have all sorts of nonsense in there lots and lots of nonsense, Okay. But now we are actually getting somewhere. We're getting a little further. Really? Without calculator display. Ah, that wraps it up for this coding session. We will have a much closer look at state and the consequences offsetting state in the next make sure. And I look forward to seeing you there when we actually start to do some addition and subtraction and things like that without calculator. 8. React state and what it does!: Okay, Welcome that, everybody. Today we're going to be talking about state in react. So we had a little look at ST in the previous lecture where we made a calculated modify state using cold AC functions to update the display in the calculator. And as you can see, we have a little bit of room for improvement on. We're going to do that in today's lecture, but first, let's talk about what we're going to cover. So our goal today is to understand and use state. Even though we've done that little bit already and know the consequences of modifying state , there are consequences. Let's check them out right now. Let's say we have a paired component and it executes Rendah and ah, if a parent component is using a child component, then that child components render function is going to be executed as well. So we could think of this as, like now calculated component, the green one on the left here, and then the blue one over here could be one of the calculator buttons. And so when the parent components, Orender or calculators render function has executed the child components, surrender is also executed and well we might click one of our buttons. So if the child component is clicked and it has, like, some kind of handle click function and ah, handle click function came, then go and execute a cool back. The call back was given to our child by the parent. And, ah, if that call back, then goes and executes set state inside the parent, this is the thing we didn't really cover before. When about here? That's right. Every time that we execute set state within a component, it will cause that component to re Rendah. And if that component renders, then all its little child components are going to render a swell and their Children and their Children and so on. So you can see that setting state in react is where interactivity comes from in our Web, in devices that are implemented with react. So there's nothing like a bit of practice to really get a handle on this. So let's head into the code and use state some mawr. Hey, everybody, here we are in our code before, but before we do anything here, it's just hot back to the calculator. So in our reversed out of Florida lecture way Updated the calculator. Um, so that these child components, these bottoms would pass them data back to the parent containing component and which would cause it to update the number that's displayed at the top of the calculated here. But as we can see, it's not really doing what we want yet. That's kind of crazy. Um, so I'm just going to really Dad The first thing I think there's a few things to fix. So I think, and the thing that we want to do right now is get it actually doing some calculating. But the first thing that I think we want to change is getting rid of this leading zero at the style of the number. I don't like that. So, uh, let's hop into the coup. Who ya in our calculator component. And this is what we did last time. You can see here that we're just tacking on the next value to our despite a number. And then recalling this start said state to set a display number two around you display number, Um, which is I said, Well, that was okay. It served us well previously, but now I think we want to do something a little different. I think what we'll do is look, I think we'll start with the kind of by naive ah, solution, which is like the first thing I would have come up with when I sat down to do these. Um, I'm not a massive fan off Jude or code alongs or whatever that show. The final answer first, as if that was the very first solution that the programming encountered. I think that's really the case of Mr Done It, like the same exact program 10,000 times never comes out like that for me. Um, if it does for you, I'm jealous. But anyway, so without new display number, I think what we'll do is we'll test value. So if value is equal to zero, then we'll say, um, you'll say that Well, you just play number is equal truth that you ills. We will do our usual you display number because then starts that duh display number plus value. Okay, and then we sit state on our display number. Hopefully, all will be well. That's reload a calculator and showing zero right click on one and doesn't do a damn thing . Excellent. That's because I've done the wrong test. Hilarious display number. All they're saying about getting everything right. First off. Gosh, um, obviously, I haven't done this like 10,000 times yet. So anyway, what we really wanted check is if our current state display number is equal to zero, and then if it is Buddhist, replace it with our new value. Otherwise, we'll start a pending so have saved that reload. And I click one and is at 153 multiplied. Well, that's not what we want. But that's the next book movement going to solve. Let's hop in. And so twelve's not soul. It's implement addition. So it's gonna look at these guys. So we've got, like, we're gonna implement addition, which means changing like two buttons. We're gonna have to make out plus button, do something different. I'm gonna have to make our equals button do something different. So our plus button is going to have to do a couple of things. It's going to have to record the fact that we want to add something, and we're also gonna have to, um, store our current display number as the first operandi. So I think I will call this function Separate account? Yeah. Forever and count. And it'll take about two. But But I should call that operation because this would be the operation that we actually want to perform, even though we're not performing it yet. We got performance because we don't have that second number at this point when somebody presses. Plus, it was only got one number. Ah, and where, um and we're not implementing our life. Post fix calculation. Ah, in this had to be Ah, funny, like, just not interesting. Anyway, home. So what we want to do is set some state save. You start City, state and a little JavaScript object there and we'll say everything. Cooperation and we'll set it to operation. And we want to store display number as our first operandi. So we'll have offer and one, and that will be set to this thought state display number. Okay, cool. And then what happens to display number s. So this is where our initial from naive solution comes back to bite us a little bit. We can't sit display number to like we can't just leave it as it is. Otherwise we'll start making a great big new number So for now, we'll set it to zero. Ah, yeah. Zero. Okay, so there we go. And what we can do is we can go down to Julie Little Plus button, and when it executes was say, Hey, execute prep, Cal. Um, it is a thing I'm forgetting here. Character is making many references. Teoh veers, and it's a callback function. So of course we have to add it in here. Brett count. Thank a count. Very good. Said, that's our addition button taking care off. What about how equals button out Do the calculation button. So but this will want to do is again set some state, um, and do a calculation so that I displaying them but shows the outcome off whatever is in display number and our first offer and and the operation that we stored. So I'll call this new function Duke Colak, Cal um, on anything that needs to take an argument and because I'm like the world champion at forgetting to do this, I'm gonna go straight ahead and put that in a constructor being bound to the current instance because it will just annoy me when I forget to do that right. Okay, So what are we going to do now? Well, we are going to first of all, I guess we need to I know what we want to do. So you start stayed up operation, and I guess half 1st 1 will be edition. Really? Right. And we'll have vote right, putting a break after the fault. Because, of course, in job skip default can appear anywhere in the case statement. And so I guess what we want to do he is set some state. That's state. And what do we want to do it. Ask date. Well, I think we're done without operations. That will set operation to undefined. And we'll set display number to Aziz flute. Now, Like I said, I'm not really into presenting the final solution first. But I'm going to save you. That the pain off me, working through the various problems off not doing this basically, because we're working with strings. Ah, when he departs them into numbers in order to do some addition with them. Of course, if we just said pass float, is that state brand one Plus that that display number, then, of course, our little bubbly plus symbol would can Karen eight Those tips drinks and give us a ridiculous result. So anyway, um, and finally I think we want to get rid off. Well, reset operated one for beyond the find. Okay, let's say that. And finally, we need to go down, and we our cat button, uh, equals Teoh Do count. Okay, so what do we think is going to happen? Is that going to work? Let's find out. Do it. Relied. I want to say one plus Teoh because 30 my gosh, it implemented Addition. Super exciting. Um And now, of course, if I type 333 0 gosh. Eso You see, our, um, display number initialization isn't really working for us. And we've got some other buttons that kind of not behaving sensibly yet as well. So as a whole, including exercise. I fairly encourage you to go ahead and implement division multiplication and subtraction next in your own time. Um, the date begun, just like, totally slacking off. I'm not doing that myself, because in a little kind of interim code, along between the lectures, I will go on, implement those myself. So I look forward to seeing you in the next lecture. 9. Let's make our calculator calculate!: Okay, everybody. Well, like I said in the previous lecture, this is gonna be a quick run through off implementing the remaining operations in our calculator, which is to say, division multiplication and subtraction. So let's take a look at our code. If you recall, we have this function called Duke ALC, which at the moment is just implementing addition. And in addition, we go through and vehicle sets that, um, update the state that we used to keep track of. We were up to in their operation and finally changed out just fine. So clearly, this is this spot where we want to implement the other operations. But I'm going to do a little differently. I think so. What we'll do is we'll get this guy out off. How case statement. He's got a calling set state and setting these abrasions and upper end one things over and over again. So what we'll do instead is will create this little variable. Say, let you may number initialize at 20 I think like it on and, you know, case off addition. Well, we just new despite number and we'll set it. Teoh. Yeah, come on, that make it into a statement. Very good. And then now down here, I'm sure you can see what's gonna happen. You just very number. I can say. Let's just give that a quick test and a related calculate. I make sure addition still works. Blast five 10. Excellent. Um, so now what we need is three more case statements that implement our other operations. Sobel dio subtraction on division and multiple. Uh, OK, so where are we? Good and has becomes pretty straightforward. You know, if we had, like, 1000 of these operations to do, we do this a little differently. Would be passing it function around instead of having a case statement. Uh, but I think this will do for our little calculator. And I'm just gonna make sure we've got all their operations in the right place. Yes, I think we do. How ever? Well, we better do. In the case of division, he's I look tell you what that's come out is not a number, and we'll let it go. I just heard about the divide by zero case, and I think we'll hit that life for the moment. Hospital, culminating to better fate. Right? But that's not going to work yet clearly because our various buttons and not using our new function. So let's go and make the music new function. Uh, excuse, May I doubt? Same inside. Right? Reload out calculator and we'll give it a test. So I would say six multiplied by three equals Attain. Subtract. Six egos 12. Divided by two. Six. Finally, make sure addition still works. Seven today. Okay, great. So that was a quick run through off implementing the rest of the operations are our calculator. I look forward to seeing you in the next lecture. 10. The React component lifecycle.: okay, Everybody said Now it's time to take a look at the reactor component of life cycle, and first thing we're going to do today is find out what had used the reactor component life cycle, and then we'll see how we can use it. So what is it? Well, it's a Siri's off functions in a writ component that a cold at different stages off its life cycle. Maybe that's a little self explanatory, but anyway, this is what they are. We've got the constructor which have seen if have component Wilm out, we have component. Did mount. We have component. Will receive props should component update render component did update and component Will Matt. Now that's a lot of stuff. Ah, it's easy to think of about them. Ah, in terms off mounting and on mounting. These four functions currently highlighted to do with mounting on and um, melting so construct a component will mount component did mount and component will amount rotted with being loaded into the browser for the first time, or being removed from the browser and then these ones in the middle here they had to do with rendering so physical each time that the component re renders. Most of them aren't called on the initial Orender besides the actual render function. Uh, but that's still a lot to do with. So these are the ones that I have seen used most in practice. Now we've seen the constructor function being used already. We've seen render being used, and that leaves these other three guys component did mount. Should component update and component will amount, so component did mount. This is a good place, um, to set up things like, ah, asynchronous network requests. Um, stop any timers that the component needs things like that. This is just things that need to be in place or to get started before it actually gets onto the page. Should component update will be looking at should component update, you know, code. But briefly, it's a way off checking to see whether reactor should actually go to the trouble off, rendering our component in the dom. Because even though react is famously efficient at rendering, if we could avoid it, that's pretty good on Finally, component will amount. This is a place to tidy up any uncompleted network connections, cancel timers, stuff like that. But we are going to go and implement Should component update OK, so here we are in our code, sitting just above the render function for the calculator component. There it is. Calculator. It strikes me that I should make this a little bit bigger for you. There we get. Okay, so he's out, check about a component and it's a various function, and he is Renda, and we're gonna put should component update right here. And it takes two parameters next, perhaps, and next state. So at the time, that should component update is being called. We still have our old props in our old state available to us so we can reference the stock drops. This not state. And this is a great opportunity to check to see if anything important has changed. And if it hasn't changed, then foot is not appointed. Rendering anything on dumb. We indicate Orender should or should not occur by returning true or false. So now that we've got this function here, we just like return falls never render. That's what we're saying right here. And here we are in a house without giving a little follow reload and I can click. I'm clicking away on these things and nothing is changing, you know, calculator, because should component update is returning false. And if we go returns true, reload. And there we are, working as usual. OK, but that's not what we want to do. What we really care about is our display number, because that's the anything that who is really gonna indicate whether we need to re render or not. There's nothing else much that changes on the page. So we could say, if these thoughts that display number is equal to next ST dot display number, then turn up that Jane Fells else trick. Okay, so we say that that's all very well, but we can't tell the difference between, uh the browser updating and not updating if exactly the same value is going to be in our calculator display. So we better go and put in the annoying alert here and say not updating. Furrow's are like it. Tell you Good. Let's get back. Every here, do a reload. Okay, So if you say one Well, uh, equals to say, um four plus zero. And then we have that little alert saying we're not updating the browser. There was a zero there before. This is zero. There. Now, we're not gonna do any work except displaying this annoying a little I can't settle removed out of it. And so that's a very simple implementation or food component update to see whether ah, we could we should go to the bother of updating the browser or not. And, uh, there's a couple important points about should component update one is that the use of should component update will be changing in the future. Facebook have said that it will be treated as a suggestion in the future. I just did a court with my fingers suggestion so reactive my he decide that it knows better than you about whether something should update or not. Uh, mostly how that pans out in the future. I didn't. Other important thing to remember is that this could be a source of bugs because not like there's nothing else that could be a source of bugs in our code. But this one in particular can be because it's only gonna be checking props in state. And if you base your render on something other than props in state than this function is gonna be no use to you Because if you're getting data in your render from outside off the react a P I, um, getting the results of little network requests or some global dieter or something like that , then you can't really use should point out that to tell whether or not you need to render. So you're either going to base everything on props in ST in render or you're not going to use this function. 11. React coding exercise #1: I think, everybody. Yeah, it's time for some exercises. Air time in particular for coding exercises. You don't need a t Rex suit for that. So it is really two outstanding things that we need to do. One of them is Teoh. Fix this business where we do multiplication, say, and we click. The multiplication button display reverts to zero. A regular calculator wouldn't do that. It would just leave the eight up there, and then we top it number. We still get the result of that summit does. It may be expected to, but it's kind of gross that we have zero there before we do anything else. So, as an exercise for you, I invite you to implement a solution for that particular little problem. So pause the lecture. Have ah, think about and have a gala. That and, uh, I'll show you what I came up with once you restart the later. Okay, so here we are and Ah ha. What? He's seen a little Who? The site in her code. Um, my code. I could hardly ask you to take responsibility for what I right here. But now, initial state setting is kind of ignoring the fact that we've got some other state to take care off besides display number. And so I think we'll do is over and it's undefined. And I wanted offering one in operation I can't do again because this kind of lead into what we need to do right now. Anyway, So who is our update number? Here it is. So it's having Ah, I look at I can't display number and seeing if it zero and if it is replacing it with the new value, Otherwise it starts a pending value to can't display number, which is, you know, it was kind of OK solve the problem a bit for us, but we could do better, I think is appropriate to use thieve value off despite number two. Decide whether it needs to be replaced or appended to, because this is really a matter of way. We're up to your calculations. So I'm thinking we will have a little flag and I call it you number like Okay, that could be equal to false. But actually that would be true when we actually when the calculator was created, when the constructor here on we've got out and you have a flag said it's true. And so when we go to update the number instead of testing to see whether Spain number is zero, I will say this ST dot you from the flag. And if ah, we ah starting and you number then, yeah, we'll do the replace. If not, we'll do depend. And, of course, knowingly wants to introduce a flag. We go all state to take care off everywhere. Never mind. Okay, so what say you? The flick is now false. Another place that we need Teoh do something with new number. Flag is in prep Kout because this is where we reset our on display number. And so we're saying you now that Flug is now false. But, you know, we're not going to reset by number. Now we'll let it keep on displaying whatever it was displaying previously. Yeah, And so in this case number, Flug will now be I should be true. Not for us. Uh, and so up here we'll get down through here. Was having another flick is true. And we'll replace you. Just plain number. Even if it's displaying, tell me it's not Do it. So let's say that and see how we gotta reload calculator. And if he's a two multiplied by two, is equal to for excellent and then was a plus. Three said it that that's fixed our little problem with the zero reappearing after we hit an operations button. 12. React coding exercise #2: Okay, so now it's time for exercise number two. And in this case, we've got this C button down here, which is still kind of not doing anything useful and has the power to break out calculator say, if I was to Because that's pretty funny, actually. But really, we wanted just to reset our calculator as a new cutting exercise. Please go ahead and implement the sea button off course. Yeah, I'll be doing that right now, So please pause the later and, uh implement you say. But you can compare what you did to what I'm about to dio. Okay, so see, button time. Here it is in our calculator. Barely see report button presses still equal to update number. What I think we will do instead is we will. Um yeah. Look, I think we'll have, like, a default state function, because that's really what we're doing. We're setting everything back to how we would expect it to be when the calculator is first inst enshi ated. I think I'll just, like, totally tort about where I should put this function, uh, fun. And I put it right here, and we'll make it all night. Really? Because This is the This has got nothing to do with Ah, the current instance of calculator. Eso should be ecstatic function. Get well say default states who used to be a default state function. Now it's gone. And so what we'll do is we'll return something that looks exactly like this. Have you got that lot, right? Eso what we can do here now this is You can see the handy for us is we can come in here and say Jack, you calculator help. You laid her that? Ah, folks state. Okay. And, uh, and then, of course. Well, man extended out of control. Finally waited, Could weaken came down here after prep cow and do talk, we can say like, um do KLIA and we can say these stuff. That's that state. Uh, it are that for state. So because we know there don't default. State is a javascript object. We could just pass it through to set state in that way, and then finally, without c button, weaken Say, do I see it? Oh, but of course, let's not forget. Do you clear? It needs to be included, and he constructed Have this bound to it. We'll give that relied. Then we'll say five multiplied by six bacon. Steady and clear, doesn't that? Then let's take a look at what clear is doing cow que tour. All right, Um, I lordy calle que late or Okay. So this kid of nasty council 555 and clear and went back to 06 foot wide by nine. Ah, did I click? Multiply Sisi ni multiplied by nine Because that young for us, right? Anyway, so there we have it. We've implemented how clear button. That's it for the coding exercises for today. And I look forward to seeing you in the next picture. 13. I miss you already!: Well, that's it for the class. Everybody. I really hope you've enjoyed it and learn some useful information. I really enjoyed teaching it and I can't wait to see your class project. So please do remember that. Post them to the projects gallery. If you run into any problems during the class, let me know in the discussions area and I'll hop in and help you out as quickly as I can. Until then, I look forward to seeing you next time.