React 快速入门

什么是 React

React 是一个用于构建用户界面的 JavaScript 库，由 Facebook 开发并维护。

核心特点

组件化：将 UI 拆分成独立、可复用的组件
声明式：描述 UI 应该是什么样子，React 负责更新
一次学习，随处编写：可用于 Web、移动端（React Native）

环境准备

安装 Node.js

访问 nodejs.org 下载并安装 LTS 版本。

验证安装：

node -v
npm -v

创建第一个应用

# 使用 Vite 创建 React 项目
yarn create vite my-first-app --template react

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

# 安装依赖
yarn

# 启动开发服务器
yarn dev

浏览器访问 http://localhost:5173

项目结构

my-first-app/
├── node_modules/      # 依赖包
├── public/            # 静态资源
├── src/               # 源代码
│   ├── App.jsx        # 主组件
│   ├── main.jsx       # 入口文件
│   └── index.css      # 样式
├── index.html         # HTML 模板
├── vite.config.js     # Vite 配置
├── package.json       # 项目配置
└── README.md

第一个组件

打开 src/App.jsx：

function App() {
  return (
    <div>
      <h1>Hello, React!</h1>
      <p>这是我的第一个 React 应用</p>
    </div>
  );
}

export default App;

为什么选择 Vite

极速启动：开发服务器秒级启动
热更新快：修改代码立即看到效果
现代化：原生 ES 模块支持
简单配置：开箱即用

JSX 语法基础

什么是 JSX

JSX 是 JavaScript 的语法扩展，看起来像 HTML，但实际上是 JavaScript。

// JSX
const element = <h1>Hello, World!</h1>;

// 编译后的 JavaScript
const element = React.createElement('h1', null, 'Hello, World!');

嵌入表达式

function Greeting() {
  const name = '张三';
  const age = 25;
  
  return (
    <div>
      <h1>你好，{name}!</h1>
      <p>你今年 {age} 岁</p>
      <p>明年你将 {age + 1} 岁</p>
    </div>
  );
}

JSX 属性

function Image() {
  const url = 'https://example.com/image.jpg';
  const alt = '示例图片';
  
  return (
    <div>
      {/* className 代替 class */}
      <div className="container">
        {/* 使用变量 */}
        <img src={url} alt={alt} />
        
        {/* 直接写值 */}
        <img src="/logo.png" alt="Logo" />
      </div>
    </div>
  );
}

样式

function StyledComponent() {
  // 内联样式使用对象
  const style = {
    color: 'red',
    fontSize: 20,
    backgroundColor: '#f0f0f0'
  };
  
  return (
    <div>
      {/* 使用 style 对象 */}
      <p style={style}>红色文字</p>
      
      {/* 直接写对象 */}
      <p style={{ color: 'blue', fontSize: 16 }}>蓝色文字</p>
      
      {/* 使用 CSS 类 */}
      <p className="highlight">高亮文字</p>
    </div>
  );
}

条件渲染

function Welcome({ isLoggedIn }) {
  // 方式 1: if-else
  if (isLoggedIn) {
    return <h1>欢迎回来!</h1>;
  }
  return <h1>请先登录</h1>;
}

function Status({ isOnline }) {
  // 方式 2: 三元运算符
  return (
    <div>
      用户状态: {isOnline ? '在线' : '离线'}
    </div>
  );
}

function Notification({ count }) {
  // 方式 3: && 运算符
  return (
    <div>
      消息
      {count > 0 && <span className="badge">{count}</span>}
    </div>
  );
}

列表渲染

function TodoList() {
  const todos = [
    { id: 1, text: '学习 React' },
    { id: 2, text: '写代码' },
    { id: 3, text: '休息' }
  ];
  
  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
  );
}

注释

function Component() {
  return (
    <div>
      {/* 这是 JSX 中的注释 */}
      <p>内容</p>
      
      {/* 
        多行注释
        也是这样写
      */}
    </div>
  );
}

组件基础

函数组件（推荐）

React 16.8 引入 Hooks 后，函数组件成为主流写法。

// 简单组件
function Welcome() {
  return <h1>Hello!</h1>;
}

// 带参数的组件
function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

// 使用解构
function User({ name, age }) {
  return (
    <div>
      <p>姓名: {name}</p>
      <p>年龄: {age}</p>
    </div>
  );
}

类组件（旧写法）

React 16.8 之前的主要写法，现在不推荐使用。

import React from 'react';

class Welcome extends React.Component {
  render() {
    return <h1>Hello!</h1>;
  }
}

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  render() {
    return (
      <div>
        <p>计数: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          +1
        </button>
      </div>
    );
  }
}

为什么推荐函数组件？

代码更简洁：无需 class、constructor、this
更容易理解：逻辑更清晰
Hooks 强大：useState、useEffect 等
性能更好：体积更小
官方推荐：新项目都用函数组件

本教程全部使用函数组件。

组件组合

function Header() {
  return (
    <header>
      <h1>我的网站</h1>
    </header>
  );
}

function Content() {
  return (
    <main>
      <p>这是内容区域</p>
    </main>
  );
}

function Footer() {
  return (
    <footer>
      <p>© 2024 版权所有</p>
    </footer>
  );
}

function App() {
  return (
    <div>
      <Header />
      <Content />
      <Footer />
    </div>
  );
}

Props（属性）

// 传递 props
function App() {
  return (
    <div>
      <UserCard 
        name="张三" 
        age={25} 
        email="zhangsan@example.com"
      />
      <UserCard 
        name="李四" 
        age={30} 
        email="lisi@example.com"
      />
    </div>
  );
}

// 接收 props
function UserCard({ name, age, email }) {
  return (
    <div className="card">
      <h2>{name}</h2>
      <p>年龄: {age}</p>
      <p>邮箱: {email}</p>
    </div>
  );
}

默认 Props

function Button({ text, color = 'blue' }) {
  return (
    <button style={{ backgroundColor: color }}>
      {text}
    </button>
  );
}

// 使用
<Button text="点击" />              // 使用默认颜色 blue
<Button text="提交" color="green" /> // 使用 green

Children

function Card({ children }) {
  return (
    <div className="card">
      {children}
    </div>
  );
}

// 使用
function App() {
  return (
    <Card>
      <h2>标题</h2>
      <p>这是卡片内容</p>
      <button>操作</button>
    </Card>
  );
}

事件处理

基本事件

function Button() {
  const handleClick = () => {
    alert('按钮被点击了!');
  };
  
  return <button onClick={handleClick}>点击我</button>;
}

传递参数

function List() {
  const handleClick = (id) => {
    console.log('点击了项目:', id);
  };
  
  return (
    <div>
      <button onClick={() => handleClick(1)}>项目 1</button>
      <button onClick={() => handleClick(2)}>项目 2</button>
    </div>
  );
}

事件对象

function Form() {
  const handleSubmit = (e) => {
    e.preventDefault(); // 阻止默认行为
    console.log('表单提交');
  };
  
  const handleChange = (e) => {
    console.log('输入值:', e.target.value);
  };
  
  return (
    <form onSubmit={handleSubmit}>
      <input onChange={handleChange} />
      <button type="submit">提交</button>
    </form>
  );
}

常用事件

function Events() {
  return (
    <div>
      {/* 点击 */}
      <button onClick={() => console.log('click')}>点击</button>
      
      {/* 双击 */}
      <button onDoubleClick={() => console.log('double click')}>双击</button>
      
      {/* 鼠标移入/移出 */}
      <div 
        onMouseEnter={() => console.log('enter')}
        onMouseLeave={() => console.log('leave')}
      >
        鼠标移入
      </div>
      
      {/* 输入 */}
      <input onChange={(e) => console.log(e.target.value)} />
      
      {/* 聚焦/失焦 */}
      <input 
        onFocus={() => console.log('focus')}
        onBlur={() => console.log('blur')}
      />
      
      {/* 键盘 */}
      <input 
        onKeyDown={(e) => console.log('key:', e.key)}
        onKeyUp={(e) => console.log('key up:', e.key)}
      />
    </div>
  );
}

实战练习

练习 1: 计数器

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <h1>计数: {count}</h1>
      <button onClick={() => setCount(count + 1)}>+1</button>
      <button onClick={() => setCount(count - 1)}>-1</button>
      <button onClick={() => setCount(0)}>重置</button>
    </div>
  );
}

代码说明：

useState(0) 创建一个状态变量 count，初始值为 0
setCount 是更新 count 的函数
点击按钮时调用 setCount 更新状态，组件会重新渲染

练习 2: 待办事项

import { useState } from 'react';

function TodoApp() {
  const [todos, setTodos] = useState([]);
  const [input, setInput] = useState('');
  
  const addTodo = () => {
    if (input.trim()) {
      setTodos([...todos, { id: Date.now(), text: input, done: false }]);
      setInput('');
    }
  };
  
  const toggleTodo = (id) => {
    setTodos(todos.map(todo => 
      todo.id === id ? { ...todo, done: !todo.done } : todo
    ));
  };
  
  const deleteTodo = (id) => {
    setTodos(todos.filter(todo => todo.id !== id));
  };
  
  return (
    <div>
      <h1>待办事项</h1>
      <div>
        <input 
          value={input}
          onChange={(e) => setInput(e.target.value)}
          onKeyPress={(e) => e.key === 'Enter' && addTodo()}
          placeholder="输入待办事项"
        />
        <button onClick={addTodo}>添加</button>
      </div>
      <ul>
        {todos.map(todo => (
          <li key={todo.id}>
            <input 
              type="checkbox"
              checked={todo.done}
              onChange={() => toggleTodo(todo.id)}
            />
            <span style={{ 
              textDecoration: todo.done ? 'line-through' : 'none' 
            }}>
              {todo.text}
            </span>
            <button onClick={() => deleteTodo(todo.id)}>删除</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

代码说明：

todos 存储待办列表（数组）
input 存储输入框的值
addTodo 添加新待办到数组
toggleTodo 切换完成状态
deleteTodo 删除指定待办

练习 3: 表单

import { useState } from 'react';

function LoginForm() {
  const [form, setForm] = useState({
    username: '',
    password: '',
    remember: false
  });
  
  const handleChange = (e) => {
    const { name, value, type, checked } = e.target;
    setForm({
      ...form,
      [name]: type === 'checkbox' ? checked : value
    });
  };
  
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('登录信息:', form);
    alert(`用户名: ${form.username}\n记住我: ${form.remember}`);
  };
  
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>用户名:</label>
        <input 
          name="username"
          value={form.username}
          onChange={handleChange}
        />
      </div>
      <div>
        <label>密码:</label>
        <input 
          name="password"
          type="password"
          value={form.password}
          onChange={handleChange}
        />
      </div>
      <div>
        <label>
          <input 
            name="remember"
            type="checkbox"
            checked={form.remember}
            onChange={handleChange}
          />
          记住我
        </label>
      </div>
      <button type="submit">登录</button>
    </form>
  );
}

代码说明：

form 对象存储所有表单字段
handleChange 统一处理所有输入变化
handleSubmit 处理表单提交
e.preventDefault() 阻止页面刷新

关于 useState：

这是 React 的 Hook（钩子函数），用于在函数组件中添加状态。详细学习请看下一章节《Hooks 基础》。

下一步

学完基础后，继续学习：

状态管理基础 - 深入理解 useState
Hooks 基础 - useState、useEffect、useRef
组件通信 - Props、Context、状态提升
生命周期 - useEffect 详解
实战项目 - 完整项目练习
进阶内容 - 性能优化、状态管理、TypeScript