第9章 React介绍与JSX

现代前端框架入门，组件化开发的第一步

作者：zyyc-0336 | 日期：2026-06-12

9.1.1 什么是 React

React 是 Facebook（现 Meta）开发的一个前端 UI 库，用"组件"的方式来构建网页。

三个核心概念

概念	大白话
组件化	把页面拆成一块一块的"积木"，每块积木就是一个组件
声明式	你告诉 React "我想要什么样子"，它自动帮你实现
虚拟 DOM	React 在内存里维护一个"虚拟页面"，只更新变化的部分，速度很快

传统开发 vs React 开发

对比	传统方式	React 方式
页面更新	手动操作 DOM（getElementById、innerHTML）	修改数据，React 自动更新页面
代码组织	按文件类型分（HTML/CSS/JS 分开）	按功能分（一个组件包含自己的 HTML+JS+样式）
复用	复制粘贴代码	把组件当积木，拿来就用

创建 React 项目

使用 Vite（比官方的 create-react-app 更快）：

bash

# 创建项目（用 Vite）
npm create vite@latest my-blog -- --template react

# 进入项目
cd my-blog

# 安装依赖
npm install

# 启动开发服务器
npm run dev

💡 Vite 是一个前端构建工具，帮你快速创建和运行 React 项目。npm run dev 启动后，浏览器打开 http://localhost:5173 就能看到页面。

9.1.2 JSX 语法

JSX（JavaScript XML）是 React 中用来描述界面的"模板语言"。它看起来像 HTML，但本质上是 JavaScript。

JSX 的基本规则

jsx

// JSX 可以像 HTML 一样写标签
let element = <h1>你好，世界！</h1>;

// JSX 里用 {} 嵌入 JavaScript 表达式（类似模板字符串的 ${}）
let name = '小明';
let element2 = <h1>你好，{name}！</h1>;

// JSX 里可以用 {} 嵌入任何 JS 表达式
let element3 = <p>1 + 1 = {1 + 1}</p>;

JSX vs HTML 的区别

特性	HTML	JSX
class	`class="box"`	`className="box"`
for	`for="input"`	`htmlFor="input"`
style	`style="color:red"`	`style={{ color: 'red' }}`
自闭合	`<img>` 可以不闭合	`<img />` 必须闭合
根元素	可以有多个根元素	必须有一个根元素

📝 完整 JSX 示例代码

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>JSX 示例</title>
</head>
<body>
    <div id="root"></div>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

    <script type="text/babel">
        // 1. JSX 里嵌入变量
        let title = '我的博客';
        let author = '小明';
        let isPublished = true;

        // 2. JSX 里嵌入表达式
        let postCount = 10;
        let greeting = <h1>{title} — 已发布 {postCount} 篇文章</h1>;

        // 3. JSX 里的 style 是对象（双花括号）
        let cardStyle = {
            backgroundColor: '#f5f5f5',
            padding: '20px',
            borderRadius: '8px',
            marginTop: '10px'
        };

        // 4. JSX 里的 className（不是 class）
        let App = () => {
            return (
                <div className="app">
                    {greeting}
                    <p>作者：{author}</p>
                    <p>状态：{isPublished ? '已发布' : '草稿'}</p>
                    <div style={cardStyle}>
                        <h2>JavaScript 入门</h2>
                        <p>零基础学习 JavaScript 的基础语法...</p>
                    </div>
                </div>
            );
        };

        // 渲染到页面
        ReactDOM.createRoot(document.getElementById('root')).render(<App />);
    </script>
</body>
</html>

代码逐行讲解

代码	说明
`let title = '我的博客'`	定义变量
`<h1>{title}</h1>`	在 JSX 里用 `{}` 插入变量
`{isPublished ? '已发布' : '草稿'}`	`{}` 里可以写三元表达式
`style={{ backgroundColor: '#f5f5f5' }}`	style 是 JS 对象，双花括号
`className="app"`	用 className 代替 class
`ReactDOM.createRoot(...).render(<App />)`	把组件渲染到页面上

⚠️ 新手易错：{} 里只能放表达式（有返回值的），不能放语句（if、for、while）。{ if (true) { ... } } 会报错。要用三元表达式 { condition ? 'A' : 'B' }。

9.1.3 条件渲染

条件渲染就是根据不同条件，显示不同的内容。

三种条件渲染方式

📋 三种方式对比

方式	适用场景	示例
三元 `? :`	二选一	`{isPublished ? '已发布' : '草稿'}`
`&&` 短路	满足条件才显示	`{isDraft && <Warning />}`
提前 `return`	组件级别判断	`if (!login) return <Login />`

📝 完整条件渲染示例代码

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>条件渲染示例</title>
</head>
<body>
    <div id="root"></div>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

    <script type="text/babel">
        // 方式1：三元表达式
        function PostStatus({ isPublished }) {
            return (
                <p>
                    状态：{isPublished ? '✅ 已发布' : '📝 草稿'}
                </p>
            );
        }

        // 方式2：&& 短路（满足条件才显示）
        function PostWarning({ isDraft }) {
            return (
                <div>
                    {isDraft && <p style={{ color: 'orange' }}>⚠️ 这是草稿，仅自己可见</p>}
                </div>
            );
        }

        // 方式3：提前 return（组件级别）
        function LoginPrompt({ isLoggedIn }) {
            if (!isLoggedIn) {
                return <p>请先登录后再查看文章</p>;
            }
            return <p>欢迎回来，你有 3 篇未读文章</p>;
        }

        // 组合使用
        function App() {
            let isLoggedIn = true;
            let isPublished = false;

            return (
                <div>
                    <h1>条件渲染示例</h1>
                    <PostStatus isPublished={isPublished} />
                    <PostWarning isDraft={!isPublished} />
                    <LoginPrompt isLoggedIn={isLoggedIn} />
                </div>
            );
        }

        ReactDOM.createRoot(document.getElementById('root')).render(<App />);
    </script>
</body>
</html>

🖥️ 运行结果

▶ Console Output

条件渲染示例
状态：📝 草稿
⚠️ 这是草稿，仅自己可见
欢迎回来，你有 3 篇未读文章

9.1.4 列表渲染

列表渲染就是把数组里的数据变成一组 HTML 元素。用 map() 方法把数据数组"映射"成 JSX 数组。

📝 完整列表渲染示例代码

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>列表渲染示例</title>
</head>
<body>
    <div id="root"></div>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

    <script type="text/babel">
        // 文章卡片组件
        function PostCard({ title, author, date, excerpt }) {
            return (
                <div style={{
                    border: '1px solid #ddd',
                    borderRadius: '8px',
                    padding: '16px',
                    marginBottom: '12px'
                }}>
                    <h2 style={{ marginTop: 0 }}>{title}</h2>
                    <p style={{ color: '#666', fontSize: '14px' }}>
                        作者：{author} | 日期：{date}
                    </p>
                    <p>{excerpt}</p>
                </div>
            );
        }

        function App() {
            // 文章数据（数组）
            let posts = [
                {
                    id: 1,
                    title: 'JavaScript 入门指南',
                    author: '小明',
                    date: '2026-06-01',
                    excerpt: '零基础学习 JavaScript 的基础语法...'
                },
                {
                    id: 2,
                    title: 'CSS 布局技巧',
                    author: '小红',
                    date: '2026-06-05',
                    excerpt: 'Flex 和 Grid 布局完全指南...'
                },
                {
                    id: 3,
                    title: 'React 快速上手',
                    author: '小明',
                    date: '2026-06-10',
                    excerpt: '用组件化的方式构建用户界面...'
                }
            ];

            return (
                <div style={{ maxWidth: '600px', margin: '0 auto', padding: '20px' }}>
                    <h1>文章列表</h1>
                    <p>共 {posts.length} 篇文章</p>

                    {/* 用 map 渲染列表，key 必须唯一 */}
                    {posts.map(post => (
                        <PostCard
                            key={post.id}
                            title={post.title}
                            author={post.author}
                            date={post.date}
                            excerpt={post.excerpt}
                        />
                    ))}
                </div>
            );
        }

        ReactDOM.createRoot(document.getElementById('root')).render(<App />);
    </script>
</body>
</html>

🖥️ 运行结果

▶ Console Output

文章列表
共 3 篇文章

┌───────────────────────────────────┐
│ JavaScript 入门指南                │
│ 作者：小明 | 日期：2026-06-01      │
│ 零基础学习 JavaScript 的基础语法... │
└───────────────────────────────────┘
┌───────────────────────────────────┐
│ CSS 布局技巧                       │
│ 作者：小红 | 日期：2026-06-05      │
│ Flex 和 Grid 布局完全指南...       │
└───────────────────────────────────┘
┌───────────────────────────────────┐
│ React 快速上手                     │
│ 作者：小明 | 日期：2026-06-10      │
│ 用组件化的方式构建用户界面...       │
└───────────────────────────────────┘

关于 key

key 是 React 用来识别哪个元素是哪个的标记。就像每个人都有身份证号，React 靠 key 来高效更新列表。

jsx

// ✅ 用唯一 id 作为 key
{posts.map(post => <PostCard key={post.id} {...post} />)}

// ❌ 不要用下标作为 key（数据顺序变化时会出问题）
{posts.map((post, index) => <PostCard key={index} {...post} />)}

⚠️ 新手易错：key 必须放在 map 的最外层元素上，不能放在组件内部。

⚠️ 新手易错：key 必须在兄弟元素中唯一，但不需要全局唯一。

⚠️ 新手易错：用 index（下标）做 key 是不推荐的。如果数组会发生排序、插入、删除，用 index 做 key 会导致组件状态错乱。

本章复盘——React 介绍与 JSX 核心要点

要点	说明
React 是什么	用组件化方式构建 UI 的 JavaScript 库
JSX	JavaScript + XML 的混合语法，`{}` 嵌入表达式
className	JSX 里用 `className` 代替 `class`
style	是 JS 对象，双花括号 `{{ color: 'red' }}`
条件渲染	三元 `? :`、`&&` 短路、提前 `return`
列表渲染	用 `map()` 把数据数组映射成 JSX 数组
key	列表元素必须有唯一 key，推荐用数据 id

下一章预告（第10章）：我们将学习组件与 Props——函数组件的定义、Props 传递、默认值和 children 的使用。

⬅️ 上一章：Node.js 基础下一章：组件与 Props ➡️

本文档由 zyyc-0336 编写，最后更新：2026-06-14