JSX（在JS代码中编写HTML模版结构）的概念

什么是JSX

https://zh-hans.react.dev/learn/writing-markup-with-jsx

• 是JavaScript 和 XML（HTML）的缩写，表示在JS代码中编写HTML模版结构，它是React中编写UI模版的方式。
• JSX 是 JavaScript 语法扩展，可以让你在 JavaScript 文件中书写类似 HTML 的标签。虽然还有其它方式可以编写组件，但大部分 React 开发者更喜欢 JSX 的简洁性，并且在大部分代码库中使用它。

注意：JSX and React 是相互独立的 东西。但它们经常一起使用，但你 可以 单独使用它们中的任意一个，JSX 是一种语法扩展，而 React 则是一个 JavaScript 的库。

JSX的优势

• HTML的声明式模版写法
• javascript的可编程能力

随着 Web 的交互性越来越强，逻辑越来越决定页面中的内容。JavaScript 控制着 HTML 的内容！这也是为什么 在 React 中，渲染逻辑和标签共同存在于同一个地方——组件。

JSX的本质

JSX并不是标准的JS语法，而是JS的语法扩展。浏览器本身不能识别JSX，需要通过解析工具（Babel）解析之后才能在浏览器中运行。

下面看看这个过程：
访问https://babeljs.io/

点击上面的 Try it out 菜单项，进入页面：

确保左侧栏中的 react勾选上，就可以编译JSX了：

在左侧窗口输入一小段代码，右面窗户是Babel编译后的结果：

JSX的规则

1）只能返回一个根元素
2）标签必须闭合
2）使用驼峰式命名法给 所有 大部分属性命名