00:00 Let's talk about interpolation. So before I send you off into this exercise, I think it's useful for you to understand what interpolation is. So we already have like a div and we have a class name of container and all of that stuff. What if we wanted to parameterize some of that JSX, right?

00:17 So we wanna be able to have a variable that is what we set the class name to and stuff like that. It's important that you understand this because you're gonna be interpolating things a lot. Interpolation is not a new thing. In fact, the fact that we've got an index HTML document that has a bunch of the JavaScript in there,

00:37 that we're interpolating JavaScript inside of that. So the idea behind interpolation is just the embedding of one thing into another thing. So speaking specifically about like regular JavaScript code, you've got this greeting, you've got the subject, and then you have this message. This message is doing interpolation.

00:54 We have this backtick for template literal string, and then this dollar curly is the part that signifies, hey, I'm going to interpolate something in here. And then everything between that curly brace and the closing curly brace is an expression in JavaScript. And whatever that expression evaluates to

01:12 is what will be inserted into that place for the string that's been generated. And then we go back into the string and then we have another interpolation here. So the way that I think about this is here we're running in JavaScript mode and the browser is just doing regular JavaScript things in here. Once we hit this backtick, it's saying,

01:31 oh, okay, we're going to go into string mode. We were in JavaScript mode, now we're in string mode. So if you say like const whatever equals high, like that looks like JavaScript, but it's not. This is a string and that's indicated by the fact that we have this backtick. So when you're inside of string mode, everything is just a string.

01:50 But once you hit this dollar curly, then you're telling the browser or whatever JavaScript environment, you're saying I am exiting string mode and entering JavaScript mode. And so now you can do anything you want to in here. So we could even have an arrow function that returns the string greeting and immediately invoke it if we wanted to. You could do anything that you want to

02:09 provided that it is an expression. And so here we'll say greeting. And then when we close it, we go back to string mode. And so now we're sitting in string mode. Anything we do in here, even if it looks like JavaScript, it's going to be just a regular string. And then when we have another dollar curly, that is going back into JavaScript mode. And then finally you get to the end of this

02:30 and now you hit the backtick and now you're exiting string mode and going back to regular JavaScript again. So the idea of interpolation is just the idea of going back and forth between regular JavaScript and this other special environment or language. And just going back and forth between those two things.

02:48 So you're gonna be doing quite a lot of that in React. And in particular, it's actually pretty similar, just minus the dollar sign. So as you're using these divs and elements and stuff like this, you can enter or exit JSX mode,

03:05 go into regular JavaScript mode and then back again. And so you can put whatever expression you want to inside of these curlies. And these curlies can appear not only in the children position like this, but also in the attribute position like this as well. So that's a bit of a spoiler for you,

03:20 but that is interpolation in our JSX here. I think you're gonna have a good time with this one. Yeah, so do it. So have a good time. We'll see you when you're done.