Compiling JSX

[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.

[00:00] In this exercise, we're going to be adding Babel to the page and converting our create element calls into JSX. So to add Babel to the page, you've got this little section here. We have Babel standalone in the public directory of the workshop repo, which is basically the entire Babel in a single script so that we can load that.

[00:19] And then it will look through our page to find any scripts that have a special type on it, which you're going to be updating. Once it finds a type like that, it will take the contents of that script, compile it, and then take that compiled version, make a new script tag, and have the browser evaluate that for us. So that is your job in this exercise

[00:38] is to set all that up and then convert stuff over to JSX. As a reminder, this is not the typical way that you run React applications, but I think that it's really valuable for you to see how all these pieces work in a single file like this without any extra tools around it.

[00:56] You could take whatever you end up with in here and stick it anywhere else and it will work. So I think that's really valuable there. So have a good time with that and we will see you when you're done.

Ever found yourself staring at React code, feeling like you're missing something crucial? You're not alone. Many developers use React without understanding the fundamentals in depth.

This can leave you struggling when faced with more complex challenges down the road.

But you can build a rock-solid React foundation that will transform how you approach React development for the rest of your career.

This tutorial guides you through the essential building blocks of React. You'll start from scratch and gradually build up to creating custom components, gaining invaluable insights along the way. By understanding not just the 'how', but the 'why' behind React's functionality, you'll transform your approach to React development.

### What to Expect:

- **Hello World in JS**: Pure JavaScript to understand the basics.

- **Raw React APIs:** Use React and ReactDOM without JSX.

- **JSX:** Explore the power and syntax of JSX.

- **Custom Components:** Create and use your first React component.

By the end of this tutorial, you'll have a deeper understanding of:

- The relationship between JavaScript and React

- How React elements are created and rendered

- The purpose and power of JSX

- The nature of React components and their role in building UIs

<Callout ctaLink="https://epicreact.dev/buy">
This tutorial is an excerpt from the React Fundamentals workshop
</Callout>

Learn React from scratch: build components, understand JSX, and master core concepts. Understand the 'why' and 'how' behind React's functionality. 

Get Started With React

Get Started With React

Transcript

Compiling JSX

Transcript