React

这一课你将能做到

1. 用函数组件 + Hooks 写 React 组件
2. 理解 JSX、Props、State 的分工
3. 用 useEffect 调用后端 API 渲染列表

为什么要学

原生 JavaScript 操作 DOM 写页面，代码一多就乱：选中元素、改内容、绑事件、更新状态，全混在一起。React 用「组件」把页面拆成独立小块，每块管自己的数据和渲染，代码清晰、好维护。

人话：React 是「乐高积木」，把页面拆成可复用的组件，拼起来就是完整应用。

先建立图像

// 组件 = 函数，返回 JSX（HTML 的 JS 写法）
function CourseCard({ title, desc }) {
    return (
        <div className="card">
            <h3>{title}</h3>
            <p>{desc}</p>
        </div>
    );
}

// 使用组件
function App() {
    return (
        <div>
            <CourseCard title="HTML" desc="网页骨架" />
            <CourseCard title="CSS" desc="网页皮肤" />
        </div>
    );
}

浏览器渲染后：

<div>
  <div class="card">
    <h3>HTML</h3>
    <p>网页骨架</p>
  </div>
  <div class="card">
    <h3>CSS</h3>
    <p>网页皮肤</p>
  </div>
</div>

跟着做

步骤 1：创建 React 项目（Vite）

npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev

打开 http://localhost:5173，看到默认页面。

步骤 2：第一个组件

// src/components/Hello.jsx
function Hello({ name }) {
    return <h1>Hello, {name}!</h1>;
}

export default Hello;

// src/App.jsx
import Hello from './components/Hello';

function App() {
    return (
        <div>
            <Hello name="CodeRoadMap" />
            <Hello name="React" />
        </div>
    );
}

export default App;

步骤 3：State 与事件

import { useState } from 'react';

function Counter() {
    // count 是状态，setCount 是更新函数
    const [count, setCount] = useState(0);

    return (
        <div>
            <p>点击了 {count} 次</p>
            <button onClick={() => setCount(count + 1)}>
                +1
            </button>
            <button onClick={() => setCount(0)}>
                重置
            </button>
        </div>
    );
}

点击按钮，页面自动更新——不需要手动操作 DOM。

步骤 4：列表渲染

function CourseList({ courses }) {
    return (
        <ul>
            {courses.map(course => (
                <li key={course.id}>
                    <strong>{course.title}</strong>
                    <span>{course.desc}</span>
                </li>
            ))}
        </ul>
    );
}

// 使用
const data = [
    { id: 1, title: 'HTML', desc: '骨架' },
    { id: 2, title: 'CSS', desc: '皮肤' },
    { id: 3, title: 'JS', desc: '肌肉' },
];

<CourseList courses={data} />