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

Brian walks through modifying the babel and eslint configurations to include a class properties transform so class constructors can be removed. With the constructor code removed the Details components becomes easier to read.

Get Unlimited Access Now

Transcript from the "Class Properties" Lesson

[00:00:00]
>> Let's go on to class properties. Now we're gonna do what everyone loves to do and we're gonna modify our Babel configs, so first thing I'll pop up your terminal really quick. I'm gonna say npm install -D @babble/plugin-proposal-class-properties@7.13.0 @babbel/preset-env@7.13.5 @babel/estlint/parser@7.13.4. We're gonna do something with our class component to make it a lot easier to write.

[00:01:12] Believe me, it's kind of annoying the setup, what did I do wrong here, spelled the wrong properties. Okay, so now we're gonna go set it up so that we can actually instead of saying, let's go into our details.js. Instead of having to do constructors and like if you can imagine like having a lot of state and one, like imagine if we were actually saying, in fact we probably should name animal breed.

[00:02:06] So on and so forth, right, it's annoying to have to do a constructor just for that. So I'm gonna show you a really cool shortcut, we can actually just make it so it just looks like this. Right, pretty sure. This reads a lot better, right, this is a little space around it maybe.

[00:02:38] But then we can look at the top of our components like okay, there's the default state of our component. Technically according to the TC39, the body that defines JavaScript. This is data java script but not everything supports it, yes we have to actually introduce a bubble transform that will handle that for us.

[00:03:04] In fact, I think there's an error here from yeah, essence, I don't know what to do with that right? Which is why we installed that bubble esl parser, okay, so let's go make that work, let's go into our Babel RC, So, we have this and then underneath this array, we're gonna add another preset of at babble/preset-m.

[00:03:37] And underneath that, we're gonna add a plugins, and that's gonna be @Babel/plugin-proposalclassproperties. So, we added the preset end underneath preset react, this is what transpires like futuristic JavaScript to two previous JavaScript. This is the one that looks at like the browser's list, right, and then here we're installing a specific plugin.

[00:04:22] So, a preset is a group of plugins, a plugin is just one transform so, that's probably something good to keep in mind. Here we're introducing a brand new plugin, which is the class properties, one that allows us to do that specific thing that we were looking at Okay, and then let's go D upset, estlint, and what we're gonna do is we're just going to add somewhere in here, maybe above the parser options, we're going to just introduce a new parser which is @Babel/estlint-parser, so, line 15 there.

[00:05:00] This is going to tell estlint, hey, before you read any of the code, run it through Babbel first. Up until this point, estlint was smart enough to keep up with us it was, it has its own Babbel config understands JSX. But once you get into really recent JavaScript features, it kind of loses its way so you can have to say like, okay, maybe use my babbel config instead of yours.

[00:05:30] Okay, so now if we go back into search params, sorry into results, no details. Now it's like okay, I got that, notice that there's no more error on line 5 here. And so now, that's when we got to take out all that constructor code. So, I'm a huge fan of this I do it every time that I'm writing class components.

[00:05:54] If you're not writing class components, and it's not that big of a deal. But if you're writing class components, it's a really nice thing to have.