React细节

1、基本语法

1.1、属性名

当react采用JSX语法时，JSX语法将类HTML结构直接写在了代码中。由于HTML的部分属性在JavaScript中属于保留字，因此属性名采用新的替代名称，且采用驼峰语法。比如class使用className代替

class example extends React.Component {
    render() {
        return <h1 className='style1'>Hello World</h1>;
    }
}

1.2、内联样式

react中的内联样式的值使用对象而不是字符串

class example extends React.Component {
    render(){
        return <h1 style={{color: 'red'}>Hello World</h1>;
    }
}

在React中，内联表达式都是用{}表示的。所以在上面的示例中，style需要两个{}来表示，最外面的表示这是一个表达式，里面一个才表示这是一个对象。

二级标题

三级标题

四级标题

注：