React之JSX

React 推出了一种特殊的js语发，叫做JSX。本质就是允许你在 js 语法环境中使用 HTML 标签直接去书写你的页面。这对于初学者可能有点难以接受，但是在React 中你就可以这麽干。比如，你可以这样子书写你的 js 代码：

var word = "Hello World"
var div = <div>word</div>
这样的代码在一般的 js 环境中是不合法的，但是在React中你可以随心所欲的书写这样的代码，React支持几乎所有的常用标签，由于React 属于传统 MVC 中的 V 也就是视图层，他主要是用来展示数据的，所以在其内部会有相关的 API 去接收外界的数据以及维护自身数据，这些会在随后的文章中进行说明。
JSX语法有些特殊的要求，当然是相对于 HTML 来说：

  首先，你可以写结束标签，也可以不写结束标签，比如

var div = <div>"Hello World"

var div1 = <div>"Hello World"</div>
这两段是等价的，但是建议按照正常的 HTML 语法去书写，防止出现一些难以预料的错误。
其次，当你的标签是嵌套书写的时候，你的最外层只能有一个标签，其实这个也很容易理解。就像你在 HTML 中只能有一个 html 标签一样：

var div = <div>
<span>1</span>
<span>2</span>
</div>
就像是上面这段代码一样，最外层只有一个 div 标签，这个镖旗可能在你的应用中没有意义，但是他在React 中是有用的，这一点是很多新手新React 应用时报错但是找不到错误的原因。
下面介绍一下标签属性

   class：class 这个属性的书写方式跟HTML 中的区别不大，你完全可以按照你以前的习惯去添加，比如：

var div = <div class="div"></div>
这里要说一下，id这个属性在React中尽量不使用，这是因为在React中，有属性可以对这个属性进行替代。并且由于虚拟DOM 的存在，你创建的每个标签都是用唯一的标识符去标记的，所以 id 这里的行为就和我们熟悉的 HTML 是不同的，这一点需要注意。
src 和 href ：这两个的用法与 HTML 中的一致。

       这里要说明一下，所有的属性值都是可以以表达式的形式去添加的，不过要按照React 规定的大括号语法去添加：

var aa = "asdads"

var div = <div class = {aa}>{aa}</div>
这里解释一下原因，因为所有标签是被编译成对象去处理的，而属性是被处理成对象的形式去添加的，当 React 读到大括号时，会去读取大括号里面表达式的值，将其当做这个属性的值赋给当前的对象。
Style：这个是属性的添加方式与 HTML 中区别比较大，它需要接受一个对象作为值：

var obj = {color:"red"}

var div = <div style={obj}>aaa</div>
就像上面这样子，这样子使合法的添加方式，传入时格式就是一般的 json