一、JSX
- 全称: JavaScript XML
- react定义的一种类似于XML的JS扩展语法: JS XML本质是React.createElement(component, props, ...children)方法的语法糖
- 作用: 用来简化创建虚拟DOM
1) 写法：var ele = <h1>Hello JSX!</h1>
2) 注意1：它不是字符串, 也不是HTML/XML标签
3) 注意2：它最终产生的就是一个JS对象
4. 标签名任意: HTML标签或其它标签
5. 标签属性任意: HTML标签属性或其它
6. 基本语法规则
1) 遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
2) 遇到以 { 开头的代码，以JS语法解析: 标签中的js表达式必须用{ }包含
7. babel.js的作用
1) 浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
2) 只要用了JSX，都要加上type="text/babel", 声明需要babel来处理
二、渲染虚拟DOM(元素)
- 语法: ReactDOM.render(virtualDOM, containerDOM)
- 作用: 将虚拟DOM元素渲染到页面中的真实容器DOM中显示
- 参数说明
1) 参数一: 纯js或jsx创建的虚拟dom对象
2) 参数二: 用来包含虚拟DOM元素的真实dom元素对象(一般是一个div)
三、JSX练习
代码（本例子是直接引入react文件实现的）：
代码语言：javascript复制 1 <script type="text/babel" >
2 /*
3 一定注意区分：【js语句(代码)】与【js表达式】
4 1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
5 下面这些都是表达式：
6 (1). a
7 (2). a b
8 (3). demo(1)
9 (4). arr.map()
10 (5). function test () {}
11 2.语句(代码)：
12 下面这些都是语句(代码)：
13 (1).if(){}
14 (2).for(){}
15 (3).switch(){case:xxxx}
16 */
17 //模拟一些数据
18 const data = ['Angular','React','Vue']
19 //1.创建虚拟DOM
20 const VDOM = (
21 <div>
22 <h1>前端js框架列表</h1>
23 <ul>
24 {
25 data.map((item,index)=>{
26 return <li key={index}>{item}</li>
27 })
28 }
29 </ul>
30 </div>
31 )
32 //2.渲染虚拟DOM到页面
33 ReactDOM.render(VDOM,document.getElementById('test'))
34 </script>效果：
