Transpiling JSX
这个JavaScript的polyfills是不一样的，polyfill是完全JavaScript-land的，比如解决JavaScript新老版本API兼容的问题，把高版本的API通过polyfill使低版本也能使用。但是当有新的语法引入时，比如新版本JavaScript中出现的class关键字，这个是无法通过polyfill进行兼容的。因此在把要想在browser上面使用这些新语法，必须先对source code进行compilation(transpilation)，通过这种方式我们就可以直接使用很多ES6的新特性。
Client-side
在浏览器中进行transpilation是最简单的实现方式，但是这个会给用户带来性能方面的不利影响，因此对真实用户来说，不推荐使用这种方式，而是推荐在服务器进行编译。但是这种方式对我们日常开发来说却是非常有利的，不需要设置一大堆的编译步骤。
要在Client-side使用JSX，需要做两件事：1) 包含client JSX transpilation script 2) 使用JSX来标记scripts脚本
在老版本的React中，使用的JSX build脚本是JSXTransformer，新版本使用的是babel(v0.14)。两者使用的方式和语法是基本上来说差异不大，babel除了支持JSX之外，还支持最新的JavaScript版本的各种特性到低版本的JavaScript中。
如果没有JSX build脚本的情况下，在浏览器中包含JSX语法会直接报错的。添加build脚本之后，build脚本会查找并transiles代码中tag类型为”text/jsx”的中的script，将其中的语法从JSX变为正常的JavaScript语法，然后把转换后的JavaScript代码auto-insert到document的<head>中。例如下图这样，可以看出，生成的script同时还包含一个对debug非常有帮助的source map(a mapping of before/after the transformation)。
在上面的例子中是直接使用inline scripts，我们同时还可以使用external scripts，原理和用法跟上面的过程是一样的，例如下面：
但external scripts和inline scripts有一点不同的是，这种方式必须保证代码是部署在一个HTTP服务器上面的，因为build脚本需要使用XMLHttpRequest来下载这些external scripts，然后才能进行transform，而XMLHttpRequest的使用是受到浏览器的same-origin规则限制的。
JSX transformation
JSX transform 是非常轻量级和简单的，它甚至保留了错误发生的line number，可以通过这个来回溯JSX中的错误根源。babel官方提供的有一个JSX语法转换器：
https://babeljs.io/repl/，支持在线从JSX语法转换为React的JavaScript方法调用代码。
JavaScript in JSX
当我们在构建UI的时候，我们经常需要用到 variables/conditions/loops，我们不需要再去学习另外一门模板语言来处理这个问题，JSX允许我们在JSX内部使用JavaScript语言。只需要把JavaScript代码包含在一个花括号{}内部即可。这个跟一些模板引擎的处理是类似的，如果你之前学过模板的概念的话，就会非常容易理解这个的，JSX相对于那些很啰嗦的模板引擎而言是非常简单的。
当我们在JSX中使用相连的 {} blocks 时，JSX在处理时会把它们分别放在<span>标签中来区分它们。例如 <th>{1}{2}</th>，最终在DOM中渲染的时候，会变成 <th><span>1</span><span>2</span></th>。
Whitespace in JSX
JSX中的空白跟HTML是类似的，但是又不完全一样。
例子1：
JSX处理之后的样式为：
多个spaces最终会合并为一个，所以最终的渲染结果是“1 plus 2 is 3”
例子2：
JSX处理之后的样式为：
最终的渲染结果是“1plus2is3”
Comments in JSX
参考官方文档的阅读笔记
HTML entities
参考官方文档的阅读笔记
Anti-XSS
参考官方文档的阅读笔记
Spread attributes
参考官方文档的阅读笔记，大部分概念是相同的，里面提到一种很有意思的用法，Parent-to-child spread attributes，即使用parent component的props来给child component传递属性。例如：
Returning multiple nodes in JSX
在component的render()函数中，我们只能返回一个single node的component，对于multiple nodes，我们可以把它wrap到一个component中再返回。比如下面这里返回多个span的问题：
尽管我们在render( ) 函数中不能返回一个nodes array，但是我们是可以在composition的过程中使用arrays的。只要这个array中的nodes有正常的key属性，同时有一种例外不需要设置key属性，我们可以在这个nodes array中插入whitespace或者strings。例如：
JSX vs HTML
关于这部分Facebook官方文档中也有讲到，但是讲的不够全面仔细 ，<React: Up and Running> 这本书倒是讲解地非常全面
No Class,what for?
style is an object
style属性接受的值是object value，不是一个使用 ; 进行分割的string。并且所有CSS properties都是使用驼峰法命名的，不能使用dash-delimited。
