00:00 So to start things out, I'm going to change from react dot create element to using JSX So we've got message and then here's our hello world and then message right there and then we'll do message well

00:16 Message and close that up with message and I think I left a thing there. There we go okay, great, so we do that and Technically it looks kind of like it's working but we've got this warning The tag message is unrecognized in this browser If you meant to render a react component start its name with an uppercase letter. Oh, that's kind of nice

00:37 Isn't it? Nice that react will just tell us exactly what the solution is If we take a look at the compiled output, then you'll see we're saying react create element div and oh no here right there React create element message quote message. So we're telling reacts. I want you to create a

00:54 Native DOM element called message. Well, there's no native DOM element called message. And so that's why we're getting the warning and The the way that we communicate to the compiler that we actually want to reference this by Function reference rather than just the string is by capitalizing this or doing property access

01:14 So here let's start with property access just for fun. So we'll call this component or components components and Message and now if I change this to components dot message Then React is like oh, yeah, that works fine. That's fine. And the browser or

01:35 Babel will see that and say oh, okay. You want to do a reference? That's fine. So the casing isn't necessarily The only way that you can control this if you want to do everything lowercase like that's fine You can technically do that, but it's not very common. And so instead we're going to capitalize this as message

01:52 And then we'll change these references to be message with the capital M and this will also work. And so now we're getting This compiled to be a reference to the message function. So that's what's going on there And so now you have a pretty firm understanding of how all this is supposed to work together you

02:11 Capitalize it just to communicate to whatever compiler you're using that you want this to be a reference to a function Rather than an element name like we're doing with this lowercase d on this div and Now you've made yourself a pretty stellar custom component. Good job