1、环境

        react.js

        react-dom.js

        browser.min.js(解码器)

    

    2、载入方式

        内联、外联

    

    3、标签

        HTML，ReactJS自定义组件类

    

    4、转换器（解析器）

        <h1>zxx</h1>  -->  React.createElement("h1",null,"zxx");

        返回一个ReactElement对象

        第一个参数： 标签

        第二个参数： 标签属性

        第三个参数： 标签值

    

    5、执行JavaScript表达式

        var msg = "zxzxzx";

        <h1>{msg}</h1> --> React.createElement("h1",null,msg);

    

    6、注释

        // 和 /* */

    

    7、属性

        var msg = <h1 width="10px">zxzxzx</h1>

        --> React.createElement("h1",{width:"10px"},"zxzxzx")

    

    8、延展属性

        使用ES6语法 (...循环遍历，=>箭头函数)

        var props={};

        props.foo="1";

        props.bar="1";

        <h1 {...props} foo="2">zxzxzx</h1>

        --> React.createElement("h1",React.__spread({},props,{foo:"2"}),"zxzxzx")

        

    9、自定义属性

        data- 开头的自定义属性，可以渲染到页面

        <h1 height="10px" data-test="test" test="zxx"></>

        其中data-test会渲染到页面，test不会

    

    10、显示HTML字符串

        借助属性： _html

        <div>

            {

{_html:'<h1>zxzxzx</h1>'}}

        </div>

        

    11、样式使用

        通过style属性定义

        <h1 style={

{color:'#ff0000',fontSize:'14px'}}></h1》

        外层{} JSX语法

        内层{} JavaScript对象

        

    12、事件绑定

    <script>

        function testClick(){}

        var app = <button onClick={testClick.bind(this)}

                    style{

{height:'100px'}}>点击</button>

        React.render(app,document.findElement("demo"));

    </script>