使用 React 和 Typescript 构建多态组件

Build Polymorphic Components with React and Typescript

学习 React 中实用的中级到高级 Typescript – 配有 50 多页的 PDF 来帮助您的学习!

你将学到什么

  • 创建更多可扩展、可重用的 React 组件
  • 构建适合在标准设计系统中使用的组件
  • 使用有限的 props 和 HTML 属性构建强类型组件
  • 应用中间 Typescript 实用程序类型来构建 React 组件
  • Typescript 泛型在构建可重用组件中的实际应用
  • 基于通用多态 prop,使用 Typescript 强制仅强制传递 HTML 元素的有效 prop
  • 构建可重用的多态实用程序
  • 为您的组件引用公开强类型 API
  • 了解流行开源库的内部工作原理

要求

  • 你已经了解一些 React
  • 您已经了解一些 Typescript(至少是基础知识)

描述

扩展您对可重用组件的了解,并利用您最喜欢的开源 React 库所使用的技术……

多态组件?

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

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

你如何应用这些知识?

  1. 构建更灵活的可重用组件
  2. 应用所获得的知识来构建您自己的设计系统
  3. 探索真正强类型多态组件的中间 Typescript 概念

先决条件

  1. 您熟悉 React 基础知识
  2. 您熟悉 Typescript 基础知识

这门课适合谁?

  1. React 开发人员构建设计系统
  2. React 开发人员构建可重用组件
  3. React Typescript 开发人员
  4. 其他好奇的中级 React 开发人员

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

您将在本课程中学习中级打字稿。它实用、有效且开门见山——您将真正完成的课程。

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

一路上将会讨论许多用例和边缘案例,以帮助您构建更强大的可重用 React 组件,并提供出色的开发人员体验。

本课程适合谁:

  • React 开发人员构建设计系统
  • React 开发人员构建可重用组件
  • React Typescript 开发人员
  • 其他好奇的中级 React 开发人员
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。