Complete Intro to React v4 Remove Class Constructor with Babel
This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Remove Class Constructor with Babel" Lesson
>> Brian Holt: So I wanna show you a nice little nicety about working with React. This constructor thing is kind of burdensome, and it's also burdensome for other reasons that I'll show you later, but it'd be really nice if we could just do something like,
>> Brian Holt: Like this.
>> Brian Holt: Something like that, where you could just define state as like a top level property of a class.
>> Brian Holt: That's a lot. I'll give you a second
[00:03:12] Babel plugin transform class properties is the thing that I just showed you. That allows you to do top level properties on classes. And bable.present-react allows Babel to understand JSX.
>> Brian Holt: Okay, so I'm gonna install all of those. It should take a seconds, it's a couple libraries.
>> Brian Holt: Okay, so we got all of those.
[00:03:38] Now, I want you to go create a new file and call it .babelrc. This is not going to live in the source directory, it's gonna live in the root directory of your project next to package.json, next to esn.rc.json, all of those, so .babelrc.
>> Brian Holt: Okay?
>> Brian Holt: In babelrc, we're gonna give a couple of top-level properties.
[00:04:08] One of them is presets. And we're gonna give it react, and then we're gonna give it an array. This one is gonna be env. This is the weird way Babel that does its configuration. So I need to get past properties to env, that's why.
>> Brian Holt: And I'm gonna do targets.
>> Brian Holt: Browsers. So the cool thing about babel-preset-env is I tell it hey, just target the last two major release of all browsers and then, as they release new browsers, it'll be targeting newer and newer browsers. So you'll be transpiling less and less of your code. Right? Because if you say, Target IE 10, it's going to transpile everything, right, because it's an old browser and it doesn't understand all the new stuff.
[00:05:21] So, that's why in general it's better to say browsers and then just say last 2 versions.
>> Brian Holt: If you want to get like really sophisticated with this, you can actually download the Google analytics from your page, from your website, and feed it into EMV and it will actually transpile it for your users, right?
[00:05:46] If you have users that are all users, like new browsers, it'll transfile very little of it. But if you have a bunch of IE 11 users, it'll transfile a lot of it for you. And just handles it automatically.
>> Brian Holt: So you just say like target in 99% of my users and it'll cover 99% of your users.
[00:06:05] Just pretty damn cool.
>> Speaker 2: It's like a hook.
>> Brian Holt: You have to somehow dump a json object into your environment that babel can read at bill time. If you go look at babel present env's page it'll tell you how to do that. Okay, last thing here is when you plugins and we need our one plugin that we wanted which was transform-class-properties.
[00:06:39] And we can save that. So now we've configured our babel. This is largely the same thing as what we had before. Except now we can do class properties. So, just so you know, I have presets here and I'm just putting react. It's implied that I have babel preset react, so that's where that is coming from.
[00:07:05] This is babel-preset-env. I think you can actually leave these, if you wanna be explicit. But Babel just makes it into, if it's in presets, it's babel-preset., right? Same thing with here, I can have babel-plugin-transform, which is what we installed off of MPM, but it's implied.
>> Brian Holt: Okay, I think the last thing that we need to do here, we need to go and help eslint [INAUDIBLE] a little bit.
[00:07:36] So go to your eslint.json.
>> Brian Holt: And, as another top level thing we need to give it a parser. Parser and you just need to say babel-eslint. This is going to tell eslint hey before you try and lint my code you're gonna have to use babel as your parser.
>> Brian Holt: Okay, questions so far? So the only thing I added here is this. The order's not important, so. And then we did this babel RC file, as well. So now that we've done that, we go into details.JS. Notice this isn't airing out anymore. Now eslint understands this and so does parcel.
[00:08:34] So we don't have to have constructors anymore. We can just make it a top level class property. And I'll say this is actually pretty common with the react ecosystem at the time or right now. This is what people are doing. Because it's shorter. It makes more sense. We don't have to have constructors anymore.
[00:08:50] So now, if you do this, you almost never need to have a constructor.
>> Brian Holt: Okay, so let's go make sure that all of that works still, so I'm gonna say npm run dev.
>> Brian Holt: I don't know why that took a second but it did. I think I had to clear my cache.