React 是 Facebook 里一群牛 X 的码农折腾出的牛X的框架。 实现了一个虚拟 DOM，用 DOM 的方式将需要的组件秒加，用不着的秒删。React 扮演着 MVC 结构中 V 的角色， 不过你要是 Flux 搭配使用， 你就有一个很牛X的能让轻松让 M 和 V 同步的框架了，Flux 的事以后再说~
组件们
在 React 中，你可以创建一个有特殊功能的组件，这在 HTML 元素里你是打着灯笼也找不到的，比如这个教程里的下拉导航。每个组件都有自己的地盘(scope)，所以我们定义一个组件后可以反复的用反复的用，根本就不需要和别的组件交互！
每个组件都有一个功能叫 render ， 它可以高效的返回要射到浏览器上 HTML。我们也可以调用 React 的其他组件，这意味这一入 React 深似海，哦，不对，是只有想不到，没有做不到。
JSX
如果你经常注意React你也许会发现有个东西叫JSX。JSX允许我们在Javascript中写HTML，而不是用HTML包含Javascript。它能帮助我们快速开发，因为我们不用担心字符串和换行等。你可以在浏览器中运行JSX，但是不推荐，因为这样会减慢你的页面速度。gulp和grunt为你的预处理任务提供了一个JSX解释器，所以如果你想使用JSX，我建议开启这个功能。
使用 JSX
如前面所说，JSX每一个组件都有一个 render 方法，这个方法产生一个"ViewModel(视图模型)" - 在返回HTML到组件之前，你可以将这个模型(ViewModel)的信息放入视图中，意味着你的HTML会根据这个模型动态改变(例如一个动态列表)。
一旦你完成了操作，就可以返回你想渲染(render)的东西，我们使用JSX来做是如此简单
var ExampleComponent = React.createClass({ render: function () { return ( <div className="navigation"> Hello World! </div> ); } });
如果你要在你的浏览器中运行这段代码，只会得到语法错误的提示，因为在Javascript中<和>字符要用引号包含起来。当你在代码上运行JSX解释器，它将被转换成这样
var ExampleComponent = React.createClass({ render: function () { return ( React.createElement('div', {className: 'navigation'}, 'Hello World!') ); } });
可以点此测试示例 - 我使用的是浏览器JSX解释器（这并不推荐，但是为了JSFiddle）。
运行了！JSX解释了你使用 React.createElement 生成的所有DOM节点，生成了节点类型、参数和内容。你可以不用JSX，但这意味着你必须要手动写 React.createElement 以外的所有DOM节点。无数例子告诉我要使用JSX。
你一定很疑惑我为什么在DOM上使用 className 来代替 class。这是因为 class 是Javascript的保留词。当JSX解释你的代码时就会改变这节点上的所有属性到一个对象上，但你不能把对象当作属性！
将变量用在属性上
如果你想动态改变组件的样式类(或者任何其他的属性值),你可以使用变量. 不过你不能只是传进去一个变量名称，你还要将其用一对大括弧包起来, 这样JSX就能知道这是一个外部的变量了.
var ExampleComponent = React.createClass({ render: function () { var navigationClass = 'navigation'; return ( <div className=https://www.jb51.net/article/{ navigationClass }> Hello World! </div> ); } });
你可以在这儿看到这个功能.
初始的渲染器
当你最开始要渲染一个React组件时，你需要告诉React是要渲染什么组件，还要制定一个现有的DOM节点以表示在哪儿渲染这个组件. 为此你会要使用React.render函数.
var ExampleComponent = React.createClass({ render: function () { return ( <div className="navigation"> Hello World! </div> ); } }); React.render(<ExampleContent />, document.body);
他将会在body节点上渲染组件——简单吧! 从此你就可以像通常那样调用其他的组件了, 或者如果你希望的话，可以使用render函数许多次, 如果你不想使用React来渲染整个页面，但仍然想要使用多个组件.
一个组件的基础
组件可以拥有其自己的“状态”。这使我们能够重复多次使用相同的组件但却让它们看起来完全不同，因为每个组件实例的状态是唯一的。
当你通过传递属性到一个组件时这些被称为属性。不要只局限于 HTML 属性，你可以传递任何你想传递的东西，并在组件内通过 this.props 访问它。这样使得我们能够重复使用相同的组件但传递一组不同的属性，比如组件的“配置”。
属性