语法规则:
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、驼峰命名