React JSX进一步学习

jsx语法规则:

React笔记

jsx语法规则:

定义虚拟DOM时, 不要写引号
标签中混入JS表达式时要用{}
样式的类名指定不要用class, 要用className
内联样式, 要用style=的形式去写
只有一个根标签
标签必须闭合
标签首字母
- 若小写字母开头, 则将该标签转为html中同名元素, 若html中无该标签对应的同名元素, 则报错
- 若大写字母开头, react就去渲染对应的组件, 若组件没有定义, 则报错

	<style>
		.title{
			background-color: orange;
			width: 333px;
		}
	</style>
</head>
<body>
	<!-- 准备好一个"容器"-->
	<div id="test"></div>
	<script type="text/javascript" src="引入react核心库"></script>
	<script type="text/javascript" src="引入react-dom"></script>
	<script type="text/javascript" src="引入babel"></script>

	<script type="text/babel" >
		const myId = 'Stitch'
		const myData = 'My Name is Stitch'

		//1.创建虚拟DOM
		const VDOM = (
			<div>
				<h2 className="title" id={myId.toLowerCase()}>
					<span style={{color:'white',fontSize:'29px'}}>{myData.toLowerCase()}</span>
				</h2>
				<h2 className="title" id={myId.toUpperCase()}>
					<span style={{color:'white',fontSize:'29px'}}>{myData.toLowerCase()}</span>
				</h2>
				<input type="text"/>
			</div>
		)
		//2.渲染虚拟DOM到页面
		ReactDOM.render(VDOM,document.getElementById('test'))
	</script>
</body>

<body>
		//模拟一些数据
		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>

效果

作者: 我叫史迪奇
本文来自于: https://sdq3.link/React-JSX-one.html博客内容遵循署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议