React 基础学习笔记-练习jsx语法

一、练习jsx语法时遇到的错误

1，写完h2标签后立马写ul标签，报错，因为外面没有包裹根标签div

2，data.map方法回调函数内没有写return，导致数据无法渲染到页面上

3，li标签中需要加key属性

4，没有注意到标签中混入JS表达式时要用{}，也就是ul后标签没有紧跟着{}

注意：（1）data中定义数组的话，React会自动帮助遍历；如果是对象的话，此时React会报错

<script type="text/babel">
    const data = ['Angular','React','Vue']
    const VDOM = (
      <div>
        <h2>前端js框架列表</h2>
        <ul>
          {
            data.map((item,index)=>{
              return <li key={index}>{item}</li>
            })
          }
        </ul>  
      </div>
    )
    ReactDOM.render(VDOM,document.getElementById('test'))
  </script>