jsx语法规则

1. 标签中混入js表达式要用{}，即jsx中{}里写的都是js“表达式”，区分表达式和代码

表达式是能够被变量接受的，是有值的
即任何表达式都能将值赋值给一个变量
for example：
	1, '2', arr.map(), 1&&6

2. 样式的类名不要用class，要用className
3. 内联样式，不是以类json字符串的形式写，而是以js中的对象形式写，即

style={{key:value}}
最外层大括号表示里面是js表达式，内层大括号表示是一个对象

4. 标签必须闭合

<Hello></Hello>
<Hello/>

5. 标签首字母
   5.1. 若小写字母开头，则认为该标签是html中的标签
   5.2. 若大写字母开头，则认为该标签是react中定义的组件
6. 布尔类型、Null 以及 Undefined 将会忽略

以下jsx表达式渲染结果相同

<div />

<div></div>

<div>{false}</div>

<div>{null}</div>

<div>{undefined}</div>

<div>{true}</div>

故可用于条件渲染

<div>
  {props.messages.length &&
    <MessageList messages={props.messages} />
  }
</div>

如果props.messages.length === 0，渲染为<div>0</div>
否则，渲染MesaageList组件

解释：
1. 在js中&&的含义是，res = a && b，a，b先隐式类型转换为Bool，
   如果a为true（隐式类型转换后），res值为b，反之，res为a
2. Number类型仅当值为0时，隐式转换为Bool类型为false
3. 故当length !== 0时，表达式值为MessageList组件，当length === 0时，表达式值为0

对比
<div>
  {props.messages.length > 0 &&
    <MessageList messages={props.messages} />
  }
</div>

the former是一个布尔值，故当length === 0时，表达式值为false
如上所说，jsx不会渲染false，故能够实现条件渲染