00:00 Let's walk through this step-by-step. Let's look at this div below. Let's try command clicking on it. Now, this will take us to the JSX.IntrinsicElements, and we end up at this React.DetailedHTMLProps. What I'm interested in looking at here is we have React.HTMLAttributes.

00:19 If we look at HTML attributes, you'll be able to see that each of these, there's loads of these different things here. When we go further down, we'll see that there's also SVG props here. It's funny that they call them HTML attributes on one side, but also SVG props down the bottom here.

00:36 HTML attributes, we can see that a couple of these have prefixes. We have HTML attributes for, let's say, main and div, things like that, and dl and span as well, I'm sure we'll have this. Let's take a look at span. SAMP, I have no idea what SAMP does. Every time I look at this list, I learn about new HTML attributes actually in elements.

00:55 This span here, it doesn't have anything specific to it. It's just HTML attributes, whereas source has something to it. If we command click on HTML attributes, we can see that index inside no modules here. We can see that it takes in a T and we

01:12 have extends ARIA attributes and DOM attributes. We can see here that there are things like default checked, default value, and then we have standard stuff, so access key, hidden, lang, nonce, radio group, and all this sort of thing. These are actually maintained by React itself.

01:29 It's not falling back on anything like lib.dom.d.ts, which is where the DOM types are stored. React is responsible for understanding which attributes you can actually pass to your elements. HTML attributes, really this is responsible for the base of all of

01:47 the things that you can pass into the DOM. If we look at the A, for instance here, then this A, it's got an anchor HTML attributes. Let's look at that. This extends HTML attributes here. HTML attributes is like the base. Then all of the other stuff, we can see like audio HTML attributes or

02:06 area HTML attributes all extended. This one extends media HTML attributes, which itself extends HTML attributes. You can see this tree of different things that all go down to HTML attributes, which itself extends ARIA attributes and DOM attributes. Let's take a look at ARIA attributes.

02:25 These are all of the ARIA things that you can add onto here, ARIA invalid, ARIA key shortcuts, etc. We've got the DOM attributes itself. We've got children, we've got dangerously set in a HTML, which you can do on all nodes, on copy, all of these different events here, which are extremely useful as well.

02:45 Yeah, those are all event handlers. This also gives you a sense for what event handlers are possible too. Mouse event handler, drag event handler, React event handler. I don't know what that's about, React event handler, event handler, synthetic. You can go deeper and deeper into this. But what we're seeing here then, how does React know which HTML attributes can be

03:04 passed to each HTML element? Basically, it's got a huge, great big list here of all of the different ones and their specific iterations too. These are only available on dialogue, for instance. These are only available on embed. Each interface here doesn't quite correspond one-to-one because a lot of these elements,

03:24 basically, they just fall back on the HTML attributes. They haven't said, okay, we'll give div a specific interface for itself. DL, DT, EM, all of those are going to have specific interfaces because those interfaces would just have nothing on really. They all get filtered through this detailed HTML props, which just grabs the class attributes,

03:43 which is essentially just a ref here, a legacy ref for undefined. Now, try come on clicking on the class name prop, that takes us to HTML attributes. Fantastic. The href down here takes us to the anchor HTML attributes. So there we go. What you'll see a lot of times is if you're trying to spread props into

04:03 like one of these native components here, one of JSX intrinsic elements, then you're going to see these names pop up all over the place. And so it's important you understand the structure of how they work so that you can actually go in and kind of like, like be able to navigate around all of that stuff. So if you didn't understand any of that,

04:22 go back to the exercise, try navigating around and explore for yourself. See if you can build up a mental picture and map that territory so that you, if you need to, you can dive in and understand exactly where each type is coming from. And so you can kind of be able to solve errors when they come up.