概述

全称: JavaScript XML

React定义的一种类似于XML的JS扩展语法: JS + XML本质是React.createElement(component, props, ...children) 方法的语法糖

作用: 用来简化创建虚拟DOM

写法：var ele = <h1> Hello JSX!</h1>

注意1：它不是字符串, 也不是HTML/XML标签
注意2：它最终产生的就是一个JS对象
复制代码

标签名任意: HTML标签或其它标签

标签属性任意: HTML标签属性或其它

基本语法规则

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jsx语法规则</title>
	<style>
		.title{
			background-color: orange;
			width: 200px;
		}
	</style>
</head>
<body>
	<!-- 准备好一个“容器” -->
	<div id="test"></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" >
		const myId = 'aTgUiGu'
		const myData = 'HeLlo,rEaCt'

		//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>
</html>
复制代码

定义虚拟DOM时，不要写引号。
标签中混入JS表达式时要用 { }。 （标签中不能使用js语句）
样式的类名指定不要用 class，要用 className。（因为class是ES6中类的关键字，所以不让用）
内联样式，要用 style={{ key:value }} 的形式去写。
只有一个根标签
标签必须闭合
标签首字母

若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。若大写字母开头，React就去渲染对应的组件，若组件没有定义，则报错。
babel.js的作用

浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
只要用了JSX，都要加上type="text/babel", 声明需要babel来处理

区分js表达式与js语句

表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方，下面这些都是表达式：

a

a+b

demo(1) // 函数调用表达式

arr.map()

function test () {}
复制代码

2.语句(代码)，下面这些都是语句(代码)：【控制语句，控制代码走向，而不是产生值】

if(){ }

for(){ }

switch( ){case:xxxx}
复制代码

小练习

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jsx小练习</title>
</head>
<body>
	<!-- 准备好一个“容器” -->
	<div id="test"></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" >
		//模拟一些数据
		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>

React Jsx语法入门

概述

基本语法规则

区分js表达式与js语句

小练习