JSX 规则

1. 只能返回一个根元素

   1. 如果想要在一个组件中包含多个元素，需要用一个父标签把它们包裹起来。
   2. 如果你不想在标签中增加一个额外的 <div>，可以用 <> 和 </> 元素来代替：

   为什么多个 JSX 标签需要被一个父元素包裹？

   JSX 虽然看起来很像 HTML，但在底层其实被转化为了 JavaScript 对象，你不能在一个函数中返回多个对象，除非用一个数组把他们包装起来。这就是为什么多个 JSX 标签必须要用一个父元素或者 Fragment 来包裹。

2. 标签必须闭合

   1. JSX 要求标签必须正确闭合。像 <img> 这样的自闭合标签必须书写成 <img />，而像 <li>oranges 这样只有开始标签的元素必须带有闭合标签，需要改为 <li>oranges</li>

3. 使用使用驼峰式命名法给 所有 大部分属性命名

   1. JavaScript 对变量的命名有限制。例如，变量名称不能包含 - 符号或者像 class 这样的保留字。