一、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>