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
[00:00:00]
>> 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.
[00:00:39] Wouldn't it be nice if we could do that? Technically, with today's JavaScript in a lot of the browsers, this isn't technically feasible, but I believe this is either stage three or stage four now. Then this is actually a new standard for JavaScript. If it wasn't 2018, then it's gonna be in 2019.
[00:00:56] I think it was 2018, so I think this is actually real JavaScript now. But we need to go tell Babel to accept this. The unfortunate thing is, so far, Parcel has been managing all of our Babel configuration for us. So now we actually have to, if we wanna include this Babel transformation we have to go write our own babble config.
[00:01:24] Which is not a big deal, I think its worthwhile most of the time when I'm working on a project parcels babble configuration isn't enough for me. So, what is babble? Babble is a transpilot for your code. What's taking your code from JSF to normal JavaScript. That's babble. It's a transpiler, it transforms one set of JavaScript into a different set of JavaScript.
[00:01:47] So we're able to write futuristic JavaScript and get JavaScript that works today in today's browsers. So I want to go to, yeah, it's gonna say here. I don't understand this, that's what it's saying right now, but we can make it understand it. So let's go here, and I want you to run this npm install -D babel-eslint babel-core babel-preset-env babel- plugin- transform- class- properties, and then babel- preset-react.
[00:02:42]
>> Brian Holt: That's a lot. I'll give you a second
>> Brian Holt: Babel-eslint will allow eslint to use babel to transform your quote so it can read it. Babel course the actual thing it does is transformations. Babel present env is what takes your future JavaScript and transpiles it to current JavaScript.
[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.
[00:04:42]
>> 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:05] But like the latest version of Chrome understands most of this stuff out of the box. So it won't transpile all of it. You wanna transpile less of it because your code bundles will be smaller, and in theory they can be faster because the browsers can actually handle the code interior in C, rather than in JavaScript.
[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.
[00:08:07]
>> 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.