00:00 Okay, let's go through each of these questions in turn. What is the React namespace? What is it made of? How does it work? Well, if we command click on it and we go into index.d.ts, we'll see that if we double-click here, we'll actually go into the file itself, which is where we want to be.

00:16 We'll see that this namespace React contains a bunch of different types and a bunch of different definitions for functions inside here too. All of the things that are actually inside React are described inside this namespace. This is a pretty cool way to do it because it means that

00:33 you can co-locate the stuff like children, fragments, strict mode, etc, with all of the actual types that describe it. So we have React child, React text, and you notice that this is a .d.ts file. This is a .d.ts file that has been handcrafted by a bunch of very, very cool people.

00:51 All these people, lovely people up here, who have actually gone through and actually tried to describe all of the JavaScript that the React team are producing using FlowType, which is their strongly typed language. Now, this setup is really interesting because what this lets us do is we've got our namespace here,

01:10 and we can have all of these type stuff and all of the runtime stuff on there, which is why we get this behavior where you can either use it as an actual type world or in the runtime world as well. It behaves like a class almost. So that's why it works this way.

01:26 Now, why is this now the shape of the module? Why don't we have to import React like this, for instance, import React from React? Why isn't it declared as a const like this? Well, if we go back into index.d.ts,

01:45 we could actually do this. We could say in export namespace React, and we could do it like this. Now, what we get is we'd actually get the React namespace imported or exported as a named entity, it's like a named const here. But you notice the line that I just deleted,

02:03 export equals React. What we're basically saying is this entire namespace, these represent all of the exports from React itself. So that means we can either grab the entire namespace like this, or we can just grab the individual elements like this, which is very cool, that's a nice bit of syntax.

02:22 This export as namespace React, this is pretty cool too. What this means is if I actually create a new file here, let's just create one inside the source directory. So like hello.ts, for instance. What we can actually do is we can actually access the type stuff inside React globally.

02:40 So we can say type example equals React.abstractView. Now, this is all available to us. If I delete this line, it means that actually React as a namespace is not available. If I remove this, it's no longer going to basically say you cannot use namespace React as a type. Whereas if I do export as namespace,

02:59 then you're allowed to. So this is really interesting. We've got this line, which basically says all of the stuff inside namespace React, this all gets put into the exports. And this, we're just saying make this available globally. So it means that we can actually grab all the types globally inside our project, which is useful.

03:18 It's interesting they chose that direction, but they did. So here we are. So there we go. This is why this is available as a type, because we're using all of this sort of clever namespace stuff. We're exporting as the namespace. So we can actually grab this even without this module import up here. And it means that we can use the namespace as a value

03:36 because it's going export equals React. So that means we don't need to grab it like by its name. We can just use that as a module definition. Very cool.