TypeScript's features and developer experience make a great combination with React, but it can be confusing to get started.
What’s the best way to type component props? What are these weird useRef errors?
That's where this React with TypeScript tutorial comes in!
Starting from the very beginning of bringing TS support to a React project, you'll soon find yourself properly typing hooks and mastering components. You’ll learn everything you need to know to get productive with React and TypeScript.
Tutorial topics include:
- Reading React's type definitions to debug errors and ensure correct usage
- Defining props for custom and
React.FCfunction components. - Putting TypeScript's inference to work for you
- Supporting component children
- Typing and overriding event handlers
- Utilizing
ComponentPropsto extract properties from imported components or HTML DOM elements - Understanding the APIs and typing for
useState,useCallback,useEffect, and other React Hooks. By the end of this workshop, you'll be confident when using React with TypeScript in your own projects!
Went through it and I think it's great! I wish this tutorial existed when I started my first gig 11 months ago. It teaches all the things I use on a daily basis and some that I didn't know; I was using the verbose way of getting HTML props in types until I went through the tutorial. This is my new go-to recommendation for people starting to work with TS+React. Thanks for creating this and making it free, Matt.
Instructions
This React with TypeScript tutorial is split into several exercises. Each features a problem that encourages you to take an active, exploratory approach to finding a solution.
You'll need to:
- Watch and read the problem introduction.
- Check out the TypeScript or React documentation or dive into type definitions to look for help
- Try a solution and check your work. There may be more than one way to solve the challenge! Whether you succeed or get stuck, watch and read the solution and check out the included code.
Prerequisites
You'll need a working knowledge of React, as well as foundational TypeScript knowledge. Working through the Beginner's TypeScript Tutorial is recommended.
Running the Exercises
Exercises can be worked on using the inline Stackblitz editor, or by opening the tutorial repo in Gitpod. Online editors do not support the full feature set of a local VS Code installation (e.g. quickly jumping to type definitions).
To work locally, clone the React with TypeScript Tutorial repo, and use a package manager to install dependencies. From there, check out the README for further instructions.