Transpiling JSX

Client-side

JSX transformation

java script in JSX

Whitespace in JSX

JSX中的空白跟HTML是类似的，但是又不完全一样。
例子1：
JSX处理之后的样式为：
多个spaces最终会合并为一个，所以最终的渲染结果是“1 plus 2 is 3”

例子2：
JSX处理之后的样式为：
最终的渲染结果是“1plus2is3”
在标签内使用whitespace跟HTML是类似的，有一种解决方式是，在JSX中通过插入java script表达式的方式来添加空格。例如下面两种方式均可：

Comments in JSX

HTML entities

Anti-XSS

Spread attributes

参考官方文档的阅读笔记，大部分概念是相同的，里面提到一种很有意思的用法，Parent-to-child spread attributes，即使用parent component的props来给child component传递属性。例如：
可以直接用这些props传递给a标签做属性：

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。例如：

还有一种比较类似的用法，从parent component中接收任意数量的children component，然后把他们在render() 函数中进行渲染，例如：

JSX vs HTML

关于这部分Facebook官方文档中也有讲到，但是讲的不够全面仔细 ， 这本书倒是讲解地非常全面

No Class, what for?

不能使用 class 和 for 作为属性名称，他们是ECMAScript的保留关键字，需要使用 className 和 htmlFor来代替。

style is an object

style属性接受的值是object value，不是一个使用 ; 进行分割的string。并且所有 CSS properties都是使用驼峰法命名的，不能使用dash-delimited。

Closing tags

在HTML中有一些标签是不需要闭合的，但是在JSX中它们则要求必须闭合，例如
等

camelCase attributes

在JSX中，所有的属性名称都必须是使用驼峰法命名的。比如：

?