react 基础篇 4 {表达式}

最新推荐文章于 2023-06-25 17:40:59 发布

胡佳侦

最新推荐文章于 2023-06-25 17:40:59 发布

阅读量319

点赞数

原文链接：https://blog.csdn.net/qq_45783660/article/details/116498132

版权

关键词由CSDN通过智能技术生成

react 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

标题

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>js 表达式</title>
</head>
<body>
	<div id="app"></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" >
		/* 
			一定注意区分：【js语句(代码)】与【js表达式】
					1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
								下面这些都是表达式：
										(1). a
										(2). a+b
										(3). demo(1)
										(4). arr.map() 
										(5). function test () {}
					2.语句(代码)：
								下面这些都是语句(代码)：
										(1).if(){}
										(2).for(){}
										(3).switch(){case:xxxx}
		
	 */
		//模拟一些数据
		const data = ['百度','阿里','华为', '腾讯', '字节跳动', '头条', '网易', '京东']
		//1.创建虚拟DOM
		const VDOM = (
			<div>
				<h1>国内大厂</h1>
				<ul>
					{
						// 慎用 index 作为 key
						data.map((item, i)=>{
							return <li key={i}>{item}</li>
						})
					}
				</ul>
			</div>
		)
		//2.渲染虚拟DOM到页面
		ReactDOM.render(VDOM,document.getElementById('app'))
	</script>
</body>
</html>