Complete Intro to React, v5

Complete Intro to React, v5 Configuring Babel for Parcel


This course has been updated! We now recommend you take the Complete Intro to React, v8 course.

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

Brian demonstrates how to use Babel and Parcel together by creating a Babel configuration file and changing the default parser of the existing ESLint configuration file. The application is configured to accept proposed JavaScript implementations as well as the landed standards.

Get Unlimited Access Now

Transcript from the "Configuring Babel for Parcel" Lesson

>> Brian Holt: Now I wanna show you how to do something, in my opinion, pretty cool here. This is a bit burdensome, to have to write out a constructor and construct a state like this. It also is, TypeScript can't figure this out, right? And so there's a better way of doing this that I wanna show you really quick, to instantiate your state.

[00:00:23] If you have control of your Babel config, then you can do this. If not, then you may not, so it would be super useful if we could just do state = { loading: true }.
>> Brian Holt: Wouldn't that be a lot nicer, if you could just do it that way?

[00:00:48] Well, you actually can. But the thing is that this is actually a proposal for a JavaScript, and it's not actually a real thing quite yet, but you can make it work. So this will land in JavaScript, I think it's actually going to land in 2019 or 2020. So I'm gonna show you how to modify your Babel config, if you have to, with React.

[00:01:14] So the first thing I need you to do is open your command line here.
>> Brian Holt: So you can see here it says, Support for the experimental syntax 'classProperties' isn't currently enabled. And we're just gonna go enable that really quick.
>> Brian Holt: So I want you to do npm install -D, and you have to install quite a few things to make this work.

[00:01:40] babel-eslint @babel/core @babel/preset-env @babel/plugin-proposal-class-properties. I don't name these, I'm very sorry. And @babel/preset-react.
>> Brian Holt: You're all done typing that now? I'm just kidding, it's a lot to type.
>> Brian Holt: So what's going on here?
>> Brian Holt: All this stuff is built into Parcel, and Parcel has just been handling this for us.

[00:02:30] However, it gives us the escape hatch that if we have custom needs, which in this case we do because it doesn't have this one, the @babel/plugin-proposal-class-properties ,that we can say, hey Parcel, use our config instead of your config. Their config is basically like, let's target modern JavaScript, basically, everything that has already shipped with valid JavaScript.

[00:02:58] In general, I don't say ship to production experimental JavaScript, except I'm okay with this one because this one's definitely gonna land. In fact, I believe it has already landed, and if I remember reading correctly, last week it landed.
>> Brian Holt: But in general, that can bite you in the butt.

[00:03:17] So we'll install that.
>> Brian Holt: It should take a second to go through and load all that stuff.
>> Brian Holt: And I guess while this is finishing, there, it finished.
>> Brian Holt: So I want you to create a new file here. And I want you to call it dot, not inside the source, inside of adopt me, the root directory the project.

[00:03:52] Call it .babelrc.
>> Brian Holt: Okay, yes, used on.
>> Brian Holt: Okay, inside of here I want you to put presets, and then we're gonna put two things here in presets. One of them's gonna be, @babel/preset-react. And one of these is gonna be @babel/preset-env.
>> Brian Holt: Under that we're gonna put plugins, and inside of that we'll put @babel/plugin-proposal-class-properties.

>> Brian Holt: So let's talk about what those two things are. presets babel react is brings with it all the things that you need to transpile React, right? So in understanding JSX, it also brings Flow. Not that we're using Flow at all, but that is included in the preset for React.

[00:05:08] It's a bunch of transpilations around JSX. @babel/preset-env, this is a pretty, and I should mention that, a preset is a group of plugins, right? So in this case we're bringing one transformation, but our preset is a bunch of plugins, which is a bunch of transformations. This will transpile your code for the environment that you specify.

[00:05:35] So luckily, you and I have already specified an environment, and that is in our package.json. Remember when we did this?
>> Brian Holt: So this preset-env is gonna look at this browsers list, and say, cool. I'm gonna transpile all the JavaScript so it works in these browsers.
>> Brian Holt: So that won't be very many things because, cuz of JavaScript works in these browsers because these are very very new browsers, okay?

>> Brian Holt: But there's pretty cool stuff you can do. You can actually import your Google Analytics into preset-env, and it will actually transpile it specifically for your users, right? So you can say, hey, here's my Google Analytics. Transpile it so that 99% of these people can see my website.

>> Brian Holt: That's built into the browserlist package. We're not gonna do that today, but it is possible. Okay, and then the plugins here, this is what's actually going to allow us to do that syntax that I just showed you, okay? I need you to do one more thing here.

[00:06:38] So save this to your .babelrc. I need you to open you .eslintrc file, and we have to add a parser option. So parser, and I need you to put babel-eslint. So up to this point, eslint has been able to understand all the code that we have been using.

[00:07:03] But now we've added a new experimental feature that eslint would choke on, so we have to say, use Babel to understand this code. And that's all this does.
>> Brian Holt: Now, this might seem like a lot of ritual to use one feature, but I typically wouldn't do it just for one feature like this.

[00:07:26] But this is actually to be more instructive on how to use Babel and Parcel together.
>> Brian Holt: Okay, so now that you've put in that line 17 there, let's go back to our SearchParams page. And now, not SearchParams, we were on Details rather. Now it's fine with this.
>> Brian Holt: Pretty cool, right?

>> Brian Holt: Now, if I'm not mistaken, you should be able to say this.state., and then it knows that you have loading on there. That's because now TypeScript can understand your component, right? Notice it doesn't actually know that you have media, and breed, and load, and some of these other ones, because we didn't instantiate it up here.

[00:08:25] But TypeScript has the ability now to go and run on your code and understand, okay, you have these things on your component. I can autocomplete these things for you. So if I want in here and set name: blink like that, just set and instantiate to be some sort of default thing.

[00:08:41] That means I can come down here and say, this.state., and then notice now a name is in here as well.
>> Brian Holt: It's the magic of TypeScript, and VS Code for that matter.
>> Brian Holt: We'll get to that later, though. There's a whole section on TypeScript, so.
>> Brian Holt: What if it doesn't work?

[00:09:17] I'm just kidding. [LAUGH] Let's see what happened here.
>> Brian Holt: This .state.return, did I leave a this.state in somewhere? Yeah, that's weird.
>> Brian Holt: There it goes. That was just for me showing and stuff like that, prettier than just wrap it onto that line.
>> Brian Holt: Cool, so yeah, now that's still working with the public class property.

[00:09:51] It's actually what that's called.