Instructor: 00:00 To use TypeScript with React, I'm going to change the extension on this to TSX, meaning that file will use JSX. I'm going to change the extension here to TSX as well, add a place to drop my React app, then create a React app really quickly. Import React, then Import Render, Create an App, and render out the app into my element.
00:29 Once I run parcel again, you'll see it will install React and the necessary dependencies because it automatically installs missing dependencies.
01:04 If you want to keep that default in place, we'll break it again, and you'll see this is not working. You can create what's called a tsconfig.json. I'll create some JSON for it, Autocomplete Compiler options, and then Autocomplete JSX, and set that to React.
01:25 Then I will need to stop my build, remove the cache -- there's a hidden cache directory with my parcel files in there -- and then restart parcel, so that it picks up my configuration changes. Now, when I refresh, everything should be working again.
01:53 The other thing to notice are these three tiny dots right here, suggesting that you can hit Command Period to take suggested actions from VS Code.
02:01 I'm going to choose install all missing type packages, because the types for React and ReactDOM are hosted at an @types organization on NPM. You'll see it will automatically add those to your dev dependencies here.
02:18 Now, in this file, nothing's going to change over here. When you try and do something invalid -- for example, if I create a class of app and extend react.component, I say Render, and I don't return anything -- if I go over to my Problems, they'll tell me why those lines are red.
02:37 This one essentially explaining, you need to return something from Render. I'll return my div of hi again and then the problems go away.