Build Polymorphic Components with React and Typescript

Learn practical intermediate to advanced Typescript in React – complete with a 50+ page PDF to aid your study!
Build Polymorphic Components with React and Typescript
File Size :
935.99 MB
Total length :
2h 15m

Category

Instructor

Ohans Emmanuel

Language

Last update

5/2022

Ratings

4.5/5

Build Polymorphic Components with React and Typescript

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

Build Polymorphic Components with React and Typescript

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 componentsApply the gained knowledge to building your own design systemExplore intermediate Typescript concepts for truly strongly typed polymorphic componentsPrerequisitesYou are familiar with React basicsYou are familiar with Typescript basicsWho is this class for?React developers building design systemsReact developers building reusable componentsReact Typescript developersOther curious intermediate React developersIn 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.

Overview

Section 1: Getting started

Lecture 1 Introduction

Lecture 2 The course in a nutshell

Lecture 3 End game: The exercise you will solve

Lecture 4 Use cases for polymorphic components

Lecture 5 What are polymorphic components?

Lecture 6 Build your first polymorphic component

Lecture 7 The problems with this simple polymorphic component implementation

Section 2: The Polymorphic React Typescript Handbook (PDF)

Lecture 8 The Polymorphic React Typescript Handbook (55-page PDF)

Section 3: Strongly typed Polymorphic components

Lecture 9 Typescript Generics: A recap to help solve some of our Polymorphic issues

Lecture 10 Representing the polymorphic prop with a generic

Lecture 11 Receiving only valid component props based on the generic prop

Lecture 12 Extend the component to receive other relevant props

Lecture 13 Ensuring type safety for the default generic case

Lecture 14 Can your polymorphic component render a custom component?

Lecture 15 Typescript recap: Omit, Pick and keyof

Lecture 16 Build a robust polymorphic component with its own props

Lecture 17 Passing in your custom props to the polymorphic component

Section 4: Build a reusable polymorphic component utility

Lecture 18 Mapping out the strategy for the reusable utility

Lecture 19 Implementing the reusable utility

Section 5: Polymorphic component with Ref

Lecture 20 The problem(s) we want to tackle

Lecture 21 Adding the ref type

Lecture 22 Type annotation for strongly typed refs

Section 6: Exercise and conclusion

Lecture 23 Its now your turn!

Lecture 24 Goodbye (for now)

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

Course Information:

Udemy | English | 2h 15m | 935.99 MB
Created by: Ohans Emmanuel

You Can See More Courses in the IT & Software >> Greetings from CourseDown.com

New Courses

Scroll to Top