【02】基础知识:React - jsx语法规则

一、jsx 简介

全称为JavaScript XML,是 react 定义的一种类似于 XML 的 JS 扩展语法

JS + XML 本质是 React.createElement(component, props, ...children) 方法的语法糖,用来简化创建虚拟 DOM

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

注意:
它不是字符串,也不是 HTML/XML 标签
它最终产生的就是一个 JS 对象

二、jsx 语法规则

1、定义虚拟 DOM 时,不要写引号

2、标签中混入JS表达式时要用 {}

3、样式的类名指定不要用 class,要用 className

4、内联样式,要用 style={{key:value}} 的形式去写

5、只有一个根标签

6、标签必须闭合

7、标签首字母

(1)、若小写字母开头,则将该标签转为 html 中同名元素,若 html 中无该标签对应的同名元素,则报错

(2)、若大写字母开头,react 就去渲染对应的组件,若组件没有定义,则报错

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.toUpperCase()}</span>
				</h2>
				<input type="text"/>
			</div>
		)
		// 2、渲染虚拟DOM到页面
		ReactDOM.render(VDOM, document.getElementById('test'))
	</script>
</body>
</html>

三、jsx 练习

js 表达式

一个表达式会产生一个值,可以放在任何一个需要值的地方

(1)、 a
(2)、 a+b
(3)、demo(1)
(4)、 arr.map() 
(5)、function test () {}   - 函数定义表达式

js 语句(代码)

(1)、if(){}
(2)、for(){}
(3)、switch(){case:xxxx}

jsx 的 {} 中只能混入 JS表达式

html 复制代码
<!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" >
		// 模拟一些数据(react可以对数组进行遍历,对象不可以)
		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>
相关推荐
玩电脑的辣条哥2 小时前
Python如何播放本地音乐并在web页面播放
开发语言·前端·python
ew452182 小时前
ElementUI表格表头自定义添加checkbox,点击选中样式不生效
前端·javascript·elementui
suibian52352 小时前
AI时代:前端开发的职业发展路径拓宽
前端·人工智能
画月的亮2 小时前
element-ui 使用过程中遇到的一些问题及解决方法
javascript·vue.js·ui
Moon.92 小时前
el-table的hasChildren不生效?子级没数据还显示箭头号?树形数据无法展开和收缩
前端·vue.js·html
m0_526119402 小时前
点击el-dialog弹框跳到其他页面浏览器的滚动条消失了多了 el-popup-parent--hidden
javascript·vue.js·elementui
垚垚 Securify 前沿站2 小时前
深入了解 AppScan 工具的使用:筑牢 Web 应用安全防线
运维·前端·网络·安全·web安全·系统安全
工业甲酰苯胺5 小时前
Vue3 基础概念与环境搭建
前端·javascript·vue.js
lyj1689975 小时前
el-tree选中数据重组成树
javascript·vue.js·elementui
mosquito_lover16 小时前
怎么把pyqt界面做的像web一样漂亮
前端·python·pyqt