Check out a free preview of the full Complete Intro to React, v7 course:
The "Class Components" Lesson is part of the full, Complete Intro to React, v7 course featured in this preview video. Here's what you'd learn in this lesson:

Brian demonstrates when and how to use the class components API. While many components are written with hooks, the older API of class-based components are still around and still useful.

Get Unlimited Access Now

Transcript from the "Class Components" Lesson

[00:00:00]
>> So the state of the project now is 08-react-router. If you need to catch up or want to see where we're at. We're kind of closing on react router for the moment. We'll do some other things with it, but that's as much as I'm gonna get into the depth on it.

[00:00:19] There are alternatives for the record have more minimalistic routers out there, the names are escaping me but there are others just search for like react router alternatives I'm sure you'll find a few. At Netflix we ended up writing our own I should say the web core team I didn't help you probably talked to the president about it I think he was on that team when I was there just something more minimalistic, right?

[00:00:46] We didn't want all the bells and whistles we just wanted it to literally navigate from page to page. And so if that's what you're looking for there are more minimalistic ones out there. Okay, we are gonna talk about class components now. Everything that you and I've been doing up to this point have been function components which are kind of like the direction in the future of react, and hooks and things like that, react was for the longest time not written like that.

[00:01:20] I remember when function components first came out, and it was like a revelation as like, my gosh, I just read a render function and I'm done. I was almost offended at the simplicity of it all. When I first start out there was a, so there we showed you react, create element there used to be a react create class and that's how we did it.

[00:01:40] And actually, I still wax nostalgic about the create class days because I, under the surface kinda pinning things together that was really nice that React doesn't do for you anymore. But partway through react switch to ES6 classes like ES 2015 classes, which are nice because it's kinda leaning into the platform and using the constructs of JavaScript, but it stopped doing a lot of very nice things for you.

[00:02:07] Anyway, we're going to show you how to do that [LAUGH]. So I'm going to say that there's this API that I'm about to show is not deprecated. It's not going anywhere. These will always be available, but you're probably going to write these way less now than you ever did before.

[00:02:23] But you need to know them because there's still lots of them out there and sometimes you have to read them this way. And sometimes you'll want to write them this way we'll kind of go over that as we're doing it. So I want you to go in here to details and we're going to make details instead of this being a function component.

[00:02:43] We're going to make it a class component so we're going to import component. Component from react. You just delete this and we're gonna say, class, details this extends component. Okay? We'll use params here in just a second so you can leave that import. So this is not a function anymore this is a class right?

[00:03:14] This is something that's built into JavaScript. If you've never seen them before it's totally fine. You don't typically use them on the day to day, most people don't write JavaScript in a object oriented kinda way please don't. Don't start I implore you as your future coworker to not start writing JavaScript in an object oriented way go write Java or something I don't know anyway so the first thing is I want to create some state on this, right?

[00:03:46] So typically I would have done use state with hooks, right? But you can't use hooks with class components. So you stay use a factor, use params or anything that uses use, you cannot use with a class component. Totally different way of writing code here now. So the first thing we're going to do is we're going to write a constructor.

[00:04:07] The constructor takes in props. And then the first thing that you're gonna call is superprops. Get very used to writing this. Anytime that you have a constructor, and a constructor is basically like run this function as soon as this class gets created. So as soon as someone creates an instance, have details run the constructor.

[00:04:32] This is like a reserved JavaScript word. It's not that React is doing this. It's that JavaScript in general does that. So the props is taking in the props of whatever the parent component is passing down to the child's component, right? So this is gonna be whatever the route is.

[00:04:46] Being passed from app, right? Super props means give this to my parent component so not parent component but parent class the parent class of details is component which is a React component, right? Basically what you're saying is you have to give the props to React or React doesn't know that you got the props which just messes with a bunch of stuff.

[00:05:09] If you have no props it doesn't really matter. But I just want you to get in the habit of anytime that you add a constructor and react to the first thing that you call a super props. Just like diagrammatically, just do it, you'll save yourself a bunch of time and pain later.

[00:05:28] Okay, then I wanna create my initial state. So this dot state equals loading true. So what's nice about function components and like cook based components is you never have to worry about this. And if, if anyone's ever taken a JavaScript interview before here, we love to ask what is this?

[00:05:52] Right, and it's annoying as hell and that's the way it is but in react. So, with class components, this becomes very component important because it's contextually how you manage the state and manage the props. So in this case, will be the instance of detail. Okay, So let's write the render function next.

[00:06:26] So I don't know why I'm putting spaces there, that's kind of weird. Function components have like their function body is the render function right with class components. The only rule of a class component is it must have a render function and the render function works just like the function component bodies that it's gonna get run.

[00:06:47] And it's going to return some markup. So here we're just going to say if this dot state dot loading, then return h2 loading Typically you'd put something like a spinner here or something like that, but nobody got time for that h2. Okay and then I'm just going to show you the way that I would do this which is I would destructure here and say const, animal breed, city state description, name equals this start state thing here and no, that's fine.

[00:07:35] Yeah, that's fine, okay. But you could totally go around and say this dot state dot animal, this dot state dot breed this dot state dot city that just gets old, right? So it's nice to do structure and then it makes the render code look kind of nice. And then here you're just going to return your markup.

[00:07:56] Details and then nothing here should seem too surprising to you. Another div, each one will put the name here. So like I was saying before, instead of saying this, you could have said this, dot state dot name here, like this. Whatever you find more appealing go for it I just like making this little as the least dense as possible it can be then h2 here and we're just going to do Animal and then I'll put an M dash again or minus or whatever you want breed.

[00:08:43] City, comma, state like is that.
>> Is the best practice to only deconstruct the elements you're gonna use?
>> Yeah well, and as you can see here, yes, Linda's yelling at us right now, yeah, in general, you just want to be concerned with what you're concerned about and ignore everything else.

[00:09:12] It's life advice too. [LAUGH] Okay, button here and we're gonna say adopt name. And then Here we're gonna put the description of the animal. Okay, so that's a render function. You can see this looks really similar to what you just put in a function component, right? That's intentional, I'm gonna just reiterate again right now, you cannot use hooks here.

[00:09:58] So if I try to do use params here, it'd be like, yeah, no, you can't do, I think even, Yeah, use params cannot be called in the class component, right? So it's even smart enough to tell you that you can't do that. I'll show you in a second how you can.

[00:10:16] And it's Pretty obvious if you think about it.