4.6
Intermediate
8h
Using TypeScript for Building Polymorphic React Components
Gain insights into building strongly typed polymorphic React components using TypeScript. Learn about naive implementations, advanced use cases, and creating reusable utilities for design systems.
TypeScript has become the de facto way to build modern web applications. With the rise of design systems and reusable components, building strongly typed polymorphic components is a desirable skill for the modern web engineer.
This course provides a bottom-up approach to building strongly typed polymorphic components. You will start with a naive implementation of a polymorphic component and explore its drawbacks. You will then use TypeScript to provide a production-ready component interface. Finally, you’ll support advanced use cases with component refs and build a reusable utility you can use on multiple components.
By the end of the course, you’ll be ready to build components fit for a design system and go beyond basic reusable needs.
TypeScript has become the de facto way to build modern web applications. With the rise of design systems and reusable components...Show More
WHAT YOU'LL LEARN
An understanding of intermediate TypeScript utility types and TypeScript generics
Hands-on experience building polymorphic React components
A working knowledge of strongly typed polymorphism in React
The ability to enforce valid HTML element attributes based on a polymorphic prop
An understanding of intermediate TypeScript utility types and TypeScript generics
Show more
TAKEAWAY SKILLS
Content
1.
Introduction
6 Lessons
Get familiar with creating reusable polymorphic components in React using TypeScript and popular UI libraries.
2.
Strongly Typed Polymorphic Components
12 Lessons
Walk through the creation of flexible, type-safe, polymorphic components using TypeScript generics.
Introduction to TypeScript GenericsConstraining GenericsUsing a Generic Polymorphic PropHandling Generics in JSXReceiving Valid HTML Element StringsHandling Valid Component AttributesThe ComponentProps TypeHandling Default Values for the Polymorphic PropIntroducing a Reusable Component PropStrongly Typed Component PropsReusable Component PropsQuiz
3.
Build a Reusable Polymorphic Type Utility
3 Lessons
Break apart the creation of a versatile TypeScript utility for polymorphic React components.
4.
Polymorphic Component with Ref Support
4 Lessons
Grasp the fundamentals of ref support in polymorphic React components with TypeScript.
5.
Exercise and Conclusion
3 Lessons
Solve problems in building and understanding polymorphic React components with TypeScript.
Certificate of Completion
Showcase your accomplishment by sharing your certificate of completion.
Course Author:
Developed by MAANG Engineers
Trusted by 2.8 million developers working at companies
"These are high-quality courses. Trust me the price is worth it for the content quality. Educative came at the right time in my career. I'm understanding topics better than with any book or online video tutorial I've done. Truly made for developers. Thanks"
Anthony Walker
@_webarchitect_
"Just finished my first full #ML course: Machine learning for Software Engineers from Educative, Inc. ... Highly recommend!"
Evan Dunbar
ML Engineer
"You guys are the gold standard of crash-courses... Narrow enough that it doesn't need years of study or a full blown book to get the gist, but broad enough that an afternoon of Googling doesn't cut it."
Software Developer
Carlos Matias La Borde
"I spend my days and nights on Educative. It is indispensable. It is such a unique and reader-friendly site"
Souvik Kundu
Front-end Developer
"Your courses are simply awesome, the depth they go into and the breadth of coverage is so good that I don't have to refer to 10 different websites looking for interview topics and content."
Vinay Krishnaiah
Software Developer
Hands-on Learning Powered by AI
See how Educative uses AI to make your learning more immersive than ever before.
AI Prompt
Code Feedback
Explain with AI
AI Code Mentor
Free Resources
