00:00 Running create element calls all over the place is super fun, but actually it's not fun at all. It's much, much better to write something that is more HTML-like, that just composes together nicer, it's more familiar to us. And so the React team put together this JSX syntax,

00:18 which is like XML-like syntax in your JavaScript. This allows you to compose things together in a much nicer way. But it requires a compiler because the browser doesn't know how to evaluate that JSX. So here's what you might write, send it through a compiler,

00:36 and that turns into a create element call. And that is all handled by the compiler, whatever build tool that you're using. But again, we're trying to keep things as simple as possible to avoid tools, at least for these first couple of exercises. And so we're going to be using Babel in the browser. So Babel is pretty cool because you can actually,

00:56 it's a compiler written in JavaScript, so it runs in the browser natively, and it can take your UI and turn it into regular JavaScript calls. One of the most beneficial things that you can do for yourself in getting proficient with JSX is being able to look at the JSX

01:16 and in your mind convert it to what the compiled output would be. That just helps you so much as you're trying to understand how interpolation works and all those various things. Now one thing you'll notice here is here we're saying this is compiling to create element, but it's actually, in this case,

01:33 it's compiling to the JSX runtime thing. This is a new advancement, or relatively new advancement in React to use this automatic runtime importing and everything like that. But what we're doing, because we're not using a full build system and everything,

01:52 we're gonna go with the classic runtime. So that's how we are gonna configure things to work and that will come back to React.createElement. So this means that we're gonna need to have React defined so that when the code is evaluated and it says React.createElement, it knows where to find React. So we'll be doing that in this exercise as well

02:13 and it'll be using the React.createElement API, which totally, either one of these works and in a real application, you're just going to be using some build tool and it'll take care of all the compiling to the JSX transform and all that stuff for you. But for us, we're gonna, yeah, we'll be including Babel in our browser

02:32 so that we can evaluate everything still in a single file, which I think will be pretty sweet. And then we'll be exploring a lot of the cool pieces of the JSX syntax in this exercise. You don't wanna miss it, not even a second. So let's get started.