RN开发-JSX基础语法

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",{"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>