react刚开始学习，写完后发现些许问题，请教如何解决。

<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>

<script type="text/babel">
     const data = ['angular','vue','react']; const VDOM = (
    <div>
        <h1>前端js框架列表</h1>
        <ul>
            { data.map((item,index)=>{
            <li key={index}>{item}</li>
            return }) }
        </ul>
    </div>
    ) //2.渲染虚拟DOM到页面 ReactDOM.render(VDOM,document.getElementById('test'))
</script>

写完之后控制台报错

每一步都按照教程最后却报错请各位大神帮忙解决

return写错地方了

 <ul>
           dat.map((item,index)=>{
           return <li key={index}>{item}</li>
          })
 </ul>
//如果是多行就
 <ul>
           dat.map((item,index)=>{
           return(
          <li key={index}>{item}</li>
     )
          })
 </ul>

return的地方写错了

data.map((item,index)=>{
           return (<li key={index}>{item}</li>);
})