## 1.jsx的特点
> JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
> 它是类型安全的，在编译过程中就能发现错误。
> 使用 JSX 编写模板更加简单快速。
```
`const element = <h1>Hello, world!</h1>;`
```
这种看起来可能有些奇怪的标签语法既不是字符串也不是 HTML。
它被称为 JSX， 一种 JavaScript 的语法扩展。 我们推荐在 React 中使用 JSX 来描述用户界面。
包括像在jsx中嵌套很多元素也是允许的，如下
```
const element = (
<div>
<h1>Hello!</h1>
<h2>Good to see you here.</h2>
</div>
);
```
Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用。
以下两种示例代码完全等效：
```
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);
```
React.createElement() 会预先执行一些检查，以帮助你编写无错代码，但实际上它创建了一个这样的对象：
```
// 注意：这是简化过的结构
const element = {
type: 'h1',
props: {
className: 'greeting',
children: 'Hello, world!'
}
};
```
说白了，jsx其实就是允许用户在js中能够像编写普通html那样，而不需要去拼接一大堆字符串
那既然我们在js中可以正常编写html，那么如果有变量的话怎么办，我们可以在 JSX 中使用 JavaScript 表达式。表达式写在花括号 {} 中。实例如下
```
ReactDOM.render(
<div>
<h1>{1+1}</h1>
</div>
,
document.getElementById('example')
);
```
也就是大括号提供了一个js执行环境，可以写任意的js表达式，但是不能写语句
元素的属性等如果要用变量表示也是通过话括号表示如下
```
var myStyle = {
fontSize: 100,
color: '#FF0000'
};
ReactDOM.render(
<h1 style = {myStyle}>react</h1>,
document.getElementById('example')
);
```
特殊的，class在jsx中要写为className，因为class在js中会识别为类
易错点：样式接受一个样式对象，但是前提是需要花括号提供js环境
```
//错误
ReactDOM.render(
<h1 style = {fontSize:12}>react</h1>,
document.getElementById('example')
);
```
```
//正确：
ReactDOM.render(
<h1 style = {{fontSize:12}}>react</h1>,
document.getElementById('example')
);
```
样式中不能使用横线连接，要使用驼峰式命名，数字的单位可以省略， React 会在指定元素数字后自动添加 px
特殊的，jsx中可以直接插入数组，
```
var arr = [
<h1>react</h1>,
<h2>学习react</h2>,
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById('example')
);
```
关于注释，标签之中的注释要写在花括号中，标签之外的注释正常编写就可以，如下
```
ReactDOM.render(
/*注释 */
<h1>张三 {/*注释*/}</h1>,
document.getElementById('example')
);
```
