<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jsx语法练习</title>
<style>
</style>
</head>
<body>
<!-- 准备好一个“容器” -->
<div id="test"></div>
<!-- 引入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"> /* 此处一定要写babel */
/*
一定要区分 js语句 与js表达式
*/
// 模拟一些数据
// 会自动遍历数组
const data = ['Angular', 'React', 'Vue']
// 对象不能遍历
const obj = {
name1: 'Angular',
name2: 'React',
name3: 'Vue'
}
// 1.创建虚拟DOM
const VDOM = (
<div>
<h1>前端js框架列表</h1>
<ul>
{
data.map((data, index) => {
return <li key={index}>{data}</li>
})
}
</ul>
</div>
)
// 渲染虚拟DOM到页面
ReactDOM.render(VDOM, document.querySelector('#test'))
</script>
</body>
</html>
259
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
