React 快速入门

什么是 React？

React 是一个用于构建用户界面的 JavaScript 库，由 Facebook（现 Meta）开发并维护。它采用组件化的开发模式，让开发者可以构建可复用的 UI 组件。React 于 2013 年开源，如今已成为最流行的前端框架之一。

核心特性

组件化 - 将 UI 拆分为独立的、可复用的组件
声明式 - 描述 UI 应该是什么样子，React 负责更新
单向数据流 - 数据从父组件流向子组件，易于理解
虚拟 DOM - 高效的 DOM 更新机制，提升性能
函数式编程 - 鼓励使用函数组件和不可变数据

为什么选择 React？

学习曲线平缓 - 相对简单，主要学习 JSX 和组件概念
庞大的生态系统 - 丰富的第三方库和工具支持
跨平台 - Web、移动端（React Native）、桌面端（Electron）
活跃的社区 - 持续更新和完善，问题容易解决
企业级应用 - 被 Netflix、Facebook、Instagram 等国际大公司，以及字节跳动、美团、阿里巴巴等国内互联网公司广泛使用
全栈框架 - Next.js、Remix 等基于 React 的全栈框架成为现代 Web 开发的主流选择

学习资源

官方文档（必看）

React 官方文档

最权威的学习资源

快速入门教程

官方交互式教程

中文文档

官方中文版本

React GitHub

源码和问题追踪

AI 辅助学习工具

现代 AI 工具可以大幅提升学习效率，推荐以下方式：

Cursor

• AI 原生代码编辑器
• 智能代码补全和解释
• 实时错误修复
• cursor.sh

Claude Code

• AI 驱动的编程助手
• 代码分析和优化
• 项目生成和重构
• 自动化程度最高

Hello React 示例

// 最简单的 React 组件
function HelloReact({ name }: { name: string }) {
  return <h1>Hello, {name}!</h1>;
}

// 使用组件
<HelloReact name="世界" />

tsx

React 的主要概念

理解 React 的核心概念是学习的关键：

组件 - 构建 UI 的基本单位
JSX - JavaScript 的语法扩展
Props - 组件间的数据传递
State - 组件的内部状态
Hooks - 复用状态逻辑的函数
事件处理 - 用户交互的响应

开发环境搭建

在线体验（推荐新手）

CodeSandbox React - 无需安装，直接在线编写
StackBlitz React - 快速在线开发

本地开发

使用 Create React App 快速创建项目：

# 创建新的 React 项目
npx create-react-app my-react-app
cd my-react-app
npm start

bash

或者使用 Vite（更快的构建工具）：

# 使用 Vite 创建 React 项目
npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run dev

bash

必备的前置知识

HTML/CSS - 基础的网页结构和样式
JavaScript (ES6+) - 现代 JavaScript 特性
npm/yarn - 包管理器
终端/命令行 - 基本的命令操作

🚀 增强的交互式学习体验

我们为您准备了多种交互式学习工具，让 React 学习更加直观和有趣：

📝 交互式代码编辑器

React 代码练习

选择示例：

最基础的 React 组件示例

TSX

💡 使用提示

• 选择不同的示例代码来学习 React 的各种概念
• 修改代码后点击"运行代码"查看分析结果
• 这个编辑器支持基础的 React 语法和 Hook
• 实际项目中请在 React 环境中测试代码

特性：

实时代码编辑和运行
多个难度级别的示例代码
智能代码分析和反馈
一键复制和重置功能

🎯 逐步构建项目

🎯 逐步构建 Todo 应用

通过实际项目学习 React，从简单到复杂逐步构建功能

✨ 功能演示

创建最基础的待办事项列表，包含添加、显示、完成功能

本步骤功能：

添加待办事项

标记完成

基础样式

💻 核心代码

这是实现当前功能的关键代码片段

import { useState } from 'react';

function BasicTodo() {
  const [todos, setTodos] = useState([]);
  const [newTodo, setNewTodo] = useState('');

  const addTodo = () => {
    if (newTodo.trim()) {
      setTodos([...todos, {
        id: Date.now(),
        text: newTodo.trim(),
        completed: false
      }]);
      setNewTodo('');
    }
  };

  const toggleTodo = (id) => {
    setTodos(todos.map(todo =>
      todo.id === id ? { ...todo, completed: !todo.completed } : todo
    ));
  };

  return (
    <div>
      <input
        value={newTodo}
        onChange={(e) => setNewTodo(e.target.value)}
        placeholder="添加新的待办事项"
      />
      <button onClick={addTodo}>添加</button>
      
      <ul>
        {todos.map(todo => (
          <li key={todo.id}>
            <input
              type="checkbox"
              checked={todo.completed}
              onChange={() => toggleTodo(todo.id)}
            />
            <span style={{
              textDecoration: todo.completed ? 'line-through' : 'none'
            }}>
              {todo.text}
            </span>
          </li>
        ))}
      </ul>
    </div>
  );
}

tsx

🎓 学习要点

• 使用 useState 管理组件状态
• 数组操作：添加、映射
• 条件渲染和样式绑定
• 事件处理基础

完成进度4 / 4

学习路径：

基础列表 - 理解状态管理和列表渲染
删除功能 - 掌握事件处理和数据操作
分类管理 - 学习复杂状态结构
筛选统计 - 实现完整的应用功能

🔬 React 概念可视化

通过交互式演示深入理解 React 核心概念

动画速度:

State 状态管理

理解 React 中状态的工作原理和渲染流程

代码示例:

const [count, setCount] = useState(0);

// 1. 初始状态
// count = 0

// 2. 用户点击按钮
setCount(count + 1);

// 3. React 重新渲染组件
// count = 1

tsx

状态更新触发重新渲染的过程

交互演示

计数器: 0

可视化概念：

State 状态管理流程
Props 数据传递
组件生命周期
Hooks 工作原理
虚拟 DOM 机制

💪 编程挑战

💪 React 编程挑战

通过实际编程练习巩固 React 知识，提升编码技能

已完成

连续完成

总尝试次数

成功率

选择挑战

创建第一个组件

初级

创建一个简单的函数组件，接收 name 属性并显示问候语

组件基础

⏱️ 5分钟

状态管理 - 计数器

初级

创建一个计数器组件，包含增加、减少和重置功能

状态管理

⏱️ 10分钟

条件渲染

中级

根据用户登录状态显示不同的内容

条件渲染

⏱️ 7分钟

列表渲染

中级

渲染一个用户列表，并为每个用户项添加删除功能

列表渲染

⏱️ 10分钟

表单处理

中级

创建一个受控的登录表单，包含用户名和密码输入

表单处理

⏱️ 10分钟

自定义 Hook

高级

创建一个自定义 Hook 来管理窗口大小变化

高级 Hooks

⏱️ 15分钟

挑战类型：

组件创建练习
状态管理挑战
条件渲染任务
表单处理实战
高级 Hook 应用

🧪 组件实验室

🧪 React 组件实验室

实时调整组件属性，查看效果变化，生成可用代码

选择组件：

⚙️ 属性配置

children

string

variant

select

size

select

disabled

boolean

👁️ 实时预览

显示代码

💡 组件信息

可配置的按钮组件，支持多种样式和状态

基础组件

📋 生成的代码

1
2
3

<Button variant="{variant}" size="{size}" disabled={disabled}>
  {children}
</Button>

tsx

💡 使用提示：

复制代码到你的 React 组件中
确保已安装所需的依赖包
根据需要调整样式和属性

📊 组件使用建议

最佳实践

• 使用语义化的组件名称
• 保持组件的单一职责
• 合理使用默认属性值
• 添加适当的类型定义

性能优化

• 避免不必要的重新渲染
• 使用 React.memo 优化纯组件
• 合理拆分大型组件
• 使用 useCallback 缓存函数

实验功能：

实时调整组件属性
即时预览效果变化
自动生成可用代码
最佳实践指导

📊 原有基础演示

状态管理演示

React 状态管理示例

点击按钮改变数值，观察状态更新

当前值: 0

初始值: 0

这个交互式计数器展示了 React 的核心特性：

状态 (State): 使用 useState 管理组件的内部状态
事件处理: 点击按钮触发状态更新
重新渲染: 状态变化时，React 自动重新渲染组件

数据传递演示

Props 数据传递演示

点击不同用户，观察组件如何通过 props 接收和显示数据

选中的用户信息

姓名: 张三

年龄: 25

职位: 前端开发

props: { name: "张三", age: 25, role: "前端开发" }

• 数据通过 props 从父组件传递到子组件

• 组件根据 props 动态渲染内容

• 单向数据流：父组件 → 子组件

这个组件演示了 React 中的 Props 概念：

Props: 父组件向子组件传递数据
单向数据流: 数据从上到下流动
组件组合: 通过组合构建复杂界面

学习路径

入门阶段（1-2周）

目标：掌握 React 基础，能够开发简单应用

第1周：核心概念

理解 React 组件化思想
掌握 JSX 语法和基本组件
学习 State 和 Props
熟悉常用 Hooks（useState, useEffect）

第2周：项目实践

构建一个完整项目（如 Todo App）
学习事件处理和表单
掌握条件渲染和列表渲染
AI 辅助代码优化

进阶阶段（1-2个月）

目标：能够独立开发中小型项目

掌握 React Router (Remix)
学习状态管理（Context, Nano Store）
熟悉生态系统（shadcn/ui, Tailwind CSS）
学习测试和部署

AI 辅助学习方法

核心原则：边做边学，AI 辅助

学习技巧

遇到问题立即问 AI
让 AI 解释代码原理
用 AI 生成项目结构
AI 辅助代码审查

有效 Prompt

"解释这段 React 代码的工作原理"
"这个错误是什么原因，如何修复？"
"推荐更好的实现方式"
"帮我优化组件性能"

学习建议

实践为主 - 80% 时间写代码，20% 时间理论学习
项目驱动 - 通过实际需求学习概念
AI 助手 - 24小时待命的编程导师
快速迭代 - 不断重构和优化代码

学习目标: 2周内掌握 React 基础，1-2个月内能够独立开发项目。

关键优势: AI 工具让学习效率大幅提升，相比传统学习方法可以节省大量时间。

课程目录

React 快速入门

什么是 React？

核心特性

为什么选择 React？

学习资源

官方文档（必看）

React 官方文档

快速入门教程

中文文档

React GitHub

AI 辅助学习工具

Cursor

Claude Code

Hello React 示例

React 的主要概念

开发环境搭建

在线体验（推荐新手）

本地开发

必备的前置知识

🚀 增强的交互式学习体验

📝 交互式代码编辑器

💡 使用提示

🎯 逐步构建项目

✨ 功能演示

本步骤功能：

💻 核心代码

🎓 学习要点

🔬 React 概念可视化

State 状态管理

代码示例:

交互演示

💪 编程挑战

选择挑战

创建第一个组件

状态管理 - 计数器

条件渲染

列表渲染

表单处理

自定义 Hook

🧪 组件实验室

⚙️ 属性配置

👁️ 实时预览

💡 组件信息

📋 生成的代码

📊 组件使用建议

最佳实践

性能优化

📊 原有基础演示

状态管理演示

数据传递演示

学习路径

入门阶段（1-2周）

进阶阶段（1-2个月）

AI 辅助学习方法