学 React: 编程课程
学 React: 编程课程 — 通过编写 JSX 并在手机上运行，学习 React 编程
学 React: 编程课程 是一款免费开始使用的 iOS 和 Android 应用，面向只有少量 HTML、CSS 或 JavaScript 基础的初学者，以及从其他框架转来的开发者，教授 React 编程。在代码编辑器中编写 JSX，点击“运行”，即可在应用内的实时预览中观看组件渲染效果。88 门课程和 324 节课程带你从第一个组件一路学到 hooks、状态管理和 Next.js，期间还会完成 20 个引导项目。
- 价格
- 免费，可升级至 Pro
- 平台
- iOS 和 Android
- 语言
- 22
- 年龄分级
- 4+
- 版本
- 82.6.1
- 需要
- iOS 15.1 或更高版本
- App Store
- 3.8 ★ (4)
你的组件会在手机上渲染，而不是在服务器上渲染。
运行时、ReactDOM 和 Babel 都已内置于应用中，因此你编写的 JSX 会在设备上编译并显示。你可以点击刚刚构建的按钮，在表单中输入内容并看到 UI 做出响应，这种反馈循环正是让 hooks 开始变得易于理解的关键。
这是什么
学 React: 编程课程 是一款适用于 iOS 和 Android 的免费开始使用的 React 课程应用，包含 88 门课程和 324 节互动课程，内容从第一行 JSX 一直延伸到 hooks、状态管理、React 19 和 Next.js App Router。内置编辑器会在设备上编译你的代码，并在实时预览中渲染组件；20 个引导项目会在你继续学习前检查每一步。它是一款独立的学习应用，与 Meta 或 Vercel 没有任何关联。
应用内
界面展示
课程
React 课程涵盖的内容
从应用自己的课程列表中选出的 88 门课程，按照通常初次学习 React 的顺序排列。
React Kickoff、JSX 以及 Props 与组合
组件、声明式 UI 以及 React 如何更新 DOM；然后学习 JSX 规则、渲染列表和使用 props 向下传递数据。
State、Events、Forms 和 useRef
useState 与事件处理、带验证的受控表单，以及用于保存不会触发渲染的值和访问 DOM 的 useRef。
useEffect、数据获取和自定义 Hooks
学习 effects 何时运行、依赖数组、API 调用的加载与错误状态，以及如何将可复用逻辑提取到自己的 hooks 中。
Context、Redux Toolkit 和 Zustand
使用 Context 和 useReducer 共享状态，避免逐层传递 props；然后学习用于大型应用的 Redux Toolkit、RTK Query、Zustand 和 Jotai。
路由、React Query 和大规模表单
客户端路由与 React Router 模式、使用 TanStack Query 和 SWR 管理服务器状态、React Hook Form，以及乐观 UI。
性能、测试和 TypeScript
渲染与记忆化、代码拆分、虚拟化列表、使用 React Testing Library 进行测试，以及为组件和 hooks 添加类型。
React 19、Server Components 和 Next.js
学习 Server Components 和 Actions、SSR 与 hydration，然后学习使用数据获取、缓存和身份验证的 Next.js App Router。
工作原理
课程如何进行
每节课程都会先讲解一个简短概念，紧接着让你编写并运行代码，因此概念和结果会同时显示在同一个屏幕上。
阅读一个概念
从学习路径中打开一门课程，阅读一节简短课程，例如了解状态如何更新，或列表为什么需要 keys。课程概览会标明哪些课程免费，让你在决定订阅前就能了解课程形式。
编写 JSX 并点击“运行”
在代码编辑器中输入组件并运行。实时预览会在应用内渲染你的组件，因此你可以点击按钮、在输入框中输入内容，并看到代码的运行效果。
检查结果，然后继续构建
测验、编程任务和引导项目会确认你真正掌握了概念；如果你看不懂某个 hook 或错误，AI 导师会为你进行解释。Bug Hunt 和 UI Match 会让你再次练习这些概念。
包含内容
应用包含的内容
88
门课程，324 节课程
从 JSX、props 和状态，到自定义 hooks、表单、Context 和 Redux Toolkit，再到 Server Components、SSR 和 Next.js App Router，按 A1 到 C1 分级组织。
实时
带实时预览的编辑器
专为 JSX 打造的代码编辑器，组件会直接在应用内渲染。多文件项目支持将一个组件导入另一个组件，正如真实应用的构建方式。
20
引导项目
一步一步构建点赞按钮、个人资料卡片、小费计算器、问答游戏、购物车等更多内容。每一步都会检查组件是否真正正常运行。
实验室
Hooks Lab 和 props 控件
实时观察每一次状态变化和重新渲染，并通过滑块更改 prop，查看组件如何更新。渲染分析器和状态时间线属于 Pro 功能。
30
编程任务
涵盖 hooks、渲染、表单、context 和性能的简单、中等及困难级别任务，另外还有采用间隔重复的 UI Match、Bug Hunt 和 Component Recall。
AI
AI 导师
请求解释，让 AI 检查你的代码并提出修复建议，或针对任何主题生成自定义课程。导师和证书考试属于 Pro 功能。
背景
要编写 React，你究竟需要理解什么，又应该按什么顺序学习？
React 是一个 JavaScript 库，用于通过小型、可复用的组件构建用户界面；当组件的数据发生变化时，这些组件会自行重新绘制。大多数初学者卡住的地方并不是语法，而是其底层模型：什么是渲染，什么算作状态，以及 effect 何时运行。按照正确顺序学习这些概念，并在每一步都通过屏幕上的内容进行验证，比一次性读完所有内容更高效。
组件和 props复用的基本单元
组件是一个返回界面片段的函数，而 props 则是它从父组件接收的输入。由于数据会通过 props 向下传递，你可以读懂一个组件，并预测它会渲染出什么。
状态随时间变化的内容
状态是组件在多次渲染之间记住的数据，例如输入框中的文字，或菜单是否打开。更新状态会安排一次新的渲染，这正是几乎所有交互式屏幕背后的机制。
Hooks 和 effects初学者最容易卡住的地方
useState、useRef 和 useReducer 等 hooks 让组件能够保存状态并访问 DOM。useEffect 会在渲染后运行代码，而错误的依赖数组是造成循环和数据过时最常见的原因。
渲染和重新渲染应用为什么感觉运行缓慢
当组件的状态或 props 发生变化时，它会重新渲染，其中的组件也会如此。了解是什么触发了渲染，是从记忆化到代码拆分等所有性能优化的起点。
是否适合
适合哪些人——不适合哪些人
如果你符合以下情况，就很适合
- 略懂 HTML、CSS 或 JavaScript，想系统地开始学习 React
- 来自其他框架、需要快速转向 React 的开发者
- 代码运行后，喜欢立刻在屏幕上看到结果
- 正在制作小型项目作品集，并希望获得循序渐进的指导
- 正在准备前端面试，希望通过练习题进行演练
如果你符合以下情况，这不是适合你的工具
- 从未接触过 JavaScript，因为本课程默认你具备一些 JavaScript 基础
- 想构建并部署完整项目，但这仍需要使用笔记本电脑
- 希望所有内容都免费，因为第一门课程免费，其余内容由 Pro 解锁
- 想要 React 团队官方课程，但本应用是独立开发的
问题
常见问题
可以在手机上学习 React 编程吗？
核心概念、组件、props、state 和 hooks 都可以在手机上学习，前提是你能够运行自己编写的代码。学 React: 编程课程 已内置 ReactDOM 和 Babel，因此你的 JSX 可以在设备上的实时预览中渲染出来。开始构建和部署更大型的项目后，笔记本电脑会更实用。
学习 React 之前需要掌握 JavaScript 吗？
掌握一些会有所帮助。学 React: 编程课程 面向了解一些 HTML、CSS 或 JavaScript 的人，例如知道变量、函数和数组。如果你从未编写过 JavaScript，请先学习它，因为 React 课程默认你能够读懂 JavaScript。
props 和 state 有什么区别？
props 是组件从父组件接收的输入，不应被修改；state 则是组件拥有并会随时间更新的数据。在 学 React: 编程课程 的 Hooks Lab 中，你可以看到每次 state 变化和重新渲染；props knobs 则允许你通过滑块修改 prop。
应用会教授 useEffect 之类的 hooks 吗？
会。学 React: 编程课程 涵盖 useState、useEffect、useRef、useReducer、自定义 hooks 和 useLayoutEffect。独立课程会深入讲解 effects 何时运行、依赖数组和常见错误，并提供 Bug Hunt 模式，用于在出现问题的组件中找出 bug。
React 和 React Native 一样吗？应用会同时教授两者吗？
不一样。React 是用于构建用户界面的库，而 React Native 使用相同的理念来构建移动应用。学 React: 编程课程 首先教授面向 Web 的 React，此外还有 React Native 基础课程，帮助 Web 开发者将这些技能应用到移动端。
学 React: 编程课程 涵盖 Next.js 和 React 19 吗？
涵盖。课程包括 React 19 的功能以及 Server Components、SSR 与 hydration、流式传输，还有支持数据获取、缓存和身份验证的 Next.js App Router。此外，还有面向 Web 开发者的 React Native 基础课程。
我可以构建哪些类型的项目？
应用提供 20 个循序渐进的项目：点赞按钮、个人资料卡片、小费计算器、问答游戏、秒表、注册表单、购物车、图片轮播、分页列表和 todo 应用。每一步都会检查你的组件是否正常工作，然后你才能继续。
学 React: 编程课程 是免费的吗？
应用可以免费下载。免费版包含第一门课程、一个循序渐进项目、两项编码任务、带实时预览的代码编辑器、Hooks Lab、props knobs、Bug Hunt，以及每天三次 UI Match 检查，同时会显示广告。Pro 可解锁所有课程、项目和任务、AI 导师、渲染分析器、证书考试，并移除广告。
有证书或面试准备内容吗？
通过最终考试即可获得可分享的证书，该功能属于 Pro。面试准备内容包括 50 道面试题、50 道题的测验，以及用于复习核心概念的速查表。
代码会在服务器上运行吗？
不会。运行环境已内置在应用中，因此你的代码会在设备上编译和渲染。这就是为什么你可以点击自己构建的按钮，并在预览中看到界面响应。
支持哪些语言和平台？
学 React: 编程课程 可在 iOS 和 Android 上运行，并支持 22 种语言。评级为 4+，iPhone 需要 iOS 15.1 或更高版本。
开始使用
今天就渲染你的第一个组件
在 iOS 和 Android 上免费开始，支持 22 种语言。
更多 CoddyKit 产品
可在 iOS 和 Android 上使用。