0:00 Let's start by explaining how React works in a TypeScript project. Here I've got a project which has a source directory, which has an index.ts file, which is currently empty. I've got a package.json, which has a couple of things in it. It has this thing called types node. It has TypeScript.

0:17 We also have a tsconfig.json, which is the base tsconfig that you get if you run tsc init. This is a really, really simple project. It doesn't have React in it yet. It doesn't really have anything. What I'm going to do is I'm going to show you how to get React into a simple project like this. This will show you how React and TypeScript relate together.

0:39 The first thing we need to do is what you would usually do is you would say, "I'm going to say pnpm add React." That's going to install the React package here. Now I'll be able to import React from React up here, except there's an error here, which is, "Could not find a declaration file for module React."

1:01 What this means is that we need to install a declaration file for it or we need to somehow get it. The way it suggests for us to do that is by saying npm I save-dev types/react. The way that most modules are written is they're written in TypeScript. The type definitions are shipped along with the library itself.

1:24 React isn't like that. It's actually written in Flow. What you need to do is you need to say pnpm add D, which installs it as a dev dependency, types, and then React. You also need to do the same for React DOM if you're using React DOM, too. Now we have types React installed. That goes inside our package.json here.

1:44 Types React. We have React 18.2 here. We've got React now. That means that if we command-click into here, we can actually look at the type definitions that don't ship with React. They ship in a separate project from definitely typed. Now we should be able to start using React.

2:03 We'll go const component equals a function like this. We'll return a div inside here except...Oh, dear, what's happening now? "Cannot find name div." We know, first of all, that in order to use JSX, because that's what this is, this is JSX inside a .ts file. We can't do that. We have to rename it into a TSX file.

2:29 Now we're getting some errors inside our directory here. Now we have, "Cannot use JSX unless the JSX flag is provided." This JSX flag here is actually referring to a TSConfig option here. Inside here we can say JSX. Then we have a few options here. We have preserve, react, react-jsx. Usually, you want to pick preserve here. Usually, your framework will handle this for you.

2:54 I'm not going to dive too deeply into these options here. Now that we have JSX preserve working, then this is going to start working fine. Now we can start using TypeScript and using this stuff here. Those are the basics about how React and TypeScript interact, is that you have this separate types React project, and you need to enable the JSX flag in your TSConfig in order to get it working.