学 React - 编程课程

通过编写 React 来学习 React。本 React JS 教程将带你从第一行 JSX 学到 Hooks、状态管理和完整应用，你编写的每个组件都会在手机上的实时预览中直接渲染。

88 门课程和 324 节互动课，级别从 A1 到 C1。阅读简短概念，输入真实代码，点击运行并查看结果。无需笔记本电脑，也无需进行设置。

在手机上编写代码

• 专为 JSX 打造的代码编辑器，带有实时预览，可在应用内渲染你的组件

• 运行时（ReactDOM 和 Babel）已集成到应用中，因此代码在设备上运行，而不是在服务器上运行

• 多文件项目：将一个组件导入另一个组件，按照真实应用的构建方式进行开发

• 点击渲染出的按钮，在表单中输入内容，观察 UI 响应

实验室

• Hooks Lab：实时查看每一次状态变化和重新渲染

• Props 控制旋钮：使用滑块更改 prop，观察组件更新

• 渲染分析器和状态时间线（Pro）：找出哪个组件重新渲染以及原因，然后回溯查看你的状态

循序渐进，从入门到进阶

• 基础：JSX、组件、props、状态、事件、列表和 keys、条件渲染

• Hooks：useState、useEffect、useRef、useReducer、自定义 Hooks、useLayoutEffect 等

• 表单和验证、React Hook Form、受控和非受控输入

• 状态管理：Context、Redux Toolkit 和 RTK Query、Zustand 和 Jotai

• React Router、数据获取、TanStack Query、SWR 和乐观 UI

• TypeScript、测试、Storybook、无障碍和安全性

• 性能：记忆化、代码拆分、Suspense、过渡、虚拟化列表

• React 19 和 Server Components、SSR 和水合、流式传输

• Next.js App Router、数据获取和身份验证

• 面向 Web 开发者的 React Native 基础

• 部署、微前端和模块联邦

构建真实项目

20 个引导式项目，一次完成一个小步骤：点赞按钮、个人资料卡片、小费计算器、答题游戏、秒表、注册表单、购物车、图片轮播、分页列表、待办事项应用等。每一步都会检查你的组件是否真正有效，然后你才能继续。

练习直到熟练

• 30 个编程任务（简单、中等和困难），涵盖 Hooks、渲染、表单、Context 和性能

• UI Match：重建目标组件，并根据结构、样式和文本获得分数

• Bug Hunt：在损坏的组件中找出并修复错误

• Component Recall：结合间隔重复，将缺失的部分重新输入到已经成功运行的代码中

• 包含 50 道题目的测验、50 道面试题和一份速查表

• 每日挑战、连续学习、XP 和排行榜

AI 导师（PRO）

卡在某个 Hook 或错误上？向 AI 导师请求清晰的解释，让 AI 检查你的代码并提出修复建议，或针对任意主题生成自定义课程。

证书（PRO）

通过最终考试并获得可分享的证书。

免费版和 Pro

免费版：第一门课程、一个引导式项目、2 个编程任务、带实时预览的代码编辑器、Hooks Lab、Props 控制旋钮、Bug Hunt，以及每天 3 次 UI Match 检查。免费版会显示广告。

Pro：全部 88 门课程、所有项目和任务、AI 导师、渲染分析器和状态时间线、证书考试，以及无广告体验。

该应用提供 22 种语言版本。

React 是 Meta Platforms, Inc. 的商标。Next.js 是 Vercel, Inc. 的商标。这是一款独立的学习应用，与 Meta 或 Vercel 没有附属关系，也未获得其认可。

隐私政策：https://www.coddykit.com/terms/privacy-policy