00:00 All right. So let's interpolate the children and class name where they're supposed to go. We'll say class name is class name right there, and then children goes right there. And that's it. We did it. Hooray! Then we can take a look at the DOM output right there. We've got our classes container. Hello world. Everything's looking awesome.

00:20 Now, as a reminder, the children prop is special. And so with this syntax, it gets compiled down into using the children prop right here. It just passes it as the additional argument to create element. That should be familiar to you because you've done this before.

00:37 But we could also say children is children as just a regular prop. And then remove the children from there, and we save that. And now it's just a regular prop. But again, as far as React is concerned, both of those work just as well. The other interesting thing here is with JSX, it's not HTML.

00:56 And so you can semantically and correctly self-close any of these tags, which is a pretty handy thing that I typically do. I don't typically have just a closing angle bracket and then close the tag.

01:12 I just will have a self-closing tag like this, except I'll do the right syntax. So that is the interpolation ideas. You just add a curly brace, and now here we're sitting in JavaScript land. In fact, let's go all the way up to the top. Here we're sitting in HTML land.

01:31 Maybe I add a style tag, and now I'm in CSS land. So HTML, now I'm in CSS, and now I'm done with CSS. I'm back in HTML. I'm still in HTML right here. I entered JavaScript land. Hanging out in JavaScript, everything is awesome. And then I show up right here, and the parse is like, oh, you are now in JSX land.

01:51 So we're hanging out in JSX land. We have the special syntax. It's not exactly the same. It's mostly the same in many cases. But here we've got this equals and stuff. It looks a little bit like HTML. But then we hit this curly brace, and now we're exiting JSX land. We're entering JavaScript land. So things are good. We can do whatever expression we want to in there.

02:09 And as long as it's an expression, then we're good. We couldn't do something like if class name, then return class name. What would that even do? So it's got to be an expression. Can't be a statement. You can't do a for loop or anything like that. It's got to be something that has some evaluate, some thing that it evaluates to.

02:29 And in the future, you might be able to do expression in there or something. But the point is, it's got to be an expression that evaluates to something. You could definitely do an arrow function that immediately is invoked. That would also technically work. Then you could do all sorts of things.

02:48 But typically, you don't find people doing a lot of logic inside of these interpolations. They'll typically do that logic outside, and then the result will end up in here. But sometimes you'll find people doing ternaries and stuff. I do that myself quite a lot because I like ternaries.

03:08 But not everybody does, and I don't blame you. That's fine. But yeah, so now we have the closing curly brace. We're done with the expression. We're back in JSX land. And then we get to another curly brace. We're in JavaScript land again, and that shows up in here.

03:22 And so what's useful to understand about how all of this works and understanding how the JSX compiles to regular JavaScript is that when you see this interpolation, when it's compiled, the compiler will just say,

03:40 okay, whatever that expression is, just stick it in this placement. So we say plus five, whatever. That's fine. The compiler is going to say class name plus five. It just takes whatever was in that spot and places it in the compiled code where that prop is being assigned.

03:59 So that is how that works. That's why it works the way it does is because it's literally just transferring it over and not really touching anything that's inside of that interpolation section. So hopefully that helps nail it home a little bit to you, this whole JavaScript land versus JSX land and everything.

04:20 You'll be interpolating a lot in JSX. So have a good time with that in your future.