React is the framework for professional web development.
The scale and complexity of web applications is always expanding. This has led to missed deadlines, higher costs, and deep frustration on developers like you and your team.
TypeScript is the language of choice for professional web developers. TypeScript lets teams build faster, more robust applications.
TypeScript solves a lot of problems, but it's not a silver bullet. It’s a complex language with a lot of features, and is challenging to use effectively– particularly when it comes to React.
TypeScript with React is a high-wire act.
You have to keep your components flexible, type-safe, and structured so you can take advantage of inference and not sacrifice maintainability down the line.
As soon as you start throwing anys around or duplicating code you know should be reusable, you’ve lost the plot.
Advanced React with TypeScript by Matt Pocock is your secret weapon.
You’ve found the magic wand you need to stop fighting TypeScript and make it do YOUR bidding like a true wizard.
In this Advanced React with TypeScript workshop, you’ll learn how to combine the most important concepts and patterns of React with TypeScript.
This combination is a superpower that will change the way you and your team build web applications.
You’ll write custom hooks that use generics, share some (but not all) props between components, and remove guesswork by diving into the types behind the scenes of React and other popular libraries.
This workshop has been vetted and tested with professional senior+ React developers and teams like yours.
Advanced TypeScript with React includes over 50 exercises spanning six in-depth sections:
Advanced Props with TypeScript
Handle props and custom components
Learn how to shape props to support multiple variants, share selected props between different components, use union types for conditional rendering, and other best practices for your components.
TypeScript Generics in React
Leverage generics for your components and custom hooks
TypeScript generics are a key tool in creating flexible, reusable components and hooks in React.
Generics can be used to define how components should be rendered based on the data and structures passed in. You'll work with custom hooks that support async operations and proper error handling, as well as combine generics with useState and useReducer for complex state management. The exercises in this section will fundamentally change the way you build components.
Advanced React Hooks with TypeScript
Harness types to create safer hooks
Using TypeScript with React Hooks provides serious benefits. You will practice with advanced concepts like returning read-only tuples from custom hooks and implementing function overloads for built-in hooks like useState. You'll implement loading and error states for an async hook, while provided a cancellation mechanism to avoid memory leaks. By the end of this section, you'll have the tools to create well-typed hooks that elevate your component development workflow.
Types Deep Dive
Read behind the scenes to build your understanding
The TypeScript type system forms the backbone of React and other libraries you use on a regular basis. But the errors it gives you can be confusing in the extreme.
Examine the various members of the React namespace, and how to use them to build better prop types. From understanding JSX.IntrinsicElements to augmenting React’s types themselves, you’ll learn everything you need to remove the guesswork when solving React’s nastiest TypeScript errors.
Advanced Patterns in React with TypeScript
Recognize and follow industry-standard patterns
Combining community-adopted React patterns with TypeScript features can significantly optimize your applications and the way you write code. You will work with classic component patterns like Render Props and Higher Order Components, solve the forwardRef problem, and master the ‘as’ prop– all with the added benefits of type safety.
The patterns you learn here will give you ideas for refactoring your existing React codebase - and build powerful design systems
Leveraging External Libraries
Safely integrate external libraries into your React components
Libraries supercharge your React development productivity. But they can be a double-edged sword. With TypeScript, you’re not just adding runtime code– you’re adding types to your project.
You'll create type-safe form components with react-hook-form, and learn how to master third-party generics with react-select. You will look behind the type definitions behind React Query, and apply what you learn to defining a custom hook to encapsulate its functionality. The lessons you learn from diving deep into types in node modules will be applicable to any third-party library you choose to use.
Prerequisites
You'll need a working knowledge of React, as well as foundational TypeScript knowledge. Working through the React with TypeScript Tutorial is recommended.