JSX语法

JSX是JavaScript的扩展语法，react使用JSX代替JavaScript。

使用JSX需要引入babel。

JSX语法规则

1. 创建VDOM不能用引号包裹html代码。
2. 标签中使用{}包裹js表达式。
3. 用className代替class，用htmlFor代替for。
4. 标签style属性的值要用两对花括号包裹，花括号中间是属性名:属性值的写法，用逗号隔开。
5. 只能有一个根标签。
6. 所有标签都要闭合。
7. react对于大写开头的标签会渲染对应的组件，对于正常的html标签不作处理。

如何创建组件

1. 直接创建VDOM变量，然后用render函数渲染

使用babel解析JSX语法。

JSX

// 创建VDOM
const VDOM = <div id={data.id.toLowerCase()}>hello, it's me!</div>
// react渲染VDOM
ReactDOM.render(VDOM, document.getElementById("container_id"))

// 卸载VDOM
ReactDOM.unmountComponentAtNode(document.getElementById("container_id"));

2. 使用函数创建VDOM

JSX

function componentA(porps) {
    const {name, age} = props;
    const VDOM = <div>my name is : {name}, and {age} yo.<div/>;
    return VDOM;
}

3. 使用class创建VDOM

JSX

class componentB extends React.component {

    constructor(props) {
        super(props);
        this.state = {
            name: 'Mason'
        };
    }

    render() {
        return (
            <div>{this.state.name} <div />
        );
    }

}

模块和组件

react的模块和组件思想和vue一样。

react组件分为函数式组件和类式组件。