Build Polymorphic Components with React and Typescript

Name: Build Polymorphic Components with React and Typescript
Rating: 4.7 (220 reviews)

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

Created byOhans Emmanuel, Edcademy by Ohans

Last updated 5/2022

English

What you'll learn

Create more extensible reusable React components
Build components fit to use in a standard design system
Build strongly typed components with limited props and HTML attributes
Apply intermediate Typescript utility types to building React components
Practical application of Typescript generics to building reusable components
Based on the generic polymorphic prop, use Typescript to enforce only valid props of the passed HTML element
Build a reusable Polymorphic utility
Expose a strongly typed API for your component refs
Understand the inner workings of popular open-source libraries

Course content

6 sections • 24 lectures • 2h 16m total length

Introduction2:42
Who am I? Let's get to know each other before spending the next hours learning together :)
The course in a nutshell2:51
Get a rough idea of how the entire course is structured
End game: The exercise you will solve12:00
The goal of this lesson is to introduce you to a problem set. This will keep the problem lingering in your head while you go through the course.

You will learn everything you need to solve this exercise in the following sections of this course. As soon as you're done with the course, go try your hands on the exercise! Really! Make your learning active and not passive.
Use cases for polymorphic components0:04
What are polymorphic components?3:26
Build your first polymorphic component8:17
The problems with this simple polymorphic component implementation4:54
Simple polymorphic component Quiz

Typescript Generics: A recap to help solve some of our Polymorphic issues17:32
The majority of this lesson is optional. However, if you're not confident in your Typescript Generics understanding, I suggest you watch the entire lesson. Too long? Watch at 1.5X or 2X the speed.
Representing the polymorphic prop with a generic6:06
Note: this is an optional class to get students up to speed with Typescript Generics
Receiving only valid component props based on the generic prop7:59
Extend the component to receive other relevant props1:36
Ensuring type safety for the default generic case3:05
Can your polymorphic component render a custom component?5:14
Typescript recap: Omit, Pick and keyof9:49
Note: this is an optional class to get students up to speed with the Typescript utility types: Omit, Pick and keyof
Build a robust polymorphic component with its own props11:50
Passing in your custom props to the polymorphic component5:06

Requirements

You already know some React
You already know some Typescript (at least the basics)

Description

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.

Who this course is for:

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

Build Polymorphic Components with React and Typescript

What you'll learn

Explore related topics

Course content

Getting started7 lectures • 34min

The Polymorphic React Typescript Handbook (PDF)1 lecture • 1min

Strongly typed Polymorphic components9 lectures • 1hr 8min

Build a reusable polymorphic component utility2 lectures • 15min

Polymorphic component with Ref3 lectures • 17min

Exercise and conclusion2 lectures • 2min

Requirements

Description

Who this course is for: