Build Polymorphic Components with React and Typescript
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
- You already know some React
- You already know some Typescript (at least the basics)
Extend your knowledge of reusable components and utilise techniques used by your favourite open-source React libraries ...
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
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
Creating Unique Udemy courses for React Frontend Engineers
As an engineer actually working in the industry, I reckon it's sometimes difficult to get quality courses on Udemy that are not beginner-focused i.e helpful for your day to day work beyond the basics. This is my goal. To create such courses here on Udemy.
I am a passionate Senior Frontend Engineer with years of experience in frontend development.
I have always been a fan of teaching. In 2018 and early 2019 I was a Top Medium Writer in technology, with my Medium blogs receiving well over 2 million views.
I went on to write my first book, Understanding Flexbox in 2017, and I've gone to write up to 4 more books since then - all with very positive feedback!
I do have a unique style of teaching. My goal when I teach a subject (preferably a complex one) is to break down the subject in a way that it can be understood by a 5-year old. This is fuelled by my frustrations as a beginner years ago when I aspired to be a self-taught Engineer.
I've recently moved to Udemy as a teaching platform to reach a wider audience, and I can't wait to create even more impactful courses for the modern frontend engineer :)