Build Polymorphic Components with React and Typescript

Build Polymorphic Components with React and Typescript

English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 24 lectures (2h 16m) | 901 MB

Learn practical intermediate to advanced Typescript in React – complete with a 50+ page PDF to aid your study!

Extend your knowledge of reusable components and utilise techniques used by your favourite open-source React libraries …

Polymorphic components?

You’ve probably used them before … If you’ve used material UI’s component prop or Chakra UI’s as prop, then you’ve already encountered polymorphic React components.

In this class, you will learn to build your own polymorphic component that can be rendered as any valid HTML element. More importantly, you will learn to strongly type its allowed props based on the supplied element type. There will be many use cases and edge cases discussed along the way to help you build more robust reusable React components with a great developer experience.

How can you apply this knowledge?

Build more flexible reusable components

Apply the gained knowledge to building your own design system

Explore intermediate Typescript concepts for truly strongly typed polymorphic components

Prerequisites

You are familiar with React basics

You are familiar with Typescript basics

Who is this class for?

  • React developers building design systems
  • React developers building reusable components
  • React Typescript developers
  • Other curious intermediate React developers

In summary, this is not a beginner’s course. You need to know some React, and some Typescript (the basics at least i.e., you know what “types” are).

You will learn intermediate typescript in this course. It’ll be practical, effective and straight to the point – a course you will actually complete.

You will learn to build your own polymorphic component that can be rendered as any valid HTML element. That’s easy! What’s not so easy is strongly typing its allowed props based on the supplied element type. Restricting the component props dynamically, type-safe the passed refs to the props and even building a utility you can reuse on any other reusable component.

There will be many use cases and edge cases discussed along the way to help you build more robust reusable React components with a great developer experience.

What you’ll learn

  • Build polymorphic React components
  • Apply intermediate Typescript utility types
  • Practically use Typescript generics
  • Use Typescript to restrict the polymorphic prop to accept only valid HTML elements
  • Based on the generic polymorphic prop, use Typescript to enforce only valid props of the passed HTML element
  • Build a reusable Polymorphic utility
  • Handle strongly typed Polymorphic refs
Table of Contents

Getting started
1 Introduction
2 The course in a nutshell
3 End game The exercise you will solve
4 Use cases for polymorphic components
5 What are polymorphic components
6 Build your first polymorphic component
7 The problems with this simple polymorphic component implementation

Strongly typed Polymorphic components
9 Typescript Generics A recap to help solve some of our Polymorphic issues
10 Representing the polymorphic prop with a generic
11 Receiving only valid component props based on the generic prop
12 Extend the component to receive other relevant props
13 Ensuring type safety for the default generic case
14 Can your polymorphic component render a custom component
15 Typescript recap Omit, Pick and keyof
16 Build a robust polymorphic component with its own props
17 Passing in your custom props to the polymorphic component

Build a reusable polymorphic component utility
18 Mapping out the strategy for the reusable utility
19 Implementing the reusable utility

Polymorphic component with Ref
20 The problem(s) we want to tackle
21 Adding the ref type
22 Type annotation for strongly typed refs

Exercise and conclusion
23 Its now your turn!
24 Goodbye (for now)

Homepage