TypeScript and React
Welcome to this little primer on TypeScript and React! A match made in heaven!
With that, TypeScript and React are a perfect fit. You will enjoy combining both technologies together to get huge productivity boost when writing your applications!
This guide assumes that you are familiar with the basic concepts of both React and TypeScript. We will focus on the combination of the technologies and the resulting features.
Also, this guide does not claim to be complete. It’s one way and more important one easy way to dive into React and TypeScript, modelled after two core principles:
- Using as little setup and tools as possible. TypeScript already has a transpiler and a JSX compiler, so the only thing we need extra is some bundling. I will link to guides if your project needs some extra tooling.
- Using TypeScript features only where needed. TypeScript has brilliant type inference, so you get a ton of features like autocompletion and type safety already out of the box and without any extra code. Wherever we can improve on what’s given, we will.
Ready? Let’s go!
Table of contents:
- Getting started: How to set up TypeScript and React, and what are your options
- Components: Components are everything in React. TypeScript gives you a lot of ways how to deal with them.
- Children: There’s nothing more beautiful than children. In React, they even can be functions.
- Events: Apps are boring if you don’t interact with them. Clicks, inputs, etc. are handled here.
- Hooks: Hooks are pretty new and pretty exciting. And already pretty well typed.
- Render props and child render props: Coming soon!
- Context: React’s context API gives you global state with a very lean API.
- Styles: Coming soon!
- Further reading: So many things not covered in our guide. You will find them here.
Comments? Shoot me a tweet!