React学习笔记6. jsx小练习

<script type="text/babel" >
    // 1. 创建虚拟DOM
    const VDOM = (
        <div>
            <h1>前端js框架列表</h1>
            <ul>
                <li>Angular</li>
                <li>React</li>
                <li>Vue</li>    
            </ul>
        </div>
    )
    // 2. 渲染虚拟DOM到页面
    ReactDOM.render(VDOM, document.getElementById('test'))
</script>

一定注意区分：js语句（代码） 与 js表达式 。

虚拟DOM的 {} 里面只能是js表达式。

1. 表达式：一个表达式会产生一个值，可以放在任何一个需要值得地方
   下面这些都是表达式：
   1. a
   2. a+b
   3. demo(1)
   4. arr.map()
   5. function test () { ... }
2. 语句（代码）：
   下面这些都是语句（代码）：
   1. if () {}
   2. for () {}
   3. switch() {case: xxxx}

<script type="text/babel" >
    // 模拟一些数据
    const data = ['Angular','Rect','Vue']
    // 1. 创建虚拟DOM
    const VDOM = (
        <div>
            <h1>前端js框架列表</h1>
            <ul>
                {
                    data.map((item,index)=>{
                        return <li key={index}>{item}</li>
                    })
                }
            </ul>
        </div>
    )
    // 2. 渲染虚拟DOM到页面
    ReactDOM.render(VDOM, document.getElementById('test'))
</script>