Types Deep Dive 10 exercises

Exploring the React Namespace

Let's take a deep dive into the React namespace.

The React namespace is imported from react like so:

import React from "react";

Inside of the React namespace you will find types, functions, and values.

Depending on where you use the React namespace, you'll find it suggests di

Loading exercise


00:00 The first thing we're going to be exploring here as we dive deeper into the types is the React namespace itself. The React namespace, you can basically just import it from React here, and it contains two types of things.

00:14 The first thing it contains is it contains types, so we can actually grab stuff from React and just pull it in. The second thing is it actually contains functions as well and values here. So we have create element, we have clone element. And you can see that depending on where I use it, either in the runtime world here,

00:32 here I get access to a bunch of actual runtime stuff like lazy memo start transition, but up here I would only get access to type stuff like abstract view, all of these different types. And you can see that it behaves differently based on where you are.

00:47 So your job is to figure out how React, the namespace itself, behaves this way. What even a namespace is, and to just see if you can understand, really start to get to grips with the index.d.ts file. If you command click on React here, you'll actually see that there is like six or seven definitions here,

01:05 because we're actually appending to it in later exercises. So the one you should be paying attention to is index.d.ts, which is actually in node modules, whereas the other ones are actually right in our source directory here. So make sure you're actually going into the index.d.ts and none of these other ones. Good luck.