JSX 基本语法

1、XML 基本语法
使用类 XML 语法的好处是标签可以任意嵌套，我们可以像 HTML 一样清晰地看到 DOM 树状结构及其属性。

const List = () => ( 
 <div> 
 <Title>This is title</Title> 
 <ul> 
 <li>list item</li> 
 <li>list item</li> 
 <li>list item</li> 
 </ul> 
 </div> 
);

• 定义标签时，只允许被一个标签包裹;例如，const component = <span>name</span><span>value</span> 这样写会报错
• 标签一定要闭合

2、元素类型

• DOM 元素 (小写首字母对应 DOM 元素)
• 组件元素(组件元素对应大写首字母)

const Title = (children) => ( 
 <h3>{children}</h3> 
);

通过命名空间的方式使用组件元素
const App = () => (
<MUI.RaisedButton label="Default" />
);
3、注释
{/* 节点注释 */}

4、元素属性
不论是 DOM 元素还是组件元素，它们都有属性。
不同的是，DOM 元素的属性是标准规范属性，但有两个例外——class 和 for，这是因为在JavaScript 中这两个单词都是关键词。
因此：

• class 属性改为 className；
• for 属性改为 htmlFor。

Boolean 属性
省略 Boolean 属性值会导致 JSX 认为 bool 值设为了 true；比如 disabled、required、checked 和 readOnly 等。<Checkbox checked={true} /> 可以简写为 <Checkbox checked />