00:00 All right, it's great that we're saying, hey, get me an element. Create an element out of this custom function. But I'd much rather be able to write it like this, where it's just my regular JSX. I can compose things together nicely. Unfortunately, when you do this, you're

00:15 actually going to be creating an element with the string name message. We'll take a look at that. I want you to look at the compiled output as you're working through this stuff. So the way that you avoid this, the way that you make it so that the compiled output will create element with the reference to the function, rather than just a string with the function name,

00:34 is by the casing of that particular function. Also, property access. So you can take a look at all these different scenarios. If it's capitalized, it'll be create element with a reference. If it's got a property access in it, also create element with a reference, with it capitalized as well.

00:54 This will be a syntax error. You cannot do brackets like that in JSX. If it's lowercase, it's going to be a string. If it's kebab case as lower, then it's also a string. Also, if it's uppercase, as long as it's kebab cased like this, it's going to be a string. And that makes sense, because you

01:12 can't make a function that has these dashes in its name. If you do snake case, then that will be converted into, or yeah, compiled into something that references a function. But if it's lowercased, then it's going to be a string. Most of the time, you're going to find people just capitalizing their functions.

01:30 So that is your job, is to capitalize the function and then change it to use JSX instead of create element. I do want you to not capitalize it first and try to switch it to JSX so you can see that the compiled output is what we're showing here. And then you can capitalize it and see how that changes.

01:49 And when you're done, then you will be solid on custom components. So good job in advance.