---
title: 02-JSX语法介绍
publish: true
---
## JSX介绍
### JSX的引入
如果直接让用户通过 JS 代码手动创建DOM元素，肯定是非常麻烦的。
于是，React 官方就提出了一套 JSX 语法规范，能够让我们在 JS 文件中，书写类似于 HTML 那样的代码，快速定义虚拟DOM结构。
### JSX的全称
JSX：JavaScript XML，一种类似于XML的JS扩展语法。也可以理解成：符合 XML 规范的 JS 语法。
需要注意的是，哪怕你在 JS 中写的是 JSX 语法（即JSX这样的标签），但是，JSX内部在运行的时候，并不是直接把 我们的 HTML 标签渲染到页面上；而是先把 类似于HTML 这样的标签代码，转换成 React.createElement 这样的JS代码，再渲染到页面中。
从这一点我们可以看出，JSX是一个对程序员友好的语法糖。
**JSX语法的本质**：以 React.createElement 的形式来实现的，并没有直接把 用户写的 HTML代码，渲染到页面上。
### babel转换工具
如果要直接使用 JSX 语法，需要先安装相关的 语法转换工具：
```
运行 cnpm i babel-preset-react -D
```
这个babel包的作用是：将 JSX语法 转换为 JS语法。
安装完成后，就可以开始使用JSX语法了。
完整代码举例：
```html
Document
```
## JSX的基本语法
（1）在 JSX内部 写 JS代码：如果要在 JSX 语法内部，书写 JS 代码，那么，所有的JS代码必须写到 `{}` 的内部。在{}内部，可以写任何符合JS规范的代码。
例如：
```javascript
var myTitle = '这是使用变量定义的 tilte 值'
// 使用JSX语法 创建虚拟DOM对象
var vDom = (
Hello, React!
这是标题
);
```
（2）当编译引擎在编译JSX代码的时候，如果遇到了`<`，会把它当作 HTML代码 去编译；如果遇到了 `{}`， 会把方括号里面的代码当作 普通JS代码 去编译。
（3）在JSX中，如果要为元素添加`class`属性，则必须写成`className`，因为 `class`在ES6中是一个关键字；和`class`类似，label标签的 `for` 属性需要替换为 `htmlFor`。
代码举例：
```html
// 使用JSX语法 创建虚拟DOM对象
var vDom = (
);
```
（4）在JSX创建DOM的时候，所有的节点，必须有唯一的根元素进行包裹。
（5）如果要写注释，注释必须放到 {} 内部。例如：
```javascript
// 使用JSX语法 创建虚拟DOM对象
var vDom = (
// 这一行是注释
Hello, React!
千古壹号
{/*这一行也是注释 */}