JSX

jsx的官方定义是类XML语法的ECMAScript扩展。下面用不同的维度来描述

- XML基本语法

使用XML语法的好处是标签可以任意嵌套，可以像html一样清晰地看到DOM树状结构及其属性，比如构造一个LIST组件：

** 定义标签时，只允许被一个标签包裹。因为一个标签会被转译成对应的React.createElement调用方法，最外层没有被包裹，显然无法转译成方法调用。

** 标签一定要闭合。所有标签都必须要闭合，否则无法编译通过。其中在html中的自闭合的标签（如<img>）在jsx中也遵循同样的规则，自定义标签可以根据是否有子组件或者文本来决定闭合方式。

- 元素类型

DOM元素和组件元素。在JSX里面自然会有对应，对应规则是是HTML标签首字母是否为小写字母，其中小写首字母对应DOM元素，而组件元素自然对应大写首字母。

- 元素属性

元素除了标签之外，另外一个组成部分就是标签的属性。在JSX中，不论是DOM元素还是组件元素，它们都有属性。不同的是，DOM元素的属性是标准规范属性，但有两个例外----class 和 for ，这是因为这两个单词都是关键词，因此在使用的时候需要转化一下：

** class 属性改为 className.

** for 属性改为htmlFor

而组件元素的属性是完全自定义的属性，也可以理解为实现组件所需要的参数。

jsx -> js xml 可扩展的js语法

-- class必须写成className

--标签必须是闭合状态 包括单标签<input />

--如果元素属性是一个变量需要花括号 src={ obj.xxx }