React Academy

Name: React Academy
Availability: InStock

JSXFrontendWebMobileBeginner

掌握 ReactJS，使用 ReactJS Academy 构建动态用户界面。

🤖 AI 驱动📚 88 门课程👥 10万+ 学习者⭐ 4.9 分

课程概览

使用 React 构建真实界面

React 是 JavaScript 库，定义了当今大多数生产 UI 的构建方式——从单页应用和 Next.js 网站到跨平台移动和桌面应用。本课程涵盖完整的学科：组件架构、状态管理、数据获取、性能、测试和部署。它基于 React 的实际工作原理——reconciler、fiber 模型、hooks 语义——而不仅仅是其表面 API。

你将学到什么

你将从 JSX、props、state 和受控组件开始，然后深入 useEffect、useRef 和 useReducer。实战课程涵盖 React Router v6 路由、React Hook Form 表单处理、React Query 和 SWR 服务端状态、Redux Toolkit、Zustand 和 Jotai 全局状态。你将使用 TypeScript 开发 React，编写集成和 E2E 测试，用 Storybook 构建设计系统，处理 WebSockets 实时 UI，以及用 tRPC 交付类型安全的 API。此路径还包括 Next.js App Router、server components、server actions 和 NextAuth.js 认证。

学习路径

九十五门课程从 A1 到 C1。A1 和 A2 课程建立 React 基础、JSX 渲染、CSS 动画、本地存储持久化和深色模式。B1 课程通过 context 模式、i18n、React Spring、Framer Motion、dnd-kit 拖放和 TanStack Table 复杂数据表增强信心。B2 课程涉及渲染和 memoization、Suspense、代码分割、React Native for React 开发者、Vercel 和 AWS 部署以及用于桌面应用的 Electron。C1 级别以高级主题收尾：微前端架构、SSR 和 Hydration 深潜、Module Federation、Astro Islands 架构、WebAssembly 集成、Cloudflare Workers 边缘渲染和用于前端可观测性的 OpenTelemetry。

工作方式

每门课程分为简短、专注的课时，你在内置代码编辑器中完成，具有实时反馈。当你在概念或失败的测试上遇到困难时，AI 导师随时可用。你可以按顺序完成课程路径，也可以跳转到与你当前经验相匹配的级别。

开始学习 →

工具

探索课程工具

用 AI 工具和功能为你的学习加速

你的学习方式

🎯

互动课程

实时反馈的动手编程练习

🤖

AI 导师

遇到困难时立即获得 AI 帮助

💻

内置编辑器

直接在浏览器中编写并运行代码

🏆

证书

完成课程后获得证书

课程

88 门课程

React Academy 学习路径中的所有课程。

React 入门：概念与配置

A13 节课

从 React 基础开始：组件、声明式 UI，以及差异比较如何高效更新 DOM。然后配置项目（例如 Vite），运行开发服务器，并渲染您的第一个组件。

JSX 与渲染基础

A13 节课PRO

学习 JSX 规则：表达式与属性、返回片段、使用键渲染列表、简单条件判断，以及样式方案（CSS 模块、内联样式、类名辅助工具）。

React DevTools 与调试

A24 节课PRO

熟练使用 React DevTools 浏览器扩展检查组件树、分析渲染性能，并有效调试状态和 props。

React 中的 CSS 动画与过渡

A24 节课PRO

使用 CSS 过渡和关键帧在 React 中创建流畅的进入、退出和状态变化动画，无需动画库

向上提升状态与属性逐层传递的解决方案

A24 节课PRO

通过向上提升状态在兄弟组件之间共享状态，并理解属性逐层传递何时会成为值得解决的问题。

本地存储与状态持久化

A24 节课PRO

使用 localStorage 让 React 状态在页面重新加载后保持不变，处理跨标签页同步，并为每种使用场景选择合适的浏览器存储 API

使用 React 实现深色模式

A24 节课PRO

使用 CSS 自定义属性、React 上下文和 prefers-color-scheme 媒体查询构建可靠的深色模式系统，避免错误主题闪现。

属性与组合

A23 节课PRO

使用属性传递数据，通过解构设置简单的默认值，使用子元素组合 UI，并优先采用组合而非继承来构建可复用的展示组件。

状态与事件基础

A23 节课PRO

掌握 useState 和事件处理：正确更新状态、处理 onClick/onChange，并为受控输入做好准备。

表单与验证（入门）

A23 节课PRO

学习在 React 中构建包含多个输入项的受控表单，应用基础验证，并顺畅处理提交。

路由基础

A23 节课PRO

理解客户端路由：单页应用如何在不完整重新加载页面的情况下切换视图、基础路径与参数，以及活动导航状态。

useRef 与 DOM

A23 节课PRO

掌握 useRef ：在多次渲染之间保存值而不触发重新渲染，访问 DOM 节点，并安全管理计时器。

代码检查与约定

A23 节课PRO

使用 ESLint 和 React 规则保持代码整洁，并用 Prettier 自动格式化。添加脚本并快速修复问题。

受控与非受控组件

A22 节课PRO

掌握受控和非受控输入：了解各自适用的场景、简单的引用模式，以及安全的默认值。

React Strict Mode 与最佳实践

B14 节课PRO

了解 StrictMode 的作用、它会显示哪些警告，以及能够让 React 应用更易维护的编码规范。

React 中的 Portals 与模态框

B14 节课PRO

使用 React Portals 将内容渲染到父级 DOM 层级之外，构建模态框、工具提示和覆盖层。

React Children API 与插槽模式

B14 节课PRO

使用 props.children 和 React.Children 工具，并实现灵活的基于插槽的组件 API。

非受控组件与文件上传

B14 节课PRO

使用 useRef 处理非受控输入，读取文件输入值，并在 React 中处理文件上传流程。

React Context 模式与性能

B14 节课PRO

通过记忆化、拆分 Context 和选择器模式，设计能够减少重复渲染的 Context 提供器。

React 国际化（i18n）

B14 节课PRO

使用 react-i18next 为 React 应用添加多语言支持，管理翻译文件并处理语言环境切换。

React 中的浏览器 API

B14 节课PRO

将 Clipboard、Geolocation、Notifications 和 IntersectionObserver 等强大浏览器 API 集成到 React 组件中，并正确处理清理和权限。

React 中的防抖与节流

B14 节课PRO

将防抖和节流模式实现为可复用的 React 钩子，减少搜索、滚动和调整大小事件导致的过度重新渲染与 API 调用。

表单自动完成与即时搜索

B14 节课PRO

仅使用 React 状态和引用，从零构建无障碍且支持键盘操作的自动完成和即时搜索组件，无需任何库。

使用 React Hook Form 管理表单

B14 节课PRO

使用 React Hook Form 构建高性能、灵活的 React 表单：注册、验证、错误显示和模式集成。

使用 Zustand 管理状态

B14 节课PRO

使用 Zustand 管理 React 应用的全局状态：存储、操作、选择器、持久化和开发工具集成。

React Router v6 高级模式

B14 节课PRO

通过嵌套路由布局、加载器、操作、受保护路由和搜索参数状态管理，掌握超越基础路由的用法。

React 中的 TypeScript：为组件与钩子添加类型

B14 节课PRO

将 TypeScript 加入 React 项目：为 props、事件、钩子、Context 和泛型组件添加类型， confident 地进行开发。

TanStack Table：复杂数据表格

B14 节课PRO

使用 TanStack Table 强大的无头架构，构建具备排序、过滤、分页和行选择功能的生产级数据表格。

Jotai：原子化状态管理

B14 节课PRO

使用 Jotai 简洁的原子模型管理 React 状态：组合式原子可派生值、处理异步操作，并与 React Suspense 完美集成。

SWR：Vercel 的数据获取方案

B14 节课PRO

使用 SWR 的过期即重新验证策略，实现快速可靠的数据获取，并支持自动重新验证、变更和离线操作。

dnd-kit：无障碍拖放

B14 节课PRO

使用 dnd-kit 在 React 中构建无障碍、适合触控操作的拖放界面，涵盖可排序列表、看板和多容器拖放交互。

React Spring：基于物理的动画

B14 节课PRO

使用 react-spring 在 React 中创建流畅的弹簧物理动画，从简单的数值过渡到复杂的手势驱动交互。

React 中的服务器发送事件与轮询

B14 节课PRO

使用服务器发送事件和轮询策略在 React 中实现实时数据流，并理解它们针对不同使用场景与 WebSockets 的取舍。

深入理解 useEffect

B13 节课PRO

理解 useEffect ：它何时运行、与渲染有何区别，依赖数组如何控制它，以及如何编写安全的清理逻辑。

数据获取模式

B13 节课PRO

设计可靠的数据界面：处理加载中、错误、空状态和成功状态，并提供清晰反馈和轻量级骨架屏。

Context 与 useReducer

B13 节课PRO

使用 Context 在相距较远的组件之间共享状态，避免逐层传递属性；设置 Provider，并通过 useContext 读取值。

自定义钩子

B13 节课PRO

将可复用逻辑提取为自定义钩子：定义清晰的参数，返回稳定的值或操作，并保持副作用整洁。

无障碍基础

B13 节课PRO

构建包容性的界面：使用真实语义、清晰的标签和角色，并管理键盘焦点，让导航更加顺畅。

使用 Framer Motion 添加动画

B14 节课PRO

使用 Framer Motion 为 React 应用添加流畅的动画和过渡效果：motion 组件、变体、手势和布局动画。

错误边界与健壮性

B13 节课PRO

使用错误边界捕获渲染期间的错误，显示安全的备用界面，并让应用的其余部分保持响应。

使用 TypeScript 开发 React（可选）

B13 节课PRO

为 React 组件添加轻量级类型。先从属性开始，再提取可复用的泛型，让界面代码更安全、更清晰。

项目结构与约定

B13 节课PRO

组织 React 应用：按功能划分文件夹，区分小型界面基础组件与复合组件，将钩子和测试放在一起，并制定清晰的重构规则。

使用 react-window 实现虚拟化列表

B24 节课PRO

使用 react-window 将 DOM 输出虚拟化，在视口中只渲染可见内容，从而渲染数千个列表项而不会降低性能

React 中的异步模式：Promise 与并发

B24 节课PRO

使用 useEffect、useTransition、useDeferredValue 和 Suspense，以符合 React 惯用方式处理异步操作。

React 模式：渲染属性与高阶组件

B24 节课PRO

了解渲染属性和高阶组件这两种经典的代码复用模式，以及它们在钩子取代它们之前的应用方式。

useLayoutEffect 与 useEffect

B24 节课PRO

理解 useEffect 与 useLayoutEffect 之间细微但关键的差异，包括它们相对于 DOM 提交的触发时机，并正确使用它们。

Redux Toolkit 与 RTK Query

B24 节课PRO

使用 Redux Toolkit 切片和 thunk 管理复杂的应用状态，并使用 RTK Query 实现服务器状态缓存和同步。

服务器组件与 React 19 特性

B24 节课PRO

理解 React 服务器组件、use() 钩子、Actions 以及其他会改变应用数据流动方式的 React 19 API。

React Query：服务器状态管理

B24 节课PRO

使用 TanStack Query 管理服务器状态：数据获取、缓存、后台重新获取、变更和分页。

React 测试：集成测试与端到端测试

B24 节课PRO

使用 React Testing Library 编写集成测试，并使用 Playwright 编写端到端测试，验证真实的用户流程。

组件设计系统与 Storybook

B24 节课PRO

使用 Storybook、CSF3 故事和插件，独立记录、开发和测试 React UI 组件。

使用 WebSockets 与 React 构建实时界面

B24 节课PRO

使用 WebSockets 以及 Socket.IO 等库构建实时更新的 React 界面，用于聊天、通知和仪表板。

tRPC：端到端类型安全 API

B24 节课PRO

使用 tRPC 构建无需模式或代码生成的完全类型安全 API，并自动在 React 前端和 Node.js 后端之间共享类型。

Apollo Client 与 React

B24 节课PRO

使用 Apollo Client 将 GraphQL 集成到 React 应用中，实现查询、变更、缓存以及界面与服务器数据同步。

乐观界面与变更模式

B24 节课PRO

构建快速、响应及时的界面，在服务器确认前立即显示结果，并在失败时正确回滚，处理冲突。

发布 React 组件库

B24 节课PRO

将可复用的 React 组件库打包并发布到 npm，处理 ESM/CJS 双重输出、对等依赖、树摇和自动版本管理。

渲染与记忆化

B23 节课PRO

理解 React 的渲染阶段与提交阶段、组件何时更新，以及记忆化何时能带来帮助。

过渡与 Suspense（基础）

B23 节课PRO

使用 useTransition 学习并发界面基础：保持输入响应流畅，显示等待提示，并延后非紧急更新。

代码拆分与资源策略

B23 节课PRO

通过拆分页面和控件的代码，只加载所需内容。使用 React.lazy 和 Suspense ，让应用感觉加载更快。

测试 React 组件

B23 节课PRO

使用 Vitest/Jest 和 React Testing Library 设置测试；渲染组件，按角色或标签查询，并在 jsdom 环境中运行。

Next.js App Router 基础

B24 节课PRO

使用 Next.js 14+ App Router 构建全栈 Web 应用：基于文件的路由、布局、服务器组件和元数据。

Next.js 数据获取与缓存

B24 节课PRO

使用 fetch 选项、unstable_cache 和按需重新验证，在 Next.js App Router 中获取、缓存和重新验证数据。

在 Next.js 中使用 NextAuth.js 进行身份验证

B24 节课PRO

使用 Auth.js（NextAuth v5）为 Next.js 应用添加身份验证：OAuth 提供商、凭据、会话和路由保护。

面向 React 开发者的 React Native 基础

B24 节课PRO

通过学习 React Native 基础组件、样式、导航和原生设备 API，将 React 知识迁移到移动开发中。

部署 React 应用：Vercel、AWS 与 Docker

B24 节课PRO

使用 Vercel、AWS S3/CloudFront 和带有持续集成与持续交付流水线的 Docker 容器，将 React 和 Next.js 应用部署到生产环境。

React 服务器操作：表单与变更

B24 节课PRO

使用 React 19 服务器操作和 Next.js 表单操作在服务器端处理变更，为常见表单模式省去 API 路由，并支持渐进增强。

React 应用安全

B24 节课PRO

防范 XSS、CSRF 和其他漏洞，掌握内容安全策略、机密管理和安全渲染的实用方法。

为 React 设计令牌系统

B24 节课PRO

构建可扩展的设计令牌系统，为多主题 React 组件库提供支持，涵盖令牌定义、CSS 变量、Tailwind 集成和 Style Dictionary。

Electron.js：使用 React 构建桌面应用

B24 节课PRO

使用 Electron 和 React 前端构建跨平台桌面应用，涵盖 IPC 通信、原生 API 和分发打包。

复合组件

B23 节课PRO

构建复合组件：父组件提供上下文，子组件使用上下文，从而实现灵活的接口。

大规模表单（原生或轻量辅助工具）

B23 节课PRO

使用小而可靠的组件构建大型表单：字段数组、动态分区和简单的验证流程。

高级路由

B23 节课PRO

超越基础内容：学习嵌套路由布局、路由加载器的概念，以及让导航更顺畅的简单预取思路。

服务器状态与界面状态

B23 节课PRO

了解哪些内容应属于服务器缓存，哪些内容属于本地界面状态。完成获取与刷新，避免混淆不同职责。

模态框、提示框与覆盖层模式

B23 节课PRO

创建无障碍覆盖层：使用传送门渲染，将焦点保持在覆盖层内，并支持通过 Escape 键或背景快速关闭。

构建、分析与发布

B23 节课PRO

为生产环境准备应用：了解开发版与生产版构建、源代码映射、简单的环境变量，以及帮助您放心发布的小型检查。

useImperativeHandle 与 forwardRef

C14 节课PRO

掌握命令式 React API：使用 forwardRef 和 useImperativeHandle 向父组件公开自定义组件实例值，解决声明式模式难以应对的场景

useSyncExternalStore：订阅外部存储

C14 节课PRO

学习 React 18 的 useSyncExternalStore Hook，掌握将 React 组件与浏览器 API、全局存储和第三方库等外部状态源同步的正确方式

使用 React 构建微前端架构

C14 节课PRO

使用 Module Federation 和 single-spa，将大型 React 前端拆分为可独立部署的微前端。

React SSR 与水合深入探究

C14 节课PRO

理解服务器端渲染机制、水合、选择性水合，以及使用 React 的 renderToPipeableStream 流式传输 HTML。

React 高级 TypeScript 模式

C14 节课PRO

通过判别联合、映射类型、条件类型和类型安全的组件 API，提升 React TypeScript 技能。

Web 性能：核心 Web 指标与 React

C14 节课PRO

使用性能分析工具、捆绑包分析和针对性优化，测量并改善 React 应用中的核心 Web 指标（LCP、INP、CLS）。

React 项目的 Monorepo 与 Nx

C14 节课PRO

使用 Nx 在 Monorepo 中组织多个 React 应用和共享库，并利用智能任务调度和基于受影响范围的持续集成。

使用 Astro 与 React 实现岛屿架构

C14 节课PRO

采用岛屿架构，避免整页水合，并使用 Astro 仅选择性地水合需要交互的 React 组件。

React 与 WebAssembly 集成

C14 节课PRO

将 WebAssembly 模块集成到 React 应用中，处理计算密集型任务，涵盖 Rust WASM 模块、共享内存和工作线程。

边缘渲染：Cloudflare Workers 与 React

C14 节课PRO

使用 Cloudflare Workers、流式 SSR 和边缘原生缓存策略，以亚毫秒级延迟从边缘提供 React 应用。

OpenTelemetry：React 前端可观测性

C14 节课PRO

使用 OpenTelemetry 为 React 应用添加检测，收集追踪信息、衡量真实用户性能，并将前端事件与后端跨度关联起来。

React 流式传输与渐进式加载

C14 节课PRO

使用 React 18 流式 SSR 和 Suspense，逐步向浏览器交付 HTML，提升感知性能，无需等待所有数据加载完成。

使用模块联邦实现 React 微前端

C14 节课PRO

实现 Webpack 模块联邦，独立构建和部署 React 微前端，并在远程应用之间共享依赖、状态和路由。

常见问题

常见问题解答

React Academy 课程免费吗？

免费。你可以免费开始 React Academy 课程并完成它的所有互动课程。可选的 PRO 订阅解锁高级 AI 工具和可分享的证书。

学习 JSX 需要有先前的经验吗？

不需要。课程从基础开始，逐步进阶到更高难度的主题，所以即使你没有任何 JSX 基础也可以开始。

我在 CoddyKit 上怎样学习 JSX？

学以致用。简洁的互动课程将清晰的讲解与实时动手编程练习结合，24/7 AI 导师在你遇到困难时提供个性化帮助。

完成 React Academy 后能获得证书吗？

可以。PRO 学员可以参加考试，获得 React Academy 课程的可分享的完成证书，其中包含可验证的代码。

我能在手机上学习 JSX 吗？

可以。CoddyKit 支持网页版和原生 iOS、Android 应用，你可以在任何设备上学习 JSX，进度会自动同步。

立即开始 React Academy

加入数千名学习者，通过 AI 驱动的课程掌握编程。

免费开始 →浏览所有课程