1.定义虚拟DOM不要写引号,因为不是字符串
const VDOM1 = <h1>Hello,React</h1>
const VDOM2 = ( /* 此处一定不要写引号,因为不是字符串 */
<h1 id="title">
<span>Hello,React</span>
</h1>
)
2.标签中混入JS表达式时要用{}
const data = ['Angular','React','Vue']
const VDOM = (
<div>
<h1>前端js框架列表</h1>
<ul>
{
data.map((item,index)=>{
return <li key={index}>{item}</li>
})
}
</ul>
</div>
)
3.样式的类名指定不要用class,要用className
常见一:
<h2 className="title"></h2>
常见二:
import hello from './index.module.css' // 将css提出去新建文件,文件名必须为 XXX.module.css
export default class Hello extends Component{
render(){
return <h2 className={hello.title}>Hello,React!</h2>
}
}
4.内联样式,要用style={{key:value}}的形式去写
<span style={{color:'white',fontSize:'29px'}}></span>
5.只有一个根标签,标签必须闭合,必要时可以使用<></>标签包起来
6.标签首字母
(1).若小写字母开头,则将该标签转为html中同名元素,若html中无该标签对应的同名元素,则报错。
(2).若大写字母开头,react就去渲染对应的组件,若组件没有定义,则报错。