Check out a free preview of the full Complete Introduction to React (feat. Redux and React Router) course:
The "Babel" Lesson is part of the full, Complete Introduction to React (feat. Redux and React Router) course featured in this preview video. Here's what you'd learn in this lesson:

Babel is a JavaScript compiler that allows developers to write code with new JavaScript features and syntax while having it compiled to currently supported code for use on the web. Brian walks through a few configuration options for Babel and updates the NPM ‘build’ script.

Get Unlimited Access Now

Transcript from the "Babel" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Brian Holt: We're gonna talk about Babel now because we're gonna move away from using just raw JavaScript versions of React. We're gonna start moving into JSX, and I think most of you will find this to be pleasant eventually, though initially gross. [LAUGH] But I recommend that you keep an open mind.

[00:00:22] I would say almost every major company using React uses JSX as well with very, very few exceptions. I don't know a bunch of smart people using it, so I think it's a good reason to give it a shot. If you don't know about Babel, Babel is a fantastic tool used to be called 6to5 that basically takes the future looking JavaScript and compiles it to current JavaScript.

[00:00:51] Why that's really cool is, you can start running, writing things off, like using advanced features of JavaScript today, and that it gets compiled in such a way that browsers can understand using today's syntax of the futuristic JavaScript, right? For example like Aero functions, right, ever like most people use their own functions fine kind of appealing, and you can use those today.

[00:01:17] Despite the fact that for example, the Android stock browser definitely does not support Aero functions and probably never will, right? You don't wanna cut those people out just so you can use fancy syntax in your new code, so this is kind of the happy medium that you have.

[00:01:30] You can write it and then it gets compiled to such a way that older browsers can understand it, so we're gonna be using Babel 6. A lot of people complain about Babel 6, the nice thing about Babel 5 and previous is it just worked out of the box.

[00:01:45] You can install Babel, type Babel run, and it just worked, right, just kind of like standard does today. Babel 6 need a little bit more difficult, now everything is a plugin So you can include things not include things. Ultimately, it's a positive change but it's a little less beginner friendly.

[00:02:05] So the first thing is we know we have to configure Babel to work correctly. So what we're going to do is we're gonna go over to our project then we're going to create a new file inside of the root of the project. ie., not in the JS directory and call .bubblerc that dot is important so make sure it's there.

[00:02:30]
>> Brian Holt: And again that it gets saved at the root directory of the project okay. It's gonna say hey you're using a dot just say yes I'm sure I wanna use a dot
>> Brian Holt: Okay? And babelrc files or just JSON. So we're gonna give it two presets.
>> Brian Holt: One's gonna be called react And one is going to be called es2015.

[00:03:06] So, Babel has a concept called a plugin, right? I think we briefly said that. And a plugin does exactly one transformation. It takes an arrow function and makes it a normal function Or you have the spread operator and that turns it into something that works in es5 right?

[00:03:26] However it would be really annoying to include every es6, es2015 plug in by hand because it's really big. There's a lot of stuff in es2015. So they added the ability to roll them up into big presets, right? So we can include and entire bundle of plugins. So that's what's happening here that's what a preset is.

[00:03:49] So we're including everything we need to do react transformations and we're are including everything that we need to do es2015 transformations. Now, when you're doing production code. Don't include all of es2015 because it's actually pretty big, it's gonna include all the polyfills for every feature in 2015 Chances are you probably only use maybe a tenth of it, a fifth of it, not very much of it.

[00:04:15] For example a lot of people don't use generators and the runtime to get generators to work correctly is actually fairly large. It's a library called regenerator and it's really big. And so you don't wanna be sending that down to all of your clients if they're not to use it.

[00:04:30] So this is great for messing around in development. It's not good for production. When you're doing it for a production go actually include the individual plugins that you need. Okay so again this is in .babble R.C. make sure this is valid. json which means make sure these are double quotes.

[00:04:52] Single quotes don't work in JSON just in case you're wondering. Yeah there you go just need that. And just to show you like these are not magical it appearing out of the ether. They're actually already in your package dot JSON that you installed there earlier. So you see babel-preset- whatever, right?

[00:05:13] es2015-react, right? So if you look over here in your babel R.C. You just have to refer to everything after babel- preset- something so -react-es2015. That's where that's magically appearing from.
>> Brian Holt: Okay? And make sure you have saved that. Questions so far? Feel pretty good about that? Cool. So you can actually read this straight from the command line.

[00:05:49] But we're already using Web PAC to build our project. So we're actually just gonna have Web PAC as an extra intermediary step and run it through our babble process for us. Web PAC has a concept called a loader, and a loader basically is just this intermediary step that you want to do while it's doing its transformations for you.

[00:06:09] Cause out of the box all webpacks wants to do is just bundle your files together and give you a bundle of all of your files. But you can have it do a bunch of other things like run your lint for you. You can have it run your tests for you.

[00:06:20] You can have it do babble translation for you it can do a lot of pretty awesome stuff. So again if you look at your packaged dot json and you come down here. You can see that in your dev dependencies we have a Babel loader and you do need that.

[00:06:38] We have one here called Jason dash loader that's the the syntax for maybe the the standard it's blank slash loader and that's something that's going to Web package just for For future reference. So we're gonna use the Babel dash loader right now. So first thing we'll gonna do here is we're gonna to go over to our, we're already impacts touches, so scroll up to find your scripts, okay.

[00:07:06] All we're gonna do here is web pack and we're gonna add an extra little bit right here in the middle of it I'm gonna say dash, dash, two dashes right. Module dash bind, okay. That's one dash, right there. In case you can't see that. Okay, and then using single quotes.

[00:07:31] We're going to say, js=babel. That's basically telling it anytime you run into a J.S. file I need to run that through Babel. That's the, what's going on underneath the hood. Okay, so we decided that part, everything else remains the same and questions about that? Okay, so let's go ahead and save it, come back to your command line and we're just going to run build again npm run build and this is.

[00:08:20] This is gonna take a decent amount of time more for it to happen. The reason being is now it's running everything through your transpolation process and it's not exactly a task process. But now, everything is also being run through Babel. So now we can go crazy and use all of our favorite ES2015 feature, the S6 whatever you want to call it.

[00:08:44] We can use anything with JSX which will do momentarily but now that we have this intermediary build process where. That's just built into our build pipeline and we can do whatever we want with it.