概述
- 全称: JavaScript XML
- React定义的一种类似于XML的JS扩展语法: JS + XML本质是React.createElement(component, props, ...children)方法的语法糖
- 作用: 用来简化创建虚拟DOM
- 写法：var ele =
Hello JSX!
- 注意1：它不是字符串, 也不是HTML/XML标签
- 注意2：它最终产生的就是一个JS对象
- 写法：var ele =
- 标签名任意: 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语句
- 表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方，下面这些都是表达式：
```typescript
a
a+b
demo(1) // 函数调用表达式
arr.map()
function test () {}
2.语句(代码)，下面这些都是语句(代码)：【控制语句，控制代码走向，而不是产生值】
```typescript
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>
