React 简介

什么是 React？

React 是一个用于构建用户界面的 JavaScript 库，由 Facebook 开发并维护。它采用组件化的开发方式，让你可以构建可复用的 UI 组件。

React 的核心概念

1. 组件（Components）

组件是 React 的核心构建块。它们可以是函数组件或类组件：

// 函数组件（推荐）
function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

// 箭头函数组件
const Welcome = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

2. JSX

JSX 是一种语法扩展，让你可以在 JavaScript 中编写类似 HTML 的代码：

const element = <h1>Hello, world!</h1>;

// 可以在 JSX 中使用表达式
const name = 'React';
const element = <h1>Hello, {name}!</h1>;

// 可以在属性中使用表达式
const imageUrl = 'logo.png';
const element = <img src={imageUrl} alt="Logo" />;

3. Props

Props 用于传递数据给组件：

// 定义组件
function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

// 使用组件
<Greeting name="张三" />
<Greeting name="李四" />

// 解构 props（推荐）
function Greeting({ name, age }) {
  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>年龄: {age}</p>
    </div>
  );
}

4. State（状态）

State 用于管理组件内部的数据：

import { useState } from 'react';

function Counter() {
  // useState 返回 [当前值, 更新函数]
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>当前计数: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        增加
      </button>
      <button onClick={() => setCount(count - 1)}>
        减少
      </button>
      <button onClick={() => setCount(0)}>
        重置
      </button>
    </div>
  );
}

创建你的第一个 React 应用

使用 Vite（推荐）

# 创建新项目
npm create vite@latest my-react-app -- --template react

# 进入项目目录
cd my-react-app

# 安装依赖
npm install

# 启动开发服务器
npm run dev

项目结构

my-react-app/
├── src/
│   ├── App.jsx          # 主应用组件
│   ├── main.jsx         # 入口文件
│   ├── App.css          # 样式文件
│   └── assets/          # 静态资源
├── public/              # 公共文件夹
├── index.html           # HTML 模板
└── package.json

实战示例：待办事项列表

import { useState } from 'react';
import './App.css';

function TodoApp() {
  const [todos, setTodos] = useState([]);
  const [inputValue, setInputValue] = useState('');

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

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

  const deleteTodo = (id) => {
    setTodos(todos.filter(todo => todo.id !== id));
  };

  return (
    <div className="todo-app">
      <h1>待办事项</h1>

      <div className="input-section">
        <input
          type="text"
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
          onKeyPress={(e) => e.key === 'Enter' && addTodo()}
          placeholder="输入待办事项..."
        />
        <button onClick={addTodo}>添加</button>
      </div>

      <ul className="todo-list">
        {todos.map(todo => (
          <li key={todo.id} className={todo.completed ? 'completed' : ''}>
            <input
              type="checkbox"
              checked={todo.completed}
              onChange={() => toggleTodo(todo.id)}
            />
            <span>{todo.text}</span>
            <button onClick={() => deleteTodo(todo.id)}>删除</button>
          </li>
        ))}
      </ul>

      <p>总计: {todos.length} | 已完成: {todos.filter(t => t.completed).length}</p>
    </div>
  );
}

export default TodoApp;

React Hooks 常用总结

useState

管理组件状态：

const [state, setState] = useState(initialValue);

useEffect

处理副作用（数据获取、订阅等）：

useEffect(() => {
  // 组件挂载后执行
  document.title = `Count: ${count}`;

  // 清理函数（组件卸载前执行）
  return () => {
    // 清理操作
  };
}, [dependencies]); // 依赖数组

useContext

跨组件共享数据：

const ThemeContext = createContext('light');

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  const theme = useContext(ThemeContext);
  return <div className={theme}>...</div>;
}

样式方案

1. CSS 文件

import './App.css';

function App() {
  return <div className="container">...</div>;
}

2. CSS Modules

import styles from './App.module.css';

function App() {
  return <div className={styles.container}>...</div>;
}

3. Tailwind CSS

function App() {
  return (
    <div className="max-w-4xl mx-auto p-6 bg-white rounded-lg shadow">
      ...
    </div>
  );
}

💡 最佳实践

组件命名：使用大驼峰命名法（PascalCase）
文件组织：一个组件一个文件
Props 验证：使用 TypeScript 或 PropTypes
状态管理：保持状态最小化，避免不必要的状态
性能优化：使用 React.memo、useMemo、useCallback

🎯 练习项目

试着完成以下项目来巩固你的 React 技能：

天气应用 - 调用天气 API 显示天气信息
笔记应用 - 实现增删改查功能
购物车 - 管理商品、计算总价
博客系统 - 文章列表、详情、评论功能

恭喜你完成了 React 快速入门！继续保持学习的热情，构建更多精彩的应用！