React：组件化开发入门

这一课你将能做到

1. 用函数组件和 JSX 语法拆分页面为可复用的组件
2. 用 props 传递数据，用 useState 管理组件内部状态
3. 用 useEffect 处理副作用（请求、定时器），用条件渲染和列表渲染构建动态界面

为什么要学

原生 JS 操作 DOM 的问题是：代码和结构混在一起，数据变了要手动找元素、改内容，页面复杂后代码变成一团乱麻。React 的核心思想是「数据驱动视图」——你只描述「数据长什么样」，React 负责高效更新 DOM。

React 是目前全球最流行的前端框架，Meta（Facebook）出品，生态最成熟，岗位需求最大。学会 React 就拿到了现代前端开发的入场券。

先建立图像

React 的组件化思想：页面不是一整块 HTML，而是一棵组件树。

App（根组件）
├── Header
│   ├── Logo
│   └── Nav
├── Main
│   ├── ArticleList
│   │   ├── ArticleItem
│   │   └── ArticleItem
│   └── Sidebar
└── Footer

每个组件是一个函数，接收输入（props），返回描述界面的 JSX。数据变化时，React 自动重新渲染受影响的组件。

跟着做

步骤 1：创建 React 项目

用 Vite 创建现代 React 项目（官方推荐）：

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

浏览器打开 http://localhost:5173，看到欢迎页面。项目结构：

my-react-app/
├── src/
│   ├── main.jsx      ← 入口，挂载 App
│   ├── App.jsx       ← 根组件
│   └── index.css
├── index.html
└── package.json

步骤 2：第一个函数组件

修改 src/App.jsx：

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

export default App;

组件就是返回 JSX 的函数。JSX 看起来像 HTML，但其实是 JavaScript 语法糖，最终编译成 React.createElement() 调用。

步骤 3：JSX 语法规则

function App() {
    const name = "学习者";
    const isLoggedIn = true;
    const items = ["苹果", "香蕉", "橙子"];

    return (
        <div className="container">
            {/* 1. 插值表达式 */}
            <h1>你好，{name}</h1>

            {/* 2. 条件渲染：三元 */}
            <p>{isLoggedIn ? "欢迎回来" : "请登录"}</p>

            {/* 3. 条件渲染：与运算 */}
            {isLoggedIn && <button>退出</button>}

            {/* 4. 列表渲染：map + key */}
            <ul>
                {items.map((item, index) => (
                    <li key={index}>{item}</li>
                ))}
            </ul>

            {/* 5. 事件处理 */}
            <button onClick={() => alert("点击了")}>点我</button>

            {/* 6. class 要写成 className */}
            <div className="box">样式类</div>
        </div>
    );
}