什么是 JSX? 为什么要用 JSX?

JSX 在语法上看起来与 HTML 相近，但它其实是 JavaScript 的语法扩展。它的特点是，UI 与 JavaScript 逻辑的相融 - 组合成元件。虽然 React 官方没有强制要求使用 JSX 来开发 React，但使用上来说，大多数人觉得对开发体验比较好，它也可以让 React 显示一些错误和提示讯息。

JSX 是什么

JSX 本质上做的事情是：生成 React 元素(elements)，它其实是React.createElement(component, props, ...children) 函式的语法糖。可以看到下面的例子

<MyButton color="blue" shadowSize={2}>
  Click Me
</MyButton>

等同于

React.createElement(MyButton, { color: "blue", shadowSize: 2 }, "Click Me");

为什么要用 JSX?

上面提到 JSX 本身就是 JavaScript，因此使用 JSX 等于是把标记 (markup) 与逻辑 (logic) 写在一起。这直观上有违写程式的原则，毕竟写程式要尽可能地把关注点分离(separation of concerns)，内容呈现归内容呈现、逻辑的部份归逻辑，如果用了 JSX ，就等于把两者混合在一起。那我们为什么要用 JSX 呢?

原因在于现代的许多网站都是高度动态，许多逻辑会决定内容的呈现，这时把内容与逻辑放在一起 ，能确保有任何更动时两者维持同步，以及在重复使用时也方便。与此同时，跟元件没有相关的内容，可以被到另一个元件当中，这样不同元件的改动也可以保持独立，不怕改某个东西而影响了另一个元件。

JSX 规则

1. 回传单一个根元素： 如果有一元件最终回传多个元素，我们需要将这些元素用一元素包起来当做父层元素(例如用<div> 或使用Fragment (<> 和</>)。
2. 所有标签都需要 Close： JSX 要求所有标签都需要有结尾，self-closing 这类型的标签，例如：<img> 一定要用 <img /> 表示。
3. 几乎所有属性名称是用 camelCase 表示： JSX 最终会被转换为 JavaScript，而 JavaScript 会对变数名称有限制，像是不能使用保留字和连接号，所以在写 JSX 时，才会将许多属性名称用camelCase 的方式书写。举例来说：如果要加入 css 的 class，会用 className、stroke-width 会改成使用 strokeWidth。但还是有例外，aria-* 和 data-* 属性的写法，还是与 HTML 中相同写法。