jsx是什么?
- jsx全称:javaScript XML
- 是react定义的一种类似于XML的js扩展语法,是js+xml。
- xml早期用于存储和传输数据,是标签加数据的形式。只不过后来慢慢的变成了json
- 其本质就是React.createElement(标签,属性,内容)方法的语法糖
- 其作用是为了简化虚拟dom
jsx语法规则
- 定义虚拟dom时,不写引号。
- 虚拟dom标签中混入js 表达式 时,需要使用大括号。这里表达式不是指js代码。下面将js语句(代码)和js表达式进行区分。
- 表达式:一个表达式会产生一个值,可以放在任何一个需要值的地方。例如
- a。一个变量名
- a+b。两个变量相加
- demo(1)。调用函数,并传递1
- arr.map()。对数组进行加工的方法
- function test(){}。定义一个函数
- 总结:就是在左边定义一个 const x= 然后用于接收,如果能接收到,就是表达式。
- 语句(代码):不能进行接收的,也就是不会产生一个值。例如
- for(){}
- if(){}
- switch(){case:xxx}
- 总结:左侧不能用一个变量去接收。
- 表达式:一个表达式会产生一个值,可以放在任何一个需要值的地方。例如
- 如果想用class样式,不是写class=“”,而是className=“”
- 内联样式,则需要两个大括号,第一个表示要写js,第二个表示要写一个对象key-value的形式。如果key是类似font-size这种则需要改成小驼峰形式。
- 虚拟dom必须只有一个根标签
- 标签必须要闭合
- 标签首字母
- 首字母小写,则直接转为html中找同名元素,若没有该标签对应的同名元素就报错
- 首字母大写,则react会渲染对应的组件,如果组件没有定义,则报错
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 这是进行移动端适配的 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jsx语法规则</title>
<style>
.title {
background-color: orange;
width: 400px;
}
</style>
</head>
<body>
<!-- 准备“容器” -->
<div id="test"></div>
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/babel.min.js"></script>
<script type="text/babel">
const myId = "njTech"
const myData = "hello,React"
// 1、创建虚拟dom
const VDOM = (
<div>
<h2 className="title" id={myId}>
<span style={{ color: "white", fontSize: "40px" }}>
{myData.toLowerCase()}
</span>
</h2>
<input type="text" />
<good>这个会找html中对应的标签,但是html中没有这个good标签,所以会给一个警告</good>
<Good>这个会找组件,但是没有定义Good组件,所以会报错</Good>
</div>
// <input type="text">// 这样是报错的
)
// 2、渲染虚拟dom到页面
ReactDOM.render(VDOM, document.getElementById("test"))
/**
* jsx语法规则
* 1、定义虚拟dom时,不写引号。
* 2、虚拟dom标签中混入js表达式时,需要使用大括号
* 3、如果想用class样式,不是写class="",而是className=""
* 4、内联样式写法style={{}},需要两个大括号,第一个表示要写js,第二个表示要写一个对象key-value的形式。如果key是类似font-size这种则需要改成小驼峰形式。
* 5、虚拟dom必须只有一个根标签
* 6、标签必须要闭合
* 7、标签首字母
* 1)首字母小写,则直接转为html中找同名元素,若没有该标签对应的同名元素就报错。
* 2)首字母大写,则react会渲染对应的组件,如果组件没有定义,则报错。
*/
</script>
</body>
</html>