React学习指南：2022年 10门最佳 React 课程

什么是 React ？

React是一个用于构建用户界面的JavaScript库，它由 Meta（前Facebook） 于 2013 年开发并发布，用于设计 Facebook、Instagram 和 WhatsApp 的用户界面。

由于React是开源的，它也被 Netflix、纽约时报、AirBnb、Discord 和 DropBox 等其他大公司使用。使用React，开发人员可以更加轻松地创建交互式 Web 应用程序。

由于其简单易用，React已经成为了最热门的的JS框架之一。同时，React 还有一个非常活跃的开发者社区，并且任何了解 React 的人都可以轻松使用React Native来制作移动应用程序。

最佳 React 课程目录

以下是本文介绍的10套最佳React课程大纲，点击课程名称的链接，可以跳转到对应的课程介绍。

课程名称	时长	课程简介
1. Full Modern React Tutorial (YouTube)	3–4 小时	适合初学者的最佳免费深度 React 课程
2. Learn React for free (Scrimba)	12小时	最佳基于项目的免费React 课程
3. Modern React with Redux (Udemy)	52 小时	最佳初学者到高级深度 React 课程
4. The Road to React (Robin Wieruch)	不适用	最好的基于文本的React课程，还包括电子书
5. The Beginner’s Guide to React (egghead.io)	2-3 小时	React 的最佳免费入门课程
6. Complete Intro to React, v7 (Frontend Masters)	7–8 小时	最佳深度 React 课程
7. React – The Complete Guide (Udemy)	49 小时	最佳初学者到高级深度 React 课程
8. React and TypeScript (Frontend Masters)	5–6 小时	在 React 中使用 TypeScript 的最佳课程
9. Testing React with Jest and Testing Library (Udemy)	7–8 小时	在 React 中编写测试的最佳课程
10. Epic React (Kent C. Dodds)	19 小时	React 最佳高级实践课程

1. Full Modern React Tutorial (YouTube)

最佳 React 课程的第一选择是 Net Ninja的YouTube频道提供的的 Full Modern React Tuterial

在这个免费课程中，你可以从零开始学习 React，然后再深入了解状态管理、异步代码、内置钩子和自定义钩子之前等高级内容。你可以学习到所有关于React的基础知识，包括：设置、组件和路由。

参加此课程，你需要具备一些 JavaScript 基础知识。

你会学到什么

你将在 create-react-app 工具的帮助下创建一个 React 应用程序来样板化一个新的 React 应用程序。

然后，你会开始搭建第一个入门项目，紧接着开始使用组件来填充来设计你的用户界面，以及如何何为你的 UI 添加样式以使其对更加用户友好。

你已经设计了一个静态网页，但还没有交互性。这时候你会学习通过事件来允许你根据用户输入执行操作，例如单击动作会导致组件状态的改变，你还将学习如何使用钩子管理它们（并最终创建你的自定义钩子）。

接下来，你将学习如何实现用户可以填写的表单，然后你可以使用这些表单从服务器发送和接收数据。最后，你还将了解 React 路由器、处理 404 页面等错误等知识。

课程详情

本课程时长 3-4 小时，你可以通过观看讲座视频并跟随讲师编写代码来学习。

课程来源	YouTube（Net Ninja）
国内观看	Bilibili（疯狂滴小黑）
讲师	Shaun Pelling
等级	初学者
时长	3–4个小时
播放量	623K
证书	无

Shaun Pelling 是 The Net Ninja 账号的所有者，他在 Udemy 上拥有超过 100 万订阅者和超过 85,000 名学生。他是一位经验丰富的内容创作者，在电子学习和编程行业拥有丰富的历史，拥有曼彻斯特大学天体物理学硕士学位。

他的Udemy课程质量也非常高，例如：Build Web Apps with React & Firebase

2. Learn React for free (Scrimba)

排名第二的React 的最佳课程是Scrimba提供的免费课程：Learn React for free

在这个免费的项目驱动课程中，你将通过动手实践学习现代 React 的基础知识，还可以通过完成交互式编码挑战和有趣的有趣项目。

要参加本课程，你应该对 HTML、CSS 和 JavaScript 有基本的了解。

你会学到什么

本课程通过讨论 React 流行背后的原因来开始。然后，你将了解 JSX 是如何提供React 的开发体验的。之后，你将开始构建静态网页，学习基本概念，例如重用、样式设置以及将参数传递到组件中。

接下来，你将了解状态，这是创建交互式网站的关键部分。你将了解所有关于状态的知识——包括使用钩子管理状态、重构状态等等。

接下来会学习表单，因为它们允许用户提交信息，然后你可以使用这些信息发出请求或存储在你自己的服务器中。

课程详情

本课程时长 12 小时，共有 148 个交互式视频，分布在 4 个模块中。你可以通过观看视频、完成 140 多个交互式编码挑战和构建八个有趣的项目来学习。

这些项目包括构建一个 React 信息网站、一个 AirBnb Experiences 克隆、一个 meme 生成器、一个笔记应用程序和一个 Tenzies 游戏等

机构	Scrimba
讲师	Bob Ziroll
等级	初学者
时长	共 12 小时
学生数	200K
证书	无

Bob Ziroll 是 Scrimba 的教育主管，他毕业于Brigham Young University，获得传播学学士学位（广告重点），并在 BBDO 纽约完成了战略规划师的实习，他热衷于学习和帮助他人实现职业目标。

3. Modern React with Redux (Udemy)

第三个最佳React 课程是 Stephen Grider 的 Modern React with Redux

在这个付费的 Udemy 课程中，你将学习使用 React 和 Redux 构建动态和实时 Web 应用程序的基础知识和高级概念，每个部分都围绕使用你所学的功能构建应用程序展开，在课程结束时，你将精通 React 和 Redux。

要参加本课程，你需要有使用 JavaScript 的经验。

你会学到什么

本课程首先向你介绍了 React 的世界，你将从 JSX、props、states、refs 和组件等基本功能开始，它们是任何用户界面的构建块。从那里，你将了解生命周期方法、使用表单和事件处理用户输入，并最终向服务器发出 API 请求。

接下来，你将了解 React 中的hook，这是你需要了解的最重要的 React 概念之一。你将了解为什么应该使用钩子以及在实践中何时使用它们。你将开发一个视频流应用程序，然后你可以使用 Vercel 或 Netlify 将其部署到 Web。

接下来，你将深入了解 Redux，这是一个状态管理库，可以让创建复杂的应用程序变得简单。你将深入了解它的源代码并了解它在幕后的工作原理，以及如何利用 Redux 的异步操作、表单和开发工具将 React 与 Redux 集成。

课程的最后部分涵盖了更高级的主题，在创建更复杂的 Web 应用程序时会有所帮助。

课程详情

本课程时长 52 小时（如果不包括旧版 React 的讲座，则为 34 小时），你可以通过观看讲座视频和做提供的练习来学习。

课程来源	Udemy
课程下载	视频+课件+中英字幕
讲师	Stephen Grider
等级	初级-中级
时长	52小时
学生数	274K
评分	4.7 / 5.0 (77K)
证书	付费

Stephen Grider 一直在为旧金山湾区的顶级公司构建复杂的 Javascript 前端。他也是Udemy的明星讲师，与其他软件工程师分享他的知识。

4. The Road to React (Robin Wieruch)

该付费课程包括阅读书籍和练习教程，为你带来两全其美的体验。

The Road to React 旨在帮助 JavaScript 初学者掌握 React 框架。你将学习如何使用现代 React 代码并遵循最佳实践从头开始创建真实世界的应用程序（具有客户端过滤、服务器端过滤和分页等功能）。

你需要一些 JavaScript 经验才能参加本课程。

你会学到什么

首先，你将了解 React，在其中学习如何设置项目以及 React 如何与 JavaScript 协同工作。然后，你将学习 React 中的基本 React 概念，如组件组合、JSX、钩子和道具，以构建你的第一个基本 React 应用程序。

接下来，你将学习如何处理来自 API 的数据。这包括在 React 应用程序中获取、显示和与数据交互。之后，你将了解如何测试你的 React 组件以及如何在你的项目中组织它们。在更新旧代码时，测试对于高枕无忧至关重要。

将涵盖高阶组件、渲染道具组件和分页获取等高级概念，为你提供创建强大抽象所需的所有工具。尽管你可能不会在创建的每个应用程序中都使用这些概念，但随着它们变得越来越复杂，大多数应用程序都需要它们。

最后，你将学习如何在构建应用程序并将其部署到 Firebase上。

课程详情

这本书长 253 页，而课程由 50 多个练习和 80 多个课程模块组成。你将通过阅读本书并练习你在练习中学到的内容来学习。

网站	roadtoreact.com
讲师	Robin Wieruch
等级	初学者
时长	自由安排
证书	无

Robin Wieruch 是一名自雇软件和网络工程师，致力于教授客户端-服务器架构的 JavaScript。

在获得计算机科学硕士学位后，他从创业界获得了经验，在他的职业生涯和业余时间都大量使用 JavaScript。最终，这促使他向其他人教授这些课程，提供在线课程和现场咨询。

5. The Beginner’s Guide to React (egghead.io)

The Beginner’s Guide to React 适用于……嗯，初学者和任何希望为 React 打下坚实基础的人。

它会教你立即开始在 React 中构建 Web 应用程序所需的一切。在本课程结束时，你将在 Internet 上部署一个完整的 React 应用程序。

要参加本课程，你需要具备一些 JavaScript 和 HTML/CSS 经验。

你会学到什么

本课程首先讨论为什么应该使用 React 而不是 vanilla JavaScript 来创建网站。然后，你会看到纯 JavaScript 会出现什么问题，以及 React 如何在后台解决这些问题。实际上，你将使用 JavaScript 创建用户界面，然后使用 React 来体验不同之处。

接下来，你将学习 JSX 以及它如何转换为常规 JavaScript 函数调用和对象。React 组件可以帮助你简化和重用部分代码，从而快速缩短开发时间。

再接下来，你将学习如何使用钩子管理这些组件的状态，这是 React 的另一个基本特性，甚至知道如何创建自定义钩子。

最后，你将学习如何构建用户可以填写的表单，并在提交后向服务器发出 HTTP 请求，然后最终使用 Codesandbox、GitHub 和 Netlify 将你的 React 应用程序部署到 Web。

课程详情

本课程时长 2-3 小时，这个 28 部分课程中的每节课都是一个空白 index.html 文件，你将与讲师一起编写代码，并在学习过程中填写文件。

提供者	egghead.io
讲师	Kent C. Dodds
等级	初学者
工作量	2-3小时
学生数	7K
评分	4.6 / 5.0
证书	无

除了这套免费课程外，Kent C. Dodds 还创建了另一个更高级的付费课程。

6. Complete Intro to React, v7 (Frontend Masters)

想要学习使用现代 React 构建真实应用程序，不可错过前端大师提供的最新React课程，这是第7版， Complete Intro to React, v7

这个付费的深入课程将帮助初学者了解从头开始构建 React 应用程序的每一部分。它涵盖了 React 中的最新功能，包括钩子、效果、类组件、上下文、引用和门户。

不仅如此，你还将探索整个 React 生态系统中的流行工具（如 Parcel、ESLint、TailwindCSS 和 React Router），以构建一个完整的应用程序来浏览可收养的宠物。

要参加本课程，你需要有一些 JavaScript 经验。

你会学到什么

本课程首先介绍 React，设置 VSCode 后，你将从 index.html 文件开始为你的课程项目设置基础。从那里，你将构建一个简单的“Hello World”React 应用程序，其中包含用于在 DOM 上呈现文本的组件，从而有效地创建用户界面。你将了解父组件和子组件之间的关系以及它如何影响设计选择。

在 Vanilla React 中编写完所有内容后，是时候探索一些基本的 JavaScript 工具了，比如帮助你安装包的 npm、帮助你编写干净代码的 Prettier 和 ESLint、用于源代码管理的 Git 等等。知道如何使用这些工具将使你的工作效率提高十倍。

接下来，你将了解 JSX 以帮助你进一步压缩代码。Hooks 将帮助你管理组件的状态，你将了解多种类型的 Hooks。在构建交互式网站时，你还需要考虑处理用户输入，并且你将深入了解创建可用于生产的网站所需的概念。

在课程的最后部分，你将发现 React 提供的巨大功能，从 React Router 开始管理浏览器导航状态以及错误边界、上下文和门户。最后，课程通过提供额外的资源来结束。

课程详情

本课程时长 7-8 小时，你可以通过观看讲座视频并跟随讲师构建宠物收养网站来学习。

课程来源	Frontend Masters
课程下载	高清视频+中英字幕
讲师	Brian Holt
等级	初学者
时长	7–8小时
证书	无

此前，Brian 是 Netflix、Microsoft 和 Reddit 的 JavaScript 工程师。现在，他在 Stripe 担任开发工具的产品经理。不工作时，Brian 会抽出时间教授课程。

7. React – The Complete Guide (Udemy)

React – The Complete Guide 是一门全面的付费课程，涵盖了成为 React.js 开发人员所需了解的所有内容。

你将从头开始深入学习 React，逐步深入了解所有核心基础知识，探索大量示例，并向你介绍高级概念。不仅如此，你还将通过动手实践学习 React 的最新模式和最佳实践。

该课程有两条路径：一条完整路径长达 40 多个小时，另一条总结路径长达 4 小时。

要参加本课程，你需要具备 JavaScript 和 HTML/CSS 基础知识的基本知识。

你会学到什么

本课程分为三个主要部分：基础与基础、高级概念、总结与复习。

在 Basics & Foundations 部分，你将了解每个 React 开发人员编写高质量应用程序所需的关键概念。例如，了解组件以及如何组合它们来构建用户界面，学习如何使用事件和数据，包括道具和状态，以及如何为你的 React 应用程序和组件设置样式。最后，你将了解 React 钩子，这是现代 React 中最重要的概念。

然后在高级概念部分，你将学习如何构建可用于生产的应用程序。你将通过制作自己的自定义钩子来增加你所研究的内容。你还将使用 React 的 Concepts API 和 Redux 探索应用程序范围的状态管理、使用表单处理用户输入、发送 HTTP 请求以及使用副作用。

接着是学习路由、构建看起来像多时代应用程序的单页页面、部署你的 React 应用程序、深入了解另一个名为 Nextjs 的框架，等等。

课程的总结部分是你在课程中学习的 JavaScript 和 ReactJS 等主题复习总结和提高。

课程详情

本课程的完整路径为 40 多个小时，而摘要路径为 4 小时。

你可以通过观看涵盖理论并提供小型演示和示例的讲座视频来学习。你还可以参加示例项目以及挑战和练习，以帮助你习惯该框架。

课程来源	Udemy
课程下载	视频+课件+中英字幕
讲师	Maximilian Schwarzmüller
等级	初级-中级
时长	共49小时
学生数	635K
评分	4.6 / 5.0 (163K)
证书	付费

Maximilian 是Udemy的明星讲师，也是 Academind 的联合创始人，该平台拥有 40 多个主要专注于 Web 开发的高质量编程视频课程，本课程完全与最新版本的 React React 18 保持同步。

8. React and TypeScript (Frontend Masters)

TypeScript 是对 JavaScript 的重大升级，如果你想在学习 TypeScript 的同时实现 React 应用程序，React and TypeScript 已经为你准备好了。

在这个付费的Front Masters 课程中，你将学习 TypeScript和React

你将构建一系列简单的 React 组件来帮助你学习 TypeScript。你将学习到基本的状态管理、高级的 React 组件，以及如何同时变得非常灵活和类型安全。你还将获得一些关于将应用程序从 JavaScript 迁移到 TypeScript 的提示和建议。

要参加本课程，你需要对 React 有很好的了解。

你会学到什么

本课程通过讨论 TypeScript 编程语言的优缺点开始本。然后，你将从常见的 propTypes 开始学习（一种让 TypeScript 知道在使用 props 时期望什么类型的方法）。由于 TypeScript 强制执行严格类型，而 JavaScript 没有，因此你需要相应地调整你的 React 代码。

组件构成了你的用户界面的大部分，因此你将学习如何以 TypeScript 方式使用组件。在学习 reducer 之前，你将学习如何添加钩子和异步事件。之后，你你学习上下文 API 并使用它管理状态，从而为应用程序创建亮模式和暗模式。

然后，你将了解有关 TypeScript 语言的更多信息，探索它的泛型、实用程序类型和模板文字。有了这些更高级的概念，你将创建更高阶的组件并学习高级组件模式。

课程详情

本课程时长 5-6 小时，你可以通过观看讲座视频并跟随讲师编写代码来学习。

课程来源	Frontend Masters
讲师	Steve Kinney
等级	高级
工作量	5–6个小时
证书	无

Steve 是 Temporal 的前端架构师。

此前，他是 Twilio 和 SendGrid 的前端架构师。他是科罗拉多州丹佛市图灵软件与设计学院前端工程项目（这是一个非营利性的开发人员培训项目）的名誉主任和创始人。

他还以学校教师的身份教授特殊教育和网络开发。

9. Testing React with Jest and Testing Library (Udemy) 

通过 Testing React with Jest and Testing Library 来学习测试应用程序的最佳实践。

如果你希望在现有应用程序中编写新的代码，而不会破坏其他的事情，则需要进行自动化测试。这个付费课程从简单的测试开始，逐渐建立到测试异步页面更改、在上下文提供程序中自动包装组件等等。

要参加本课程，你需要具备一些 JavaScript 和 React 经验。

你会学到什么

本课程首先介绍 React 测试库和 Jest，React 测试库为测试提供了一个虚拟 DOM，而 Jest 运行测试、查找测试并确定测试是通过还是失败。你将了解这两种便捷工具背后的理念，并查看一些使用中的示例。

你将从测试影响 DOM 的交互开始，例如单击按钮和选中复选框。然后，你将通过构建一个应用程序来构建更复杂的功能和测试，用户可以在其中设计和订购冰淇淋圣代。

你还将学习如何使用 Mock Service Worker 测试更复杂的用户交互，例如异步功能和模拟服务器响应。

如果你是 React 新手，本课程提供可选讲座，解释 React 语法和决策，以帮助你跟上进度。

课程详情

本课程时长 7-8 小时，你可以通过观看讲座视频和做笔记来学习。在本课程中有很多机会练习你的技能，比如代码测验，你会得到一个规范并为它编写一个测试。

课程来源	Udemy
课程下载	视频+课件+中英字幕
讲师	Bonnie Schulkin
等级	中级
时长	7–8个小时
学生数	23K
评分	4.6 / 5.0 (4K)
证书	付费

Bonnie Schulkin 在各种训练营教授软件开发，自 90 年代中期以来一直在软件行业工作——远在旧金山科技界的许多程序员诞生之前！

10. Epic React (Kent C. Dodds)

Kent C. Dodds 的 Epic React 是一系列代码交互研讨会，旨在让 Web 开发人员超越自我。你将学习如何创建具有尖端功能的 React 应用程序，这些功能可以扩展以满足用户、团队和项目利益相关者的需求。

这个付费的自定进度研讨会集合将从 React 旅程的开始，引导你完成应用程序架构。

注意：该课程具有挑战性，它会迫使你亲自动手，来完成每个研讨会中大量的练习。

要参加本课程，你应该对现代 JavaScript 和 Web 开发 (HTML/CSS) 有深入的了解。

你会学到什么

你将通过学习 React 的基础知识来构建用户友好的应用程序和库来开始本课程。这将包括学习钩子，它可以帮助你在 React 应用程序中开发组件和管理状态。然后，你将创建自己的自定义挂钩，作为 API 供其他开发人员使用。

接下来，你将了解几种现代设计模式，它们有何不同，以及何时使用其中的一种。有些模式可能更注重性能，因此你将学习几种工具和技术来诊断、分析和修复 React 应用程序中的性能问题。你还需要确保已经彻底测试了你的应用程序，以便最终用户不会有任何令人讨厌的意外。

异步状态管理可能很麻烦。幸运的是，Suspense 可以帮助你保持干净、可维护、简单和可读的代码。

你将在课程的最后部分使用 Suspense 和其他流行工具，从头开始构建应用程序。本课程将涵盖有关构建前端 React 应用程序的所有内容，从绝对基础知识到你将在构建真实世界的 React 应用程序时遇到的棘手部分。

课程详情

本课程时长 19 小时，包括 8 个研讨会，你将通过观看讲座视频和尝试动手交互式编码研讨会来学习。

网站	epicreact.dev
讲师	Kent C. Dodds
等级	高级
时长	共19小时
证书	付费

Epic React 有三个定价级别。

该课程还包含与 React 专家的 10 个完整小时的视频对话。

Kent C. Dodds是一名软件工程师教育家，在创立自己的公司之前，他曾在 Paypal 和 Google 工作过。

总结

React 是最流行的 JavaScript 框架，有超过 1100 万个网站积极使用它。

在本文中，我们挑选了最好的在线课程、教程和资源来学习 React，包括初级，中级和高级课程，不管你是哪个阶段的开发人员，你都能到合适的课程。你也可以去 口袋资源网找更多你感兴趣的课程。

学习愉快，同时别忘记了React庞大的开源社区，你需要的任何东西，遇到的任何困惑，在那里都能找答案。