Check out a free preview of the full Complete Intro to React, v7 course:
The "Class Properties" 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 how to use the new feature in JavaScript, class properties, to make code easier to read by avoiding using constructors to set the initial state for class components.

Get Unlimited Access Now

Transcript from the "Class Properties" Lesson

[00:00:00]
>> Let's talk about class properties. Pretty short little section here. I'm gonna show you how to make class components a little bit easier to write. So there is a future spec of JavaScript which is gonna get added called class properties. I don't even know what stage it is.

[00:00:20] But anyway, it's a great proposal. So I'm gonna show you how to set that up today in your React project. In general, I don't advise you to add experimental JavaScript to your projects like your long term maintenance projects. And to give you a good example of that, decorators, right, we've been talking about decorators in JavaScript for years and basically as long as I've been in the industry.

[00:00:43] If you're not familiar decorators are a really cool feature in languages like Python, where you can, kind of augment the ability of classes and functions with a statement. I know a company that added decorators everywhere inside of their codebase. And then they changed the way the decorators were gonna work and then they changed it again.

[00:01:02] And so they had to keep refactoring their app to keep up with how the spec was changing and that sucks. So in general do not do that except this time. [LAUGH]. I don't think this one's gonna change it hasn't changed in a while and it's coming I wish I just look up, what this is actually in terms of the stage.

[00:01:30] It is, so I think it got added. It might even been added this year. But still, sometimes I'm gonna show you how to do this. So in the case in the future that you want to add additional Babel plugins that this is how you do specifically with parcel.

[00:01:46] So again go ahead and copy this statement right here NPM install-D@babble/plugin-proposal class properties at 7.16.7. We're gonna stop our server here for a second paste that in there. Then run our server again. Okay, so once we've done that, then we need to make a dot Babelrc file, which we're gonna do really quick So when I very first started teaching this class, I don't know why this is upset.

[00:02:28] That's fine, I don't care. When I very first started teaching this class, we had to set up Babel totally ourselves. It was a process we had to learn like about the internals of Babel and all that. And in general, parcel just hides all that from you. What all Babel is, it's a code transformer, it takes code A, it applies some transformation and you get code B out the other side.

[00:02:54] It's called a transpiler as you might imagine but it's built into parcel for the most part, you don't have to care what it does. But that was what's doing the JSX transformations for you. So like removing all that making that understandable JavaScript, it's what's taking your futuristic JavaScript and transpiling it to IE 11 compatible JavaScript.

[00:03:15] It does all those kinds of translations for you. So what we're doing is we're augmenting it's ability to do transformations for a brand new feature of JavaScript called class properties. So, we're going to add this Babelrc here. Again, you can just copy that if you want to. I'm gonna type it out just so you can see it.

[00:03:36] Let me bring up my notes here. And you're gonna put in plugins. This is gonna be an array and you're gonna add @babel/plugin-proposal- class-properties like that. So a plugin is like a low level concept in Babel basically what it contains is a contains like a detector to say when you see something that looks like this, transform it so it comes out like this.

[00:04:20] So, it forms your code from the futuristic JavaScript to the past JavaScript so that older brothers can understand. Okay. There's also things called presets. So for example there's ones called preset-n that your code is already being run through. But because we're not overriding anything with it we don't have to like, do anything to it.

[00:04:45] Because the way this works with parcel is it merges your Babel RC with their existing Babel RC and that would include things like preset react. It includes preset-env and a bunch of other stuff. Okay, so now I want you to bring back up your details page So instead of this part, which is kind of gross looking, we can now just say state equals loading true like this.

[00:05:21] And then we can get rid of this constructor altogether. That is significantly cleaner in my opinion, right, you don't have this all this cruft you'll have another function up here you're just setting a class property on details of loading true. These are basically doing the same thing. Makes sense?

[00:05:47] The other thing that's really nice about this is TypeScript knows how to type it now. So you get all these implicit TypeScript type things out of it for free. We'll go over that in Intermediate React. Okay, so if you're gonna be writing any amount of class components, I suggest adding the class properties transformation.

[00:06:16] Because this looks really nice. But yeah, this particular thing is what you would call a class property, the state equals blah. That sets an instance variable on the incidences of the class. Cool, any questions about that?
>> So, we can do the JavaScript. Can we do the JavaScript thing of kind of declaring variables that don't even exist yet, to be added onto a component or a given class?

[00:06:46]
>> I mean, you could do whatever you want, you could say, something like that, right? And then down here, you could refer to this as this dot lol, right? So that's the connection there. And you can change it later too, I can say. Right. So whenever this details class gets instantiated that instance will then have a this dot lol on it it's not any more complex than that.

[00:07:26] Okay. That's it for that part. So, I wanted to show you a bit more about, managing state inside of a class component. So I want you to create, we're gonna make like a little like a carousel of photos for this page. And we're gonna do that with a class component.

[00:07:53] You already know how to do that with a function component that you could just use, like use state and all that kind of stuff and it would work perfectly. And again, that's typically how I would do it now, but I'm gonna show you how to do it with the class components, so that when you need to, you know how to.

[00:08:08] So make a new file called carousel. And I've now had to write carousel enough times that I know how to spell, It took a few times. Here we're gonna import component. From react, by the way, I'll just to show you. So I will frequently see people do this instead.

[00:08:35] And this is totally valid as well. You'll just say import react from react. And they'll say, class carousel extends react dot component. Some people find that preferable I have no judgment there. It's totally up to you how you wanna handle that. I just like in importing individual things at again, just kind of out to have it.

[00:09:03] Okay, export default carousel like that. And then we're gonna make a little component here that does exactly what we want to. I'm gonna switch this to be two spaces because it just drives me crazy every single time. Okay, so first thing we're gonna create our state. So the first bit of state we're gonna have what is the active photo being shown because if there's like an array of like 10 photos.

[00:09:29] We're gonna show the first one first right. So active zero and then we're gonna do something kind of interesting here. We're gonna give it default properties so let's say you instantiate like a new carousel but you don't give it any pet photos whatsoever. All right. What do you want it to do?

[00:09:48] Do you want to not show do you want it to show some sort of placeholder? In this case we want it to show some sort of placeholder right? So we're gonna say static default props equals images and then we're gonna give it this array of like a placeholder.

[00:10:12] Pets-images.dev-apis.com/pets/none.jpg. So let's talk about state. Notice that one of these has static and one of them doesn't. Why? I mean like I've tried to explain this a couple of different ways because it is a bit strange. That we're going back to what's the difference between a class and what's the difference between an instance, right.

[00:10:45] So every carousel will have its own state that belongs to every individual carousel. If I have five carousels render to a page they will all have different state.actives, right. This one can be displaying photo one this one can be displaying photo zero this one can be displaying photo 15, right.

[00:11:06] And they're all individual have their own state that manage their own state and they have no concept of each other, right. Default props is all carousels universally share one default props, right? Because this is not a mutable thing. This is not gonna change ever. It's just for default props like when you start out, this is what the default props are.

[00:11:27] So they can all share one instance of that, right? So they all have the exact same, it's actually literally the same array. They're all pointing. They come back and say, console.log.carousel.default props, right? These are all going to be precisely the same thing. And again, notice that they're on the instance or like the class carousel, not an instance of carousel, right.

[00:11:55] This would be different than example of saying like const x = new carousel, which you wouldn't do this with react component. You would just do this with a JavaScript class. And then you say x.state.active, right? So this is now an instance variable of this new carousel that I created whereas this one belongs to all carousels generally.

[00:12:22] Have explained that in sufficient amount of roundabout ways to understand make sense. It's weird, that's why I'm kind of dwelling on it for a second.