jsx语法规则简记

1、什么是JSX

JSX是JavaScript和XML（HTML）的缩写，表示在JS代码中编写HTML模板结构，它是React中编写UI模板的方式。

优势

1. HTML的声明式模板写法
2. JS的可编程能力

JSX的本质

JSX并不是标准的JS语法，是JS的语法扩展，浏览器本身并不能识别，需要通过解析工具（babel）做解析之后才能在浏览器中运行。

2、jsx语法规则

1. 定义虚拟DOM时不要写引号

2. 标签中混入JS语法时要使用{}

3. 样式的类名指定不要用class，要用className

4. 内联样式，要用style={{key:value}}的形式去写

5. 虚拟DOM只有一个根标签

6. 标签必须闭合

7. 标签首字符

8. 若小写字母开头，则将该标签转为html，若html中无该标签对应的同名元素，则报错

9. 若大写字母开头，react就去渲染对应的组件，若组件没有定义则报错

一定注意区分：【js语句（代码）】与【js表达式】

1. 表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
2. 下面这些都是表达式：
   1. a
   2. a + b
   3. demo(1)
   4. arr.map()
   5. function test(){ }
3. 语句（代码）：
   1. if(){}
   2. for(){}
   3. switch(){case:xxxx}