This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Babel" Lesson
[00:00:00]
>> One of my favorite tools again being an infrastructure is Babel. I just like it. Probably a glutton for punishment, I suppose. But it's a transpiler tool. It takes code that looks one way and it makes it look a different way. And that's really the some of the store it's not a compiler, right?.
[00:00:14] You're not taking like a C++ source code and compiling it to a binary. That's compilation translation is, I have a set of source code and I'm making it just different source code. So, Babel is already working for us underneath the hood. One of the things that it does for us, you can write things in es 2021, and it'll transpile Harder for you to IES 2015.
[00:00:36] So it still works in Internet Explorer. However, we have some advanced needs. And so typically you wouldn't have to mess with this, and I would say probably soon with parcel too, you won't have to do this. So if you're using parcel tool, you can just ignore this section.
[00:00:51] But if you have to modify Babel, you can just drop in the Babel RC file, and parcel will automatically read that for you. And change how your Babel is working. So I want you to make a new file here. In the adopt me directory. Called .babelrc. So you can see here outside of my source directory I have a file called .babelrc.
[00:01:18] And we're going to add just a little bit of configuration, to make it use the latest version of JSX, which is something we're about to start doing. So here, you're gonna make an empty object. We're gonna do presets, and it has a array. And the 1st one we're going to put in there is @babble/preset -react.
[00:01:45] This is actually gonna be inside of an array itself. Okay, inside of that array with it is gonna be an object. And we have to put run time Colin automatic. Let's make this a little bit better format, and it's kind of a mess to configure Babel. I don't know why they chose this style of configuration.
[00:02:21] But we have presets which is a list of presets that we have in there. This will be getting merged with the ones that parcel has. A parcel has other presets that it's putting in there for you like one called M, which is very important. We don't have to read Eclair that here.
[00:02:34] We just have to say like here's the things that we have that are different. Here we're gonna bring in this babelrc preset react which again, it already has. But we need to have this configuration of runtime automatic. This allows us to do the most recent version of JSX.
[00:02:55] Which I'll explain to you once we start seeing it, but this is important for us to get started. Okay, the next thing that we need to do, I'm gonna stop my server. You can stop your parcel server at any time by hitting Ctrl C. And we need to do npm install -D @babel.
[00:03:20] /core@7.12.16.@babel/preset-react@7.12.13. So we have to give it the node modules that it's going to use to do that translation. Okay, so now, if you go look at your package.json, you'll see here that we have babel and babel preset-react. And now we have via this babel RC, every time that parcel runs, it's gonna be using this configuration for our presets.
[00:04:15] For react, we'll modify this more in the future here in the course. But for now, this is enough for us to get started. We've basically set up what create react app sets up for you, but it's going to be catered to our needs. Exactly. And now you're going to understand every tool that's gone into your tool chain.
[00:04:32]
>> I have a quick question about one of the files generated in the dist folder?. What's the dot map doing exactly?.
>> What Babel are. Sorry, what parcel is doing for you is you have this dist directory. And this is the files that you would actually send out to production, right.
[00:04:51] And so you can see here they have long funky names and all that kind of stuff. But you notice that like your index, HTML, references, everything correctly. This is all the stuff that parcel is generating for you. So the 1st answer to your question is you don't have to care.
[00:05:04] [LAUGH]. It's actually not important to you, but to answer your questions, they have these funky map files. Because we're doing this in development mode, what we wanna be able to do is inside of Firefox or Edge or Chrome or whatever. We wanna be able to see the source files, not the distribution files.
[00:05:23] And the map files reference the source files. So that when I'm looking at the code inside of the dev tools in Chrome or Firefox. It's showing me the real source code and not the generated code. They're called source maps.
>> I mean coding.
>> Yes, that's precisely what they're for.
[00:05:38] You should not ship these to production. Right?. Otherwise, you're linking off your source source code. Last thing that I promise we're going to start writing some more react, I promise. I want you to go back into your package dot JSON somewhere in here, I'm just going to put it last.
[00:05:58] I want you to create a property called, browsers. Browser list. Make sure that as browsers with an S I always forget it. It's browsers Plural list. This is how you identify to babble and parcel. I'm targeting these browsers. So this is an array of all the browsers that you want to target.
[00:06:29] Because this is just a development course, and it's just you and me working on this and we're not shipping this to production ever. I'm just gonna say last 2 chrome versions, which is to say, very new JavaScript don't transpile for really old browsers. This is not what you'd want to do in your production applications.
[00:06:47] And by the way, you can put Firefox or something like that. Whatever you want that to be, ends up for the purpose of this code was not mattering. But we'll put the last two chrome versions there. Now, if you needed to target, I don't know, IE11, there's a bunch of them here that you can put here of like, I don't think this one works.
[00:07:10] But I think he can put something like this. I wanna target most people in the world which you would do with something like this, or don't target opera or anything like that. We're not gonna get into browsers. That's exactly what it does. But here we're just telling it last 2 chrome versions, because we just don't want it to transpire a lot.
[00:07:30] We're gonna be using modern browsers. So we're just gonna stick to that. If you wanna find out more about that you can just go to browserslist.dev. So if I put last 2 chrome versions like that. It'll tell you everything that you're targeting. Right now I'm covering 30% of the world's population.
[00:07:59] That's objectively terrible. Do not ship your applications like that. But I'm part of that 30% population right now, so it works for me. But this will help you with. Various different strings, to figure out what you wanna put there. Okay, that's the end of the tool section. You survived, you can get the back to react now.
[00:08:30] So again, we have a Point here, if you go down to the bottom of browsers list. There's this part here, you can click on this, just come in here, run npm install and you will be off to the races with all the tools you install. Already.
>> So from the browser list is Babel and parser required or can you specify that without them?.
[00:08:55]
>> You will need some tool that pays attention to what browsers list Is. So for examples, post CSS is another tool that pays attention to it. But you would need something that's going to read it. So it's just kind of like a top level tool, telling various other tools, what you're trying to target.
[00:09:15] So Babel is one of the tools that read that. So in this particular case, if you didn't have Babel and parcel, nothing would happen.