React基础教程(三)：JSX语法

React基础教程(三)：JSX语法

1、JSX简介

1. 全称：JavaScript XML
2. react定义的一种类似于XML的JS扩展语法：JS+XML
3. 本质是React.createElement(component, props, ...children)方法的语法糖
4. 作用：用来简化创建虚拟DOM（注意：它不是字符串，也不是HTML/XML标签；它最终产生的就是一个JS对象）
5. 标签名任意：HTML标签或其他标签

2、JSX语法规则

1. 定义虚拟DOM的时候不要写引号
2. 标签中混入JS表达式时要用{}
3. 样式的类名指定不要用class，要用className
4. 内联样式，要用style={ {key:value}}的形式去写
5. 虚拟DOM必须只有一个根标签
6. 标签必须闭合
7. 标签首字母：①若小写字母开头，则将改标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。②若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。

代码