React小练习
PlainBashC++C#CSSDiffHTML/XMLJavaJavascriptMarkdownPHPPythonRubySQL
<!DOCTYPE html >
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello React</title>
</head>
<style>
.title{
color: red;
}
</style>
<body>
<!--准备好一个容器-->
<div id="text"></div>
<!-- 加载 React。引入react核心库-->
<!-- 注意: 部署时，将 "development.js" 替换为 "production.min.js"。-->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<!-- 引入react-dom,用于支持react操作dom-->
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<!--引入babel，用于jsx转为js-->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">/*此处一定要写babel，不写默认js*/
/*
一定要注意区分：js语句和js表达式
1，表达式，一个表达式会产生一个值，可以放在任何一个需要值得地方
下面都是表达式
a
a+b
demo(1)
arr.map()
funcotion test(){}
2,语句（代码）
下面这些都是语句：
if(){}
for(){}
switch(){case:xxx}
*/
//模拟一些数据
const data=["雅俗共赏","最佳歌手","大千世界"];
//1,创建虚拟dom
const VDOM =(
<div>
<h1>有何不可</h1>
<ul>
{
data.map((item,index)=>{
return <li key={index}>{item}</li>
})
}
</ul>
</div>
)
//2,渲染虚拟dom到页面
ReactDOM.render(VDOM,document.getElementById('text'))
</script>
</body>
</html>