Build Polymorphic Components with React and Typescript

th_F3kumqzthz7sYmaVbwUtZvPRzAhy6zQv

你可能以前用过它们……如果你用过 Material UI 的 component prop 或 Chakra UI 的 as prop,那么你已经遇到过多态 React 组件。

在本课程中,您将学习构建自己的多态组件,该组件可以呈现为任何有效的 HTML 元素。更重要的是,您将学习根据提供的元素类型强类型化其允许的道具。在此过程中将讨论许多用例和边缘案例,以帮助您构建更强大的可重用 React 组件,并拥有出色的开发人员体验。

你如何应用这些知识?

构建更灵活的可重用组件

将获得的知识应用于构建自己的设计系统

探索真正强类型多态组件的中间 Typescript 概念

先决条件

你熟悉 React 基础知识

你熟悉 Typescript 基础知识

这门课是为谁准备的?

React 开发人员构建设计系统

React 开发人员构建可重用组件

React Typescript 开发人员

其他好奇的中级 React 开发人员

总之,这不是初学者的课程。您需要了解一些 React 和一些 Typescript(至少是基础知识,即您知道什么是“类型”)。

您将在本课程中学习中级打字稿。这将是实用、有效且直截了当的 – 您将实际完成的课程。

您将学习构建自己的多态组件,该组件可以呈现为任何有效的 HTML 元素。这很简单!不那么容易的是根据提供的元素类型强输入其允许的道具。动态限制组件 props,对传递给 props 的引用进行类型安全,甚至构建一个可以在任何其他可重用组件上重用的实用程序。

在此过程中将讨论许多用例和边缘案例,以帮助您构建更强大的可重用 React 组件,并拥有出色的开发人员体验。

本课程面向
React 开发人员构建设计系统
React 开发人员构建可重用组件
React Typescript 开发人员
其他好奇的中级 React 开发人员

MP4 | Video: h264, 1280×720 | Audio: AAC, 44.1 KHz, 2 Ch
Genre: eLearning | Language: English + srt | Duration: 23 lectures (2h 16m) | Size: 892.5 MB

Extend your knowledge of reusable components. Build strongly typed polymorphic React components

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

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

Description
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

原创文章,作者:steven,如若转载,请注明出处:https://rr3d.cn/30960.html

赞 (0)
steven的头像steven
上一篇 2022年4月3日
下一篇 2022年4月3日

相关推荐

发表回复

登录后才能评论
分享本页
返回顶部