reactjs基础：jsx小练习

左手的ㄟ右手 2023-10-02 18:06 12阅读 0赞

> 一定注意区分：【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\}

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>jsx小练习</title>
    </head>
    <body>
    	
    	<div id="test"></div>
    	
    	
    	<script type="text/javascript" src="../js/react.development.js"></script>
    	
    	<script type="text/javascript" src="../js/react-dom.development.js"></script>
    	
    	<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 = ['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>

![在这里插入图片描述][62fc6ae097e040c29616d7cd7b52bd87.png]

[62fc6ae097e040c29616d7cd7b52bd87.png]: https://img-blog.csdnimg.cn/62fc6ae097e040c29616d7cd7b52bd87.png