Build Polymorphic Components with React and Typescript

Build Polymorphic Components with React and Typescript, available at $74.99, has an average rating of 4.7, with 24 lectures, 1 quizzes, based on 156 reviews, and has 1350 subscribers.

You will learn about 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 This course is ideal for individuals who are React developers building design systems or React developers building reusable components or React Typescript developers or Other curious intermediate React developers It is particularly useful for React developers building design systems or React developers building reusable components or React Typescript developers or Other curious intermediate React developers.

Enroll now: Build Polymorphic Components with React and Typescript

Summary

Title: Build Polymorphic Components with React and Typescript

Price: $74.99

Average Rating: 4.7

Number of Lectures: 24

Number of Quizzes: 1

Number of Published Lectures: 24

Number of Published Quizzes: 1

Number of Curriculum Items: 25

Number of Published Curriculum Objects: 25

Original Price: $129.99

Quality Status: approved

Status: Live

What You Will 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

Who Should Attend

React developers building design systems

React developers building reusable components

React Typescript developers

Other curious intermediate React developers

Target Audiences

React developers building design systems

React developers building reusable components

React Typescript developers

Other curious intermediate React developers

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?

1. Build more flexible reusable components

2. Apply the gained knowledge to building your own design system

3. Explore intermediate Typescript concepts for truly strongly typed polymorphic components

Prerequisites

1. You are familiar with React basics

2. You are familiar with Typescript basics

Who is this class for?

1. React developers building design systems

2. React developers building reusable components

3. React Typescript developers

4. 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.

Course Curriculum

Chapter 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

Chapter 2: The Polymorphic React Typescript Handbook (PDF)

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

Chapter 3: Strongly typed Polymorphic components

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

Lecture 2: Representing the polymorphic prop with a generic

Lecture 3: Receiving only valid component props based on the generic prop

Lecture 4: Extend the component to receive other relevant props

Lecture 5: Ensuring type safety for the default generic case

Lecture 6: Can your polymorphic component render a custom component?

Lecture 7: Typescript recap: Omit, Pick and keyof

Lecture 8: Build a robust polymorphic component with its own props

Lecture 9: Passing in your custom props to the polymorphic component

Chapter 4: Build a reusable polymorphic component utility

Lecture 1: Mapping out the strategy for the reusable utility

Lecture 2: Implementing the reusable utility

Chapter 5: Polymorphic component with Ref

Lecture 1: The problem(s) we want to tackle

Lecture 2: Adding the ref type

Lecture 3: Type annotation for strongly typed refs

Chapter 6: Exercise and conclusion

Lecture 1: Its now your turn!

Lecture 2: Goodbye (for now)

Instructors

Ohans Emmanuel
Staff Engineer and Published Author.

Edcademy by Ohans

Rating Distribution

1 stars: 1 votes

2 stars: 0 votes

3 stars: 4 votes

4 stars: 38 votes

5 stars: 113 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!