00:00 So I'm actually just going to copy and paste the HTML and we'll save that and see what happens. Oh my goodness look that that HTML just copy pasted right in there. Except I mean everything looks good except we've got this warning. What

00:15 is this warning all about? All right it says invalid DOM property class. Did you mean class name? Now at first you might look at that and say no I oh I see a class name class what wait why does it have to be class name instead of just class? Isn't HTML is just class? Why can we just do a class? Well the reason is

00:34 because the JSX is a lot more or JSX properties are a lot more similar to DOM properties than they are to HTML attributes. And so here it's saying invalid DOM property class. It's not talking about the HTML attributes. We're looking at DOM properties. So if we were to take a look at this you'll notice

00:53 that ultimately it ended up being correct like we we did get the attribute there but that's actually working by accident or just by happenstance. So if we take a look at this UL we see that it's got a class or let's look at the

01:07 the container either either one. And if we do $0 you'll notice that $0 is a special thing in the developer tools that allows us to reference whatever element we have currently selected. So here that says double equals $0 so you know okay use $0 in the console to refer this element. Sweet. So

01:25 if I say $0 and then look up class I'm going to get undefined but I have the class attribute. So interestingly if I say get attribute class well that's going to get me what I'm looking for. So there is a difference between HTML

01:41 attributes and DOM properties and there there are historical reasons for this like class is a reserved word whatever but the point is that properties are not the same as attributes. And so in React we work with properties we don't work

01:57 with attributes and that is why instead of class you use class name. Class name is the property on the DOM element. Now there are a handful of these that are kind of interesting like forms have a for property in HTML but when you look

02:14 at the DOM attribute it's going to be HTML for or for and like there are various others like this. You'll you'll bump into a couple of these there will always be a nice warning for you when there is a problem and all you need to do is follow the instructions and say yep that's a class name property and now

02:30 we're not getting the warning we're getting the same behavior as before it's it's working as we expect. And so like I said just a handful of differences between what HTML looks like and what JSX is because JSX is focused on properties not attributes. And yeah ultimately this is a way better

02:50 experience than create element ever was we can take a look at the output from Babel and look at that monstrosity oh my goodness I'm glad we don't have to write that anymore because it is just so much better to use JSX. And this is the primary reason why almost everybody like 99.99999% of React

03:09 developers are using JSX and I think that's for a good reason so I hope you had a good time with this one and yeah now you can go off and use your JSX and nest your stuff as much as you like