This course has been updated! We now recommend you take the Complete Intro to React, v7 course.
Transcript from the "Class Properties" Lesson
>> 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 @email@example.com @firstname.lastname@example.org @email@example.com. 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: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: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: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.