JSX是javaScript 的语法扩展，可让您在 JavaScript 文件中编写类似 HTML 的标记。

JSX的规则

1.返回单个根元素

要从组件返回多个元素，使用单个父标记将它们包装起来。

可以使用div等其他标签或者<></>(这个空标签称为片段-Fragments 使您可以对事物进行分组，而不会在浏览器 HTML 树中留下任何痕迹。)

为什么需要包装多个JSX标签？

JSX 看起来像 HTML，但在底层它被转换为普通的 JavaScript 对象。如果不将它们包装到数组中，则不能从函数返回两个对象。这解释了为什么你也不能返回两个 JSX 标签而不将它们包装到另一个标签或片段中。

2.关闭所有标签

JSX 要求标签显式关闭：自关闭标签<img>必须成为<img />，包装标签<li>oranges必须写成<li>oranges</li>

3.属性事件驼峰式

像class->className、click->onClick

JSX花括号使用

当你想将一个字符串属性传递给 JSX 时，你可以将它放在单引号或双引号中

<span className="tag">JSX</span>

当我们想动态指定类名时可以使用 花括号{}

let name = 'tag'
<span className={name}>JSX</span>

当我们JSX传递对象时例如：{ name: "Hedy Lamarr", inventions: 5 }.要在 JSX 中传递 JS 对象，您必须将对象包裹在另一对花括号中：person={{ name: "Hedy Lamarr", inventions: 5 }}. 

任何 JavaScript 表达式都可以在花括号之间工作

const today = new Date();

function formatDate(date) {
  return new Intl.DateTimeFormat(
    'en-US',
    { weekday: 'long' }
  ).format(date);
}

export default function TodoList() {
  return (
    <h1>To Do List for {formatDate(today)}</h1>
  );
}

在哪里使用花括号

1.作为直接在 JSX 标签内的文本<h1>{name}'s To Do List</h1>：有效，但<{tag}>Gregorio Y. Zara's To Do List</{tag}> 不会

2.作为紧跟在=符号之后的属性src={avatar}：将读取avatar变量，但src="{avatar}"将传递字符串"{avatar}"