按理说，

一、前言：React 解决了什么根本问题？

回顾一下传统前端的代码：

// 一个计数器——你需要手动描述每一步 DOM 操作
$.on {
let count = parseInt.text) || 0;count++ // 数据变了
$.text // 手动更新 DOM
if {
$.css // 手动改样式
}
});

这段代码有一个根本问题：数据存在 DOM 里。整个应用的真实状态分散在数十个 DOM 节点中，没有任何一个地方能完整地回答"当前页面处于什么状态?"，

如果你是从 jQuery 转到 React 的新人，可能会感到无从下手：如何把状态抽象出来、如何让界面跟随变化而自动更新？怎么说呢，

React 提出了一种完全不同的思考方式：

function Counter {
const = useState;// 数据是"一等公民"
return (

 setCount}>点击

10?'text-red-' : ''}>
{count} // 数据变了界面自动变


);按理说，}

React 的主要承诺你只需要描述每个状态下界面长什么样。当数据变化时React 负责让界面跟上。你不需要知道 DOM 是怎么更新的。

二、JSX：在 JavaScript 里写 HTML

// 你写的 JSX
const element =
// 编译后等价于 ——
// const element = React.createElement(
// 'h1'。// { className: 'title' },// 'Hello,',// name,// '!'
)，

JSX 并不是一种新语言，而是让你在 JavaScript 中用类似 HTML 的书写方式来描述 UI。这样可以减少模板和脚本混杂导致的阅读障碍。

三条主要规则

// 规则1：{} 内可以写任意 JS 表达式

&{isLoggedIn?说起来，`欢迎,${user.name}` : '请登录'}

&{items.map }
// 规则2：className 而不是 class，因为 class 是 JavaScript 的保留关键字

// 规则3：每个 JSX 标签 = 一个 Virtual DOM 节点
// 多个节点组合 = 一棵 Virtual DOM 树

TSX这方面。 带类型的 JSX

如果你的项目使用 TypeScript，文件后缀就是 .tsx

// .tsx 文件：TypeScript + JSX
// 可以享受完整的类型检查 + JSX 语法
interface ButtonProps {
再看label，string;onClick: => void;variant，其实，: 'primary' | 'secondary';}
function Button {
// ...
}

三、组件：UI 的基本单元

一个函数就是一个组件

React 简单讲“组件”，就是一个函数：

function App {
// ───①逻辑区：return之前───┐
// 数据定义、状态管理、事件处理、副作用注册
const = useState;const = useState;

// ───②UI区：return之后───┘ // 用 {} 引用逻辑区变量

return (

Component 函数 就是纯粹的数据流向与渲染逻辑，它能让 UI 与业务代码解耦；这正是许多团队难以实现模块化时最大的痛点。

组件的主要公式

• (相同 state+props 一定产生相同 UI）——可预测性提高调试效率。
• (状态变了 UI 自动跟上）——免除手工 diff 与 patch 带来的 bug。
• (像测试纯函数一样测试组件）——单元测试覆盖率提高。

组件首字母必须大写

// ✅这是组件
function App { return 

…，‎‣‎
}
‣‎‣‎‣‎
App />

// ❌这是普通 HTML 标签function app { return ‣‎/>} ‣‎/app /> // React 会将 ‪ 当作原生 HTML 标签处理。

常见痛点 * 大小写错误导致 被当成原生标签而非自定义组件，往往隐藏在浏览器控制台中无声报错。* 新手容易忘记这一细节，从而造成渲染失效。