React JSX
什么是 JSX?
JSX 代表 JavaScript XML。
JSX 允许我们在 React 中编写 HTML。
JSX 使在 React 中编写和添加 HTML 变得更加容易。
编码 JSX
JSX 允许我们在 JavaScript 中编写 HTML 元素并将它们放置在 DOM 中，而无需任何 createElement() 或 appendChild() 方法。
JSX 将 HTML 标签转换为 react 元素。
您不需要使用 JSX，但 JSX 使编写 React 应用程序变得更加容易。
这里有两个例子。 第一个使用 JSX，第二个不使用：
示例 1
JSX:
const myElement = <h1>I Love JSX!</h1>;
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);
示例 2
没有 JSX：
const myElement = React.createElement('h1', {}, 'I do not use JSX!');
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);
正如您在第一个示例中所见，JSX 允许我们直接在 JavaScript 代码中编写 HTML。
JSX 是基于 ES6 的 JavaScript 语言的扩展，在运行时被翻译成常规的 JavaScript。
JSX 中的表达式
使用 JSX，您可以在花括号 { } 内编写表达式。
表达式可以是 React 变量、属性或任何其他有效的 JavaScript 表达式。 JSX 将执行表达式并返回结果：
插入一大块 HTML
要在多行上编写 HTML，请将 HTML 放在括号内：
实例
创建一个包含三个列表项的列表：
const myElement = (
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Cherries</li>
</ul>
);
一个顶级元素
HTML 代码必须包含在 ONE 顶级元素中。
所以如果你喜欢写两个段落，你必须把它们放在一个父元素中，比如一个div元素。
实例
将两个段落包装在一个 DIV 元素中：
const myElement = (
<div>
<p>I am a paragraph.</p>
<p>I am a paragraph too.</p>
</div>
);
如果 HTML 不正确，或者 HTML 缺少父元素，JSX 将抛出错误。
或者，您可以使用"片段"来换行多行。 这将防止不必要地向 DOM 添加额外的节点。
片段看起来像一个空的 HTML 标记：<></>。
实例
将两个段落包装在一个片段中：
const myElement = (
<>
<p>I am a paragraph.</p>
<p>I am a paragraph too.</p>
</>
);
元素必须关闭
JSX 遵循 XML 规则，因此 HTML 元素必须正确关闭。
如果 HTML 没有正确关闭，JSX 会抛出错误。
属性 class = className
class 属性是 HTML 中常用的属性，但是由于 JSX 被渲染为 JavaScript，而 class 关键字是 JavaScript 中的保留字，所以你不是 允许在 JSX 中使用它。
改用属性className。
JSX 通过使用 className 解决了这个问题。
渲染 JSX 时，它会将 className 属性转换为 class 属性。
实例
在 JSX 中使用属性 className 而不是 class：
const myElement = <h1 className="myclass">Hello World</h1>;
条件 - if 语句
React 支持 if 语句，但不支持 inside JSX。
为了能够在 JSX 中使用条件语句，您应该将 if 语句放在 JSX 之外，或者您可以使用三元表达式来代替：
选项 1：
在 JSX 代码之外编写 if 语句：
实例
如果x小于10则写"Hello"，否则写"Goodbye"：
const x = 5;
let text = "Goodbye";
if (x < 10) {
text = "Hello";
}
const myElement = <h1>{text}</h1>;
选项 2：
改用三元表达式：
实例
如果x小于10则写"Hello"，否则写"Goodbye"：
const x = 5;
const myElement = <h1>{(x) < 10 ? "Hello" : "Goodbye"}</h1>;
注意，为了在 JSX 中嵌入 JavaScript 表达式，JavaScript 必须用大括号 {} 括起来。。 p>
