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.

Learn everything you need to be effective with the fundamental building blocks of React applications. 

The path of this workshop takes you from the fundamental API of appending DOM nodes, through React's raw APIs, to how JSX compiles into React's methods.

Once you have a firm grasp of what React is doing with creating elements, you'll learn the other tools you need to build webpages like: styling, forms, and inputs. 

But, this isn't just a native web course. 

**You'll be building a strong foundation in React.** 

Learn how to: 

- build reusable components
- leverage TypeScript with React
- catch errors with Error Boundaries
- render arrays properly with the `key` prop. 

When you’re finished, you’ll be prepared to create and use React components to build excellent experiences for your app's users.

## Hello World in JS

You'll start your journey by learning some of the history of how we went from generating HTML on the server and adding JS on top to full-fledged frameworks. 

To learn React you'll be following a similar path and begin by learning how to manually append your own DOM nodes.

I call this "going down to level up." You'll find yourself much more efficient with React if you understand the fundamentals of the DOM and JavaScript!

## Raw React APIs

Before getting into JSX, you'll learn how to work with React and ReactDOM's raw APIs. 

You'll create React elements with `React.createElement` and learn how compose your elements with calls to this function. Then, you'll render the React elements you create using ReactDOM.

## Using JSX

Once you know what React is doing under the hood, you'll be prepared to learn JSX.

This section covers more than just how to write it, you'll also use babel to experiement with how JSX gets compiled to the raw React APIs!

## Custom Components

Just like in regular JavaScript, when you want to reuse code, you write functions. If you want to share JSX, you can do that as well. 

In this section you'll learn about how in React, we call these functions "components", the special properties of these functions, and how to 

## TypeScript

> TypeScript is not making your life terrible. It's just showing you how terrible your life already is. 
 
*- Kent C. Dodds*

Getting a solid hold of TypeScript from the get-go will set you up for success. Since React components are just functions, there aren't any special considerations when applying type annotations. 

So, you'll be working on two things:

1. Improving your TypeScript skills
2. Learning the React-specific types available

## Styling

In this section you'll learn about the two primary ways to style React components:

1. Inline styles with the `style` prop
2. Regular CSS with the `className` prop

You'll also learn why React uses a `className` prop instead of `class`. 👀

## Forms

In React, there actually aren't a ton of things you have to learn to interact with forms beyond what you can do with regular DOM APIs and JavaScript.

Here, you'll learn the form markup, build an onSubmit handler, and then create a form action. 

## Inputs

There's a ton of different input types and you're going to learn a lot about them here!

You'll learn about the different text inputs, check boxes, radios, hidden inputs, how to make sure everything is properly labeled and accessible, and setting default values and default checked boxes. 

## Error Boundaries

This is something you want to learn early on. Sometimes things go wrong and we need to handle errors and display useful information to the user. 

An ErrorBoundary component doesn't ship with React by default. So, you'll be importing one from react-error-boundry and then learning how to compose it, and then give the option to the user to reset. 

## Rendering Arrays

In React you can render arrays of elements. One of the tricky parts about it is the `key` prop. 

In this section, you'll learn in detail why React needs the `key` prop to keep track of elements and the nuances of the value that is used. 

Finally, you'll learn a cool trick where the `key` prop is used as a mechanism for resetting elements in the DOM!


Starting with an HTML file and a script, you'll learn React API to build components and manage forms. Learn the fundamentals of building on the web with React.

React Fundamentals

React Fundamentals

Transcript

Compiling JSX

Transcript