第1章 React 基础

第 1 章 · React 基础

章节摘要：React 不是靠背 API 学会的，是靠写出第一个能跑的组件学会的。本章从「React 解决什么问题」讲起，带你装好开发环境、跑起第一个应用，再亲手敲 JSX、写函数组件、传 props、管 state——四节走完，你手里会有一个真正运行起来的 React 应用，而不是一堆抄来的片段。读完应能在 30 分钟内新建项目并写出第一个交互组件。

这一章的定位是整个教程的地基，重要性再怎么强调都不为过：第 2 章讲虚拟 DOM 和 Hooks，前提是你亲手写过组件、被闭包坑过；第 3 章做性能优化和测试，前提是你知道 props 变化会触发什么；第 5 章的项目实战，前提是你已经把「组件、props、state」内化成直觉。前四节看起来基础，但几乎所有 React 高阶话题都能追到这一章的某个概念上。

先说结论

阅读完本章，你应当能够：

1. 说明 React 的声明式思想与组件化、单向数据流的基本含义
2. 用 Vite 或 Create React App 创建项目，并理解两种脚手架的差别
3. 写出符合规范的 JSX，区分它和 HTML 的关键差异（className、花括号表达式、Fragment）
4. 用函数组件与类组件各写一个计数器，说明 props 与 state 的分工
5. 用 props 在父子组件间传数据，用 state 驱动界面更新

核心概念速览

React 声明式数据流

这张图是本章全部内容的主线：state 决定 UI，UI 交互通过事件回写 state，构成一个闭环。JSX、组件、props 都是这条环上的「零件」——props 是外部传入的数据，state 是组件自己的数据，两者共同决定界面长什么样。

金句：组件是函数，props 是入参，state 是局部变量，JSX 是这张「UI 描述」的语法糖——把这三件事想透，React 基础就过半了。

这条金句值得反复品。组件是函数，意味着它接收输入、产出输出，可以组合、可以复用；props 是入参，只读、由外部决定；state 是局部变量，可变、由组件自己管理；JSX 是描述界面的语法糖，最终编译成对象。四个概念各司其职，构成了 React 最基本的「数据 → 界面」映射。后面学的所有东西——事件、Hooks、Context、状态库——都是在这个映射上叠加能力，而不是推翻它。

子章节导航

1.1 React 简介

回答「为什么选 React」：声明式、组件化、跨平台。SOURCE 原文提到的 React Native、虚拟 DOM、单向数据流这些概念，先有个印象，第 2 章会深入。这一节建立动机，后面的学习才有方向。

1.2 开发环境搭建

比较 Create React App 与 Vite 两条路：CRA 零配置但慢、封装深；Vite 冷启动快、配置透明。给出可复现的命令序列，跑通第一个欢迎页。环境是「先跑起来」的前提，别让它在第一步卡住你。

1.3 JSX 语法

JSX 是 JavaScript 的语法扩展，最终被编译成 React.createElement 调用。本节处理它和 HTML 的差异：className、驼峰 style、花括号表达式、注释写法、Fragment、XSS 转义。掌握这些差异，写 JSX 就不会再被「为什么不是 HTML」卡住。

1.4 组件基础

函数组件是纯函数，类组件是 ES6 类。props 只读、state 可变。用同一个计数器分别用两种写法实现，对比体感差异，为第 2 章 Hooks 做铺垫。这一节学完，你会对「数据驱动视图」有第一次完整的体感。

子章节之间的逻辑关系

简介（为什么要用）──► 环境（怎么跑起来）──► JSX（界面怎么写）──► 组件（功能怎么组织）
                                        ▲
                        props/state（数据怎么流动）┘
​

第 1 节回答动机，第 2 节解决「怎么跑」，第 3、4 节是本章核心：JSX 负责描述界面，组件负责把界面和数据绑在一起。props 和 state 是组件的数据入口，理解它们的分工，第 2 章的事件处理、条件渲染、Hooks 才有落点。

本章怎么动手

本章是全书动手密度最高的部分，建议按下面的节奏走，不要一口气读完四节再动手：

每节配一次「十分钟练习」。 读完 1.1，用 Vite 起一个空项目，把 Hello React 那几行改一遍；读完 1.2，你已经有了项目骨架；读完 1.3，把 JSX 的差异点（className、style 对象、Fragment）逐一在组件里试一遍；读完 1.4，写一个同时用 props 和 state 的小组件——比如一个「接收问候语、点击按钮计数」的迷你应用。

练习的验收标准是「能讲给别人听」。 如果朋友问「props 和 state 什么区别」，你能不查资料用一句话讲清楚——说明真的理解了。讲不清楚，回炉再敲一遍。

常见的三种起步困惑

新手在第一章最容易卡住的三个点，提前打预防针：

「JSX 看着像 HTML 为什么不能用 HTML 的写法？」 因为 JSX 是 JavaScript 表达式，最终要编译成 createElement 调用，必须遵守 JS 语法。class 是保留字所以用 className，style 要传对象。这个「别扭」是编译规则的必然，不是设计失误。

「函数组件和类组件到底学哪个？」 两个都学，但心态要摆正：函数组件是当下主流，必须熟练掌握；类组件是存量代码的主体，要能读、能改、能迁移。第 2.2 节会给完整的迁移对照表。

「环境一直装不好是不是我不适合学？」 环境问题几乎人人踩过，和天赋无关。第 1.2 节给了报错排查表，对照症状找解法。装环境的本质是让工具链替你干活，多装几次就有经验了，别让环境问题劝退自己。

前置知识与后续延伸

• 前置：会基础 HTML/CSS；掌握 JavaScript 的箭头函数、解构赋值、数组 map；知道 npm 基本命令。如果 JavaScript 基础薄弱，建议先花一周补语法——本章代码虽然精简，但解构、箭头函数、模板字符串这些语法是默认要求
• 为后续铺垫：第 2 章的所有核心概念（虚拟 DOM、生命周期、Hooks）都建立在「组件 + JSX + props/state」之上；第 4 章脚手架与 CSS 方案也复用本章的环境与组件经验
• 能力自测：学完本章，你应该能不看任何资料，从零用 Vite 建一个项目，写出一个带 props 和 state 的交互组件。做不到，回头重读对应小节；做到了，直接进第 2 章