jsx，代表 javascript xml，是通常与 react 一起使用的 javascript 语法扩展。它允许开发人员直接在 javascript 中编写类似 html 的代码，从而更轻松地创建和可视化用户界面。尽管在 react 中使用 jsx 不是强制的，但由于其在可读性和可维护性方面的优势，强烈推荐使用。
使用 jsx 的优点
- 可读性：
jsx 通过混合 html 和 javascript 让用户更容易理解 ui 的结构。
- 更少的样板：
使用 jsx 减少了创建 react 元素所需的样板代码量，使开发过程更加高效。
- javascript 的力量：
由于 jsx 最终转换为 javascript，因此您可以直接在标记中使用 javascript 表达式和逻辑。
- 基于组件的结构：
jsx 鼓励基于组件的架构，允许您创建封装逻辑和表示的可重用 ui 组件。
jsx 的主要特性
- 类似 html 的语法：jsx 使您能够以类似于 html 的方式编写元素，这对于熟悉 web 开发的人来说更加直观。
const element = <h1>hello, world!</h1>;
- 嵌入表达式：您可以通过将任何 javascript 表达式括在大括号 {} 中来将其嵌入到 jsx 中。这允许根据组件的状态或属性进行动态内容渲染。
const name = "alice"; const greeting = <h1>hello, {name}!</h1>;
- 属性：jsx 允许您使用类似于 html 的属性。但是，它遵循某些属性的驼峰命名约定，因为某些 html 属性与 javascript 保留关键字冲突。
class 与 classname：jsx 不使用 class，而是使用 classname 来指定 css 类。
const element = <div classname="container">content</div>;
- 子元素：在 jsx 中，您可以嵌套元素来创建父子关系，从而允许更复杂的 ui。
const element = (
<div>
<h1>welcome!</h1>
<p>this is a sample paragraph.</p>
</div>
);
- jsx 中的注释：您可以在 jsx 中包含注释，但它们必须用大括号括起来并使用 javascript 注释语法。
const element = (
<div>
{/* this is a comment */}
<h1>hello, world!</h1>
</div>
);
jsx 是如何工作的？
当你编写 jsx 时，它会被编译器（例如 babel）转换为 javascript 函数调用。例如，以下 jsx：
const element = <h1>hello, world!</h1>;
转化为：
const element = React.createElement('h1', null, 'Hello, World!');
这种转换使得 react 能够高效地管理和渲染虚拟 dom。
