注意
data虽然可以直接for循环,但是会缺少标签样式,所以用map()修改。js表达式要加{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jsx小练习</title>
</head>
<body>
<!--准备好一个容器-->
<div id="test"></div>
<!--引入react核心库-->
<script src="../js/react.development.js"></script>
<!--引入react-dom,用于支持react操作dom-->
<script src="../js/react-dom.development.js"></script>
<!--引入babel,用于将jsx转为js-->
<script src="../js/babel.min.js"></script>
<script type="text/babel">
const data = ['Angular','React','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>
</body>
</html>