自定义 React Hooks 速成课程:通过 6 个应用程序学习 Hooks

Custom React Hooks Crash Course: Learn Hooks Through 6 Apps

使用 TypeScript 在 React 应用程序中应用自定义 React Hooks 的快速通道

学习内容

  • 通过 6 个不同的应用程序从头开始构建自定义 React Hooks
  • 探索自定义 React Hooks 的不同模式
  • 学习同时使用多个自定义钩子
  • 高级钩子使用:reducers、测试 React 自定义钩子

 要求

  • 基本的 JavaScript/TypeScript 经验
  • 对 React 有基本的了解,例如内置钩子、JSX 和语法

 描述

在本课程中,我们将通过 6 个小型应用程序重新创建生产 Web 应用程序中常用的钩子和模式。

我们将学习如何封装泛型实用程序函数、提取、业务逻辑或我们想要在自定义钩子中重用的任何代码。

我们将使用 create-react-app 作为每个应用程序、React 18 和 TypeScript 的起始端口。

 讲座内容包括:

  1. 自定义钩子简介(计数器应用程序)

  2. 自定义钩子的结构(Toggle 组件)

  3. 自定义挂钩中的生命周期(天气仪表板)

  4. 使用自定义挂钩共享逻辑 (useForm hook + localStorage)

  5. 使用上下文 API 的自定义钩子(主题切换器)

  6. 高级模式和最佳实践(Todo 应用)

  7. 测试自定义挂钩(计数器应用测试)

本课程旨在向您展示各种场景中不同类型的自定义 React Hook,以便您可以学习、识别这些模式并将其应用于您的应用程序。

完成本课程

每个示例应用都是使用 Create React App 构建的。这是我创建可以使用的 React 应用程序的最简单方法,这些应用程序没有任何不必要的混乱,但这些模式可以应用于任何 React 应用程序,无论它们是如何创建的。

本课程分为多个讲座,在每节课中,您将构建一个不同的应用程序,在某些课程中,您甚至会重用之前创建的一些钩子。该课程是一种实用的、动手实践的方法,通过实践来学习。当您与示例一起编码时,您学习得最好。

 资源

所有示例应用都在 custom-react-hooks-course Zip 中,在第 1 讲中。> 引言。

本课程适合谁:

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