React教程 - 构建现代Web应用

React是由Facebook（现Meta）开发的用于构建用户界面的JavaScript库。它以组件化、声明式编程和虚拟DOM为核心，是全球使用最广泛的前端技术。本教程将从JSX语法到Hooks，助你全面掌握React开发。

一、React简介

React于2013年开源，引领了前端组件化和声明式编程的潮流。它不是完整的框架，而是一个专注于视图层的库，搭配Redux、React Router等生态库可构建完整应用。React Native还可用于开发跨平台移动应用。

二、你将学到什么

• JSX语法：元素渲染、表达式、条件渲染、列表渲染
• 组件与Props：函数组件、Props传值、组件组合
• State与事件：useState、事件处理、表单处理
• Hooks：useEffect、useRef、useMemo、useContext
• 路由：React Router配置、嵌套路由、路由守卫
• 状态管理：Context、Redux Toolkit、Zustand

三、代码示例

使用Hooks的React函数组件：

import { useState, useEffect } from "react";

// 待办事项组件
function TodoApp() {
  const [todos, setTodos] = useState([
    { id: 1, text: "学习React", done: false },
    { id: 2, text: "练习Hooks", done: true }
  ]);
  const [input, setInput] = useState("");
  const [filter, setFilter] = useState("all");

  // 副作用：保存到localStorage
  useEffect(() => {
    localStorage.setItem("todos", JSON.stringify(todos));
  }, [todos]);

  const addTodo = () => {
    if (!input.trim()) return;
    setTodos([...todos, { id: Date.now(), text: input, done: false }]);
    setInput("");
  };

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

  const filtered = todos.filter(t => {
    if (filter === "active") return !t.done;
    if (filter === "done") return t.done;
    return true;
  });

  return (
    <div>
      <input value={input} onChange={e => setInput(e.target.value)}
             onKeyDown={e => e.key === "Enter" && addTodo()} />
      <button onClick={addTodo}>添加</button>

      <div>
        {["all", "active", "done"].map(f => (
          <button key={f} onClick={() => setFilter(f)}>{f}</button>
        ))}
      </div>

      <ul>
        {filtered.map(todo => (
          <li key={todo.id} onClick={() => toggleTodo(todo.id)}
              style={{ textDecoration: todo.done ? "line-through" : "" }}>
            {todo.text}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TodoApp;

四、适合人群

• 有JavaScript基础，想要学习前端框架的开发者
• 想要进入大厂的前端工程师（React在大厂使用率高）
• 想要开发React Native跨平台应用的开发者
• 从Vue转向React的开发者

五、学习建议

React学习曲线比Vue稍陡，需要理解JSX和函数式编程思维。建议先掌握JSX和组件基础，再重点学习Hooks（useState和useEffect是核心）。理解React的渲染机制和依赖数组很重要。推荐使用Vite创建项目，搭配TypeScript提升开发体验。多做项目练习，比如待办事项、天气应用等。

课程信息：
共 6 个章节