This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "React.createClass" Lesson
[00:00:00]
>> [MUSIC]
[00:00:04]
>> Brian Holt: Let's talk about state. People are always surprised they a waited this long to talk about state and react. If you go to the tutorial, I believe it's one of the first things they teach you about. And to be totally honest, it's one of the more useful concepts in react.
[00:00:19] But I also want to show you that you can make fairly large and complicated apps with no state whatsoever. Our app right now has zero statefulness to it, right? And that's really powerful because state causes bugs. Like that's just like the end of sentence and it's particular you talk to any functional programmer they're going to say like the state is that is the devil.
[00:00:38] Right? Not going quite that far. Because UI development is inherently stateful to some degree. You can't truly escape it. Something must be keeping track of state at some level. But the point is to minimize your surface of state keeping and that's exactly what we've done so far. So now, we're just going to start introducing statefulness to our app.
[00:01:02] So, we're going to make a navigation bar. Thank you, person for asking that. I don't know, I didn't see who it was Faun. Thank you, Faun for asking that. Hopefully I'm saying your name right. Okay, so inside of dif container inside of search. Okay, so let's go to search here.
[00:01:27]
>> Brian Holt: And, this is me inside of container and above shows. Okay, so here.
>> Brian Holt: And we're gonna put a header className equals you might have guessed header.
>> Brian Holt: Inside of here, we're gonna put our branding cuz marketing and SCO and all those terrible things you don't want your product manager to talk about.
[00:01:59]
>> Brian Holt: And we're gonna put an input here, className, ='search-input' type='text' placeholder='Search' />. Okay, you wanted to look at that the way it looks. Click save.
>> Brian Holt: Come back over here. Refresh, should see something like this at the top. Nothing too useful yet. I mean, you can type in it but nothing's listening for those events so nothing cares yet.
[00:02:37] I thought we have a nice fixed scrolling header there.
>> Brian Holt: Cool, so now that we have that in place. So far, we've been using exclusively what have been called, well I mean recently since the beginning of the class stateless function components. Right, remember that? When we switched from the create class to this.
[00:03:05] We haven't really looked back since. You actually now have to go back, right, because we're about to introduce state, thus we can't use stateless components, right? Hopefully that makes sense. [LAUGH] So there's actually two ways to write state for components there is the create class which we looked at already.
[00:03:25] So, let's actually start by running that since that's more familiar to you right now. So we're going to change this to be whatever, do it this way equals react.createClass.
>> Brian Holt: Okay and then this is ultimately gonna wrap this down here. Okay, and then this has to be inside of a render method.
[00:03:53] So render-
>> Brian Holt: And then indent this one more, two more, actually and we're going to return this.
>> Brian Holt: Okay. So I just wrapped this in create class. I put a render method in it and then instead of the render method I return all of that.
>> Brian Holt: This should look pretty familiar right like we already did this once we just haven't done it for a while.
[00:04:46]
>> Brian Holt: Questions about that? I mean you can save this and if we look over here that's just fine. Refresh it. Nothing changed. Everything's okay. You wouldn't expect to say anything different.
>> Brian Holt: But now this allows us to track state. I'm gonna go ahead and show you the other way.
[00:05:05] And it's up to you to decide which one you like better. Is anyone familiar with ES6 classes? Yeah, so we can say, class Search extends React.component.
>> Brian Holt: And now this also works. Now, there are people that really, really don't like react components. Because if you're coming from like a Java world or something that has more classical type inheritance.
[00:05:36] This looks and feels familiar and it's lying to you. [LAUGH] This is actually still a JavaScript prototypal inheritance. So when that bites you in the ass, it bites pretty hard. So just be aware this is not Java. [LAUGH] It says JavaScript, it is not Java. This also has some drawbacks to it.
[00:05:55] Namely, this does not have auto-binding, and we'll get to eventually later what auto binding means in react, so we'll talk about it, whereas the other syntax does. So, I think my notes are all in the ES6 classes. I think in the stick with this. I think it's a little bit more clear especially for beginners.
[00:06:15] Does anyone have a preference? Either way. Okay, cool.