语法规则：

1、遇到HTML标签(以<开头)，就用HTML规则去解析，遇到代码块({开头)，就用JavaScript规则解析

2、class 编程 className

<div className="welcome">Hello， React</div>

3、如果不存在子节点，你可以使用自闭合格式的标签

<div className="welcome" />

4、绑定数据采用的是单{}

<div className="welcome">Hello， React { a + b }</div>

5、绑定style的时候要双{{ }}，第一层代表表达式，第二层代表对象

<div style={{color: 'blue', fontSize:'100px'}}>Hello， React { a + b }</div>

6、注释

# 单行注释
{
         // <p>Hi</p>
}
# 多行注释
{
    /* 注释内容 */
}

7、自定义组件的时候，组件名称首字母大写

# Hello -> 首字母大写
function Hello() {
    return <div>Hello, React</div>
}

8、组件必须只能有一个根标签

import React, { Fragment } from 'react'
# Fragment 不会显示在DOM结构中
<Fragment>
        <li>111</li>
        <li>222</li>
        <li>333</li>
 </Fragment>

9、可以展开数组

let arr = [
    `<h1>aaa</h1>`,
    `<h2>bbb</h2>`,
]

function Hello() {
    return <div><ul>Hello, { arr }</ul></div>
}
# 结果
Hello, <h1>aaa</h1><h2>bbb</h2>

10、驼峰命名