Why React?

React是Facebook和Instagram用来构建user interface的JavaScript Library，它要解决的核心问题： building large applications with data that changes over time.

Reactive Updates

React use a fast, internal mock DOM to perform diffs and computes the most efficient DOM mutation for you.

当你去更改数据的时候，React并不会去直接操作DOM，而只是去操作React提供虚拟DOM，然后React会去diff虚拟DOM和真实DOM的差别，帮你找出一个最高效的DOM改变来进行更改和渲染。这个算法叫Dom diff， http://calendar.perfplanet.com/2013/diff/。

Components are Just Like Functions

你可以简单认为React Components是就是函数，这个函数接收 props 和 state 属性，然后渲染出来HTML。记住这个概念的话，components就非常容易理解了。但是有一点需要注意的是，React components 只能渲染一个单根节点，如果需要渲染多个节点的话，就必须把这些节点包装到一个single root之中。

JSX Syntax

From: https://facebook.github.io/react/docs/displaying-data.html，下面是我从这个章节中摘抄出来的，感觉比较有含义的关于JSX和React的描述，翻译的话，效果估计不会特别好，直接摘抄好了。

We strongly believe that components are the right way to separate concerns rather than “templates” and “display logic”.We think that markup and the code that generates it are intimately tied together. Additionally, display logic is often very complex and using template languages to express it becomes cumbersome.

We’ve found that the best solution for this problem is to generate HTML and component trees directly from the JavaScript code such that you can use all of the expressive power of a real programming language to build UIs.

JSX lets you create JavaScript objects using HTML syntax. But JSX is not required to use React. 从前面这段话可以看出来，JSX让我们可以通过HTML的语法来创建JavaScript对象，并且JSX实际上和React几乎是没有依赖关系的。所以，在不是用JSX语法的情况下，我们也能正常使用React，只是把HTML语法换成了使用React的函数调用而已。例如下面的JSX语法实现的功能：

完全可以使用纯粹的JavaScript语法来替换：

或者使用React已经内置实现的Factory方法替换：

从上面的例子可以看出来，JSX在React的使用中不是必须的，但是使用JSX会让代码变得清晰简洁。

JSX in Depth

JSX is a concise and familiar syntax for defining tree structures with attributes. And it doesn’t alter the semantics of JavaScript.

需要注意的是，由于JSX也是JavaScript，所以类似class 和for不能用来做XML的属性名称。对应地，在ReactDOM会使用className和htmlFor来代替。

React 最终会把 JSX 语法从类似XML的语法转换为原生的JavaScript语法。XML elements，attributes和children这些都会被转换为传递给React.createElement函数的参数。

Namespaced Components：当我们开发的某个component有很多的 sub-components 的时候，可以把这些sub-components变成main component的属性来减少一大堆的变量声明。例如：

使用Namespaced Components之后：

JavaScript Expressions

我们可以使用JavaScript expression的运算结果来作为一个属性的value，通过把这个JavaScript expression包含在一个花括号({...})来实现。例如：

Boolean Attributes：如果漏掉一个属性的值的话，JSX会认为这个值的value是true。如果要设置为false，则必须作为一个JavaScript Expression来传递。当我们使用HTML的表格元素属性时，例如disabled/required/readOnly/checked，这个会经常用到。

Child Expressions：JavaScript Expression的结果甚至可以用来表示children元素，例如：

Comments：在JSX中添加注释是相对来说比较简单的。

JSX Spread Attributes

在JavaScript ES6语法中，引入了一个新的操作符spread operator，使用 … 表示，用于展开一个array。

根据官方的建议，我们不能去更改一个component的props的值，它应该是immutable的，否则可能会导致一些奇怪不可知的问题。所以JSX利用ES6的spread operator实现了spread attributes特性，可以把一个JavaScript Array中的属性copy到一个component的props中去，回避component的props不应该被修改的特性。例如：

进一步，我们可以同时在一个Component中，使用多个spread attribute或者与其他属性，这些spread attribute或者属性的顺序是重要的，后面的属性会覆盖前面的属性，例如：

JSX Gotchas

JSX看起来跟HTML非常相似，但是他们之间的有一些非常重要的区别还是要明确的。

HTML Entities

在JSX中可以直接在标签的literal text中插入HTML entity，例如<div>First · Second</div>。但是如果是动态内容展示HTML entity的话，就会出现double escaping的问题，因为React为了防止XSS攻击默认会把所有的字符串都escape。例如下面的问题：

解决这个问题方式有很多，最简单的方式不书写HTML entity，而是在JavaScript中直接写入unicode字符，例如 <div>{‘First · Second’}</div>，这个就就可以正常显示了。这种方式还有两种变化方式，可以通过查询到entity对应的unicode number来实现，例如：