一、题目如下：
<script type="text/babel">
const name = "zhangsan"
const lessons = ['react', 'vue', 'angular']
//1. 创建一个虚拟DOM
const VDOM = ？
//2. 渲染虚拟DOM到
ReactDOM.render(VDOM, document.getElementById('hello'));
</script>
基于以上模板，完成VDOM的编写。最终实现效果如下图：其中zhangsan的值根据name变量获取，li的内容根据lessons获取
image.png
二、代码目录结构如下：
image.png
三、exec.html代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 准备好一个容器，用于挂载虚拟DOM -->
<div id="hello"></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>
<!-- 这里一定要写text/babel -->
<script type="text/babel">
const name = "zhangsan"
const lessons = ['react', 'vue', 'angular']
//1. 创建一个虚拟DOM
const VDOM =(
<div>
<h1>Hello, {name}</h1>
<ul>
{
lessons.map((lesson,index) => {
return <li key={index}>{lesson}</li>
})
}
</ul>
</div>
)
//2. 渲染虚拟DOM到
ReactDOM.render(VDOM, document.getElementById('hello'));
</script>
</script>
</body>
</html>
四、运行效果如下：
image.png
