React系列，jsx

<script type="text/babel">
    var name = "kimoo";
    var fn = ()=> "kimoo";
    ReactDOM.render(
        <div>
            <div>
                <h2>标题</h2>
            </div>
            <ul></ul>
            <hr />
            <div> {name} </div>    //可以接收变量
            <hr />
            <div> {fn()} </div>    //可以接收函数调用
            <hr />
            <div> { true ? "kimoo": "unName" } </div>    //可以写三目
            <hr />
            <ul>
                <li> {1+2} </li>   //可以数值计算
                <li> {"a"+"b"} </li>   //可以拼接字符串
                <li> {true} </li>
                <li> {null} </li>
                <li> {undefined} </li>     //true,null,undefined都输出不到页面
                <li> {[1,2,3,4]} </li>   //1234  数组被去掉逗号，展示出来
            </ul>
            <hr />
            <div id="box"></div>
            <hr />
            <div id="{name}"></div>    //属性里面输出变量，不能加引号，否则会以字符串形式输出
            <hr />
            <div id={name}></div>
            <hr />
            <div className={name}></div>   //class是js中的关键字所以要用className去定义class
            <hr />
            <label htmlFor="inp"></label>   //for也是js中的关键字，要用htmlFor
            <hr />
            <div style={{color:"red"}} >miaov</div>   //样式要使用对象的形式
        </div>,
        document.getElementById("box"),
        function(){
            console.log( "render done" );
        }
    )