9、JSX 深入解析：编译、特性与陷阱

JSX 深入解析：编译、特性与陷阱

1. JSX 编译

在使用 JSX 时，由于浏览器只能运行 JavaScript，所以需要将 JSX 代码编译为普通的 JavaScript 代码。不过，在大多数情况下，你无需自己搭建编译环境。

如果你想从头开始搭建一个 React 项目，就需要设置 JSX 转译器。目前，最流行的 JSX 转译工具是 Babel，但也有其他替代方案，如 SWC、Sucrase 和 ESBuild。建议你不要花费过多时间自己搭建 JSX 转译器，React 官方提供的 CRA 能满足大部分需求。

2. React 和 JSX 的陷阱

2.1 自闭合元素

JSX 要求叶节点必须有闭合斜杠（/），可以在结束标签中，也可以在没有子节点的单标签末尾。例如：

<a href="//reactjs.org">React</a>
<img src="/logo.png" alt="Logo" />

而下面的代码是错误的，因为两个节点都缺少结束标签：

<a href="//reactjs.org">React
<img src="/logo.png" alt="Logo">

HTML 对错误的容忍度更高，浏览器会忽略缺失的斜杠或结束元素并正常渲染。

2.2 特殊字符

HTML 实体代码用于显示特殊字符，如