00:00 Let's start out by getting Babel on the page. We're just going to take this script tag and stick it right there. And now, with Babel on the page, it's not small. If you take a look at our Babel standalone, it's just this massive, massively huge file. But this is not optimal,

00:18 like we're not actually going to be doing this in production, so it's fine that it's massively huge. So, then we need to tell Babel we want to compile this. So, before we get to that though, I want to show you why it's important that Babel compiles this. So, we're first going to convert things over to JSX.

00:36 So, instead of create element right here, we're going to make a div. We're going to have the class name equal to container, and then we'll have the children be hello world, and close off our div. There we go. Okay, great.

00:54 So, now we've got JSX right here, and we're going to get this syntax error, unexpected token, open angle bracket. And the reason for that is because the browser is going to parse this and it's going to say, oh, you're doing less than right after an equal sign. That doesn't make any sense. I do not expect this token.

01:14 And that's because we need this to be compiled. If we take a look at our elements, we can find that script tag here, and that is where that's being evaluated. So, the browser is like, I can't take that. So, what we're going to do instead is if I change this type to like anything else, anything,

01:31 now the browser doesn't try to evaluate it as JavaScript. And so, we are not going to get the error, but we're also not evaluating this code. And so, the way that Babel standalone works is it says, I'm going to look for any script tag that has the type text Babel. And with that now, and even my editor understands this,

01:50 with that, Babel is going to say, oh, great, let me find that particular, or take all the text inside of that script tag, and I'm going to convert it into something that can be evaluated by the browser. We also want to say type is module because we're using ESM.

02:08 And so, these imports need to remain as they are. Don't compile those to anything else. And with that, let me save that. And now, we're going to get a new error here. Require is not defined. Oh, right, we need to do data type module. There we go. Okay, and then react is not defined.

02:27 And the reason that is happening is, actually, before we get to that too far, now you'll notice we actually have a new script tag. This is in the head. Remember, we don't have a head in our HTML document. This script tag is created by Babel for us. The type is module because we said the data type for the script tag we want created is a module. And then we check this out.

02:46 We're still getting our imports here. And our JSX is being compiled, and it's being compiled to this react create element thing. It also has this comment, this double underscore pure thing. That's actually particularly for optimizers like bundlers and stuff. We're not actually taking advantage of that

03:05 in our situation, but you will in a real-world situation. So the bundler will see that and be like, oh, okay, I can do some special stuff to this code to make it more optimized. But you don't need to worry about that right now. The most important part here is that our JSX was converted into regular JavaScript that the browser can evaluate.

03:25 Now, when the browser is evaluating it, it's seeing this react dot, and it's like, I don't know, what is react? I don't know, so it's gonna throw this error. And so we are gonna change this to be import star as react from our react thing. And so with that, now we have react, and that's referenced right here.

03:43 And so things are working swimmingly. We're also getting a warning from Babel standalone saying, hey, you're using an in-browser transformer. You don't wanna do that in a production environment, and we won't, don't worry. So with all of that now, we now have some JSX. And this makes it so much easier to nest things

04:02 and we'll play around a lot with the different syntax benefits that you get from using JSX. But the most important thing for you to understand and to remember is that the browser does not understand JSX. So we cannot just have the browser evaluate this. You're going to need some sort of compiler

04:21 to convert it from this into something that the browser can understand, and then the browser can evaluate it. The way we're doing this is with Babel standalone. In a production application, you'll be using some framework or something that handles this for you. But I think it's really useful for you to understand that this is something that will compile

04:39 into the React Create Element API that you've already grown to love, I know. Okay, that is getting the compiler all set up, and now we can play around with some JSX.