1、JSX简介

  全称: JavaScript XML，是一个JavaScript的语法扩展。

2、JSX的作用

  用来简化创建虚拟DOM

   写法：var ele =

Hello JSX!

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

3、jsx语法规则

1. 定义虚拟DOM时，不要写引号。
2. 标签中混入JS表达式时，要用{ }{myData}
3. 样式的类名指定不要用class，要用className(避开es6中的class类)。className="title"
4. 内联样式要用{{style:value}}的形式，在css中带有-的属性，取消-转换为小驼峰。style={{color: "red", fontSize: "30px"}}
5. 虚拟DOM只有一个根标签
6. 标签必须闭合
7. 标签首字符
     （1）若小写字母开头，则将该标签转为html中同名元素，躲在html中无该标签的同名元素，则报错；
     （2）若大写字母开头，react就去渲染对应的组件，多组件没有定义，则报错。
8. 标签中的注释要写在 {} 中；
9. 当变量是 Number、String 类型时，可以直接显示；
10. 当变量是 Number、String 类型时，可以直接显示；
11. 对象类型不能作为子元素（not valid as a React child）
12. 数组会自动展开；

代码示例：

    
    
    
    
    

















1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

运行结果：

4、babel.js的作用

1. 浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
2. 只要用了JSX，都要加上type=“text/babel”, 声明需要babel来处理

5、jsx的练习

注意：1、js表达式和js语句的区别；2、只能循环数组；3、循环绑定key，key需要唯一（绑定下标有一定的问题，后面会逐步学习解决）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38