The Joy of React

全新的交互式学习体验,教您如何使用 React 构建丰富、动态的 Web 应用程序。

说明

实话说,学习React是困难的。

在过去几年中,React已成为前端开发人员必备的技能。几乎每个工作岗位都将其列为先决条件!

然而,如果你尝试学习React,你就会知道它可能令人困惑和不知所措。要了解的内容太多了,而且大多数教程都假设你具有大量的先前知识和背景。

也许你陷入了教程地狱,一篇接一篇地跟着教程做,却从未取得实质性的进展,就像老鼠在跑轮上一样。你已经建立了那么多该死的“待办事项”应用程序,但是当你尝试构建自己的项目时,你不知道从何开始。

你想学习React,但你一直在苦苦挣扎。

我想帮助你。

在过去的两年里,我一直努力构建一门最适合初学者的React课程。

本课程是一门互动式课程。你不仅仅是坐在那里看我编码。课程中有大量的练习、仿真真实世界的项目,以及有趣的小游戏和活动。它不像你以前上过的任何一门课程(除非你上过我的面向 JavaScript 开发人员的 CSS 课程,那么它与那门课程相当相似)。

我们从基础开始学习React,构建一个坚实的心智模型,用于理解React并解决难题。我将分享我在近十年的专业React经验中获得的数十个顿悟。

我们不仅仅学习React;我们还涵盖了作为React开发人员成功所需的一切,包括现代JavaScript语法,以及大量有用的社区工具和包。

事实是,使用React是一种乐趣。

一旦你掌握了它,React就是一个梦想。我尝试过大多数流行的JS框架,没有其他框架能让我感到像React一样有力量。

我非常关心用户体验,包括性能、可访问性和完善度等方面。做到这些并不容易。但是React社区已经努力提供了许多出色的解决方案,我们可以利用它们。

我们首先需要建立一个坚实的基础,真正理解React的惯例和最佳实践。然后,我们将看到“秘密武器”社区包如何扩展我们的能力。

这是一个持续流动状态的配方。纯粹的快乐,我希望你能体验到。

你将会学到的

模块 1 React基础知识

在这个第一模块中,我们介绍React,并建立一个我们在整个课程中都会使用的共同理解。

我们将学习有关JSX、组件和属性的所有知识。我们将了解如何在React中进行迭代和条件渲染。我们还将介绍在React中的样式设置。

作为一个曾经亲自教授过数百名学生React的人,我知道所有常见的初期障碍,并且在本模块中直接解决它们。

我们在本模块中深入探讨了许多内容。到第一模块结束时,你将理解JSX与模板语言的区别,什么是React元素,为什么需要使用键… 你甚至将从头开始构建自己的无状态迷你React,这样你就能准确地了解它在底层是如何工作的!

模块2 处理状态

真正的魔力从状态开始。React状态使我们能够创建具有活力的动态应用程序。

在这个模块中,我们将学习如何使用事件处理程序和React的useState钩子根据用户操作更新UI。我们将学习如何连接表单,如何处理复杂的状态结构,以及如何在整个应用程序中管理状态。

我们还将加深对React工作原理的理解。我们将了解为什么React有时会比其他框架更复杂。我们将发现React组件实例扮演的关键角色。我们还将学习如何利用提升状态等最佳实践。

这个模块有很多有趣的练习。我们将构建几个小游戏,并看看如何构建我Gradient Generator项目的最简版本。

模块 3 React Hooks

2019年,React通过引入Hooks进行了革命性的改变。Hooks允许我们”钩入”React内部。

在本模块中,我们将超越useState钩子 ,涵盖以下内容:

  • 使用useEffect钩子管理副作用。
  • 使用useRef钩子捕获DOM引用。
  • 使用useMemo和useCallback优化应用程序的性能。
  • 使用自定义钩子创建我们自己的抽象。
  • 使用Fetch和第三方useSWR钩子从网络获取数据。

在这个模块中,我们将涵盖一些React中最困难的概念,比如避免在副作用中使用过时的值。为了帮助我们理解这些困难的内容,我们将加倍努力去理解React的运作方式,学习为什么不可变性如此重要,什么是”渲染”,以及其他相关知识。

模块 4 组件API设计

在课程的这一阶段,我们已经涵盖了React API的很大一部分,但我们一直关注的是所有内容的工作原理。在这个模块中,我们的重点开始转变。

我们创建的组件应该是令人愉悦的:它们应该易于理解、可组合,并提供适当的灵活性。更重要的是,它们应该提供出色的用户体验,包括可访问性、可用性和性能。

这个模块的重点是关于组件的思考精炼。我将教你我每天在决定如何组织代码时使用的思维模型。

在这个模块中,我们将涵盖大量的实用技巧,从多态性到属性委托,再到复合组件和插槽。你还将学习React Context,并了解它在实现我们目标时的用途。

无障碍性是整个课程的关注重点,但在这个模块中,我们真正深入探讨了这个问题。我们将从头开始构建一些著名棘手的组件,比如模态框,注重可用性和可访问性,并看看为什么使用库可能是一个更好的选择。

模块 5快乐实践

我从2015年开始使用React,一路上学到了很多东西。我在这个模块中的目标是帮助你省去几年的试验,直接跳到那些令人愉悦的模式和实践。

在开发社区中,我们经常谈论”最佳实践”,但实际上,并不存在所谓的最佳实践。它取决于你要优化什么!这都是权衡取舍。

在这个模块中,我将分享我最喜欢的”愉悦实践”,这些是我在8年时间里不断完善的设计模式和习惯,它们让使用React变得愉快。

以下是我们将涵盖的一些例子:

  • 最小特权原则,以及为什么我尽量让组件具有尽可能少的知识和权力。
  • 父组件和所有者的区别,以及如何一举简化代码并提高性能。
  • Immer的魔力,以及它如何让复杂的状态变得不那么可怕。
  • 真正理解React元素、引用和键等内容,以及深入理解如何揭示全新的模式,让我们能够充分利用它们。

模块 6 全栈React

在这个模块中,我们将超越浏览器,探索React在全栈环境中的工作方式,使用Next.js。

Next.js是一个基于React的元框架。它自2016年以来就存在,但最近完全重建了。在2023年5月,Next.js将其新的”App”路由器从测试版中推出,并开启了React新时代的开端。

在这个模块中,我们将学习如何使用最新版本的Next.js构建高性能的全栈应用程序。我们涵盖了所有闪亮的新技术,包括:

  • React服务器组件
  • Suspense
  • 具有选择性注水的流式服务器端渲染
  • Next.js应用路由器

我们将学习这些东西的工作原理,以及它们如何结合在一起提供令人难以置信的下一级用户体验。这些都是最前沿的技术,而这门课程是真正探索这个新世界的首批深入资源之一。

这是所有内容汇聚的模块。利用我们在课程的前五个模块中学到的一切,我们将从项目初始化到部署构建动态的全栈React应用程序。

毕业项目

在各个模块之间,通过三个具有挑战性的项目,你将巩固和巩固你在这些模块中学到的所有知识。

项目1单词游戏

学习React最好的方法之一就是通过构建游戏来学习。在这个第一个项目中,我们将构建一个Wordle的克隆版本,这是一个流行的在线猜词游戏。

这个项目的主要重点是让你熟悉React的状态管理,但它也会让我们接触到一些关于应用程序结构的有趣问题。你需要决定如何在应用程序中传递状态,并考虑不同的权衡取舍!

项目2 Toast组件

我们将构建一个可重用的低级别<Toast>组件!

这比看起来要难得多。我们构建的组件将符合所有的无障碍性准则,并注重可用性和用户体验。我们还将深入思考其API设计,确保它具有组合性和灵活性。

我们还将构建一个迷你应用程序,帮助我们自定义和生成吐司提示框。

几年前,我为一家本地编程训练营创建了一个React课程,其中包括了这样一个项目,构建一个看似简单的UI组件。学生们说这是一个非常有启发性的练习。

项目3基于 MDX 的交互式博客

在2018年创建我的博客时,我不想做一个乏味的静态博客。我想创建定制的小部件,通过实践帮助读者学习概念。

在这个最终项目中,我们将构建终极博客。你将学习如何设置环境,以便在内容中可以充分利用React的全部功能。

声明:本站所有资源、素材等全部来源于互联网,赞助VIP仅用于对IT资源服务器带宽等费用支出做支持,从本站下载资源,说明你已同意本条款。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
TheItzy » React的乐趣 | The Joy of React