JSX语法规则：
1、定义虚拟DOM时，不要用引号括起来。
image.png
这个VDOM的值并不是一个字符串，所以不能用引号括起来。

2、标签中如果混入了JS表达式，需要使用大括号括起来，否则React不会把它认为是JS语句。
image.png
通过大括号，将上面定义的两个常量的值赋值给id和内容。

3、样式的类名指定不要用class，要用className。
如果在定义class属性是，使用class：
image.png
在浏览器中查看：
image.png
存在报错，提示是不是想使用className，把class改为ClassName：
image.png
浏览器中不再报错：
image.png

4、内联样式中，要使用style={}的形式：
image.png
浏览器中查看：
image.png
外层的大括号表示里面是JS代码，而内层的大括号表示是一个对象。

5、虚拟DOM必须只有一个根标签：
image.png
如果有并列的两个标签，代码会报错。
可以在最外层包一个标签，让虚拟DOM只有一个根标签：
image.png
浏览器查看：
image.png

6、标签首字母：
a、若为小写字母开头，则将该标签转换为同名的html元素，若html中无同名元素，则报错。
b、若大写字母开头，则解析为组件。

Q.E.D.