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来做是如此简单

varExampleComponent=React.createClass({
render:function(){
return(
<divclassName="navigation"> HelloWorld! </div>
);
}
});

如果你要在你的浏览器中运行这段代码，只会得到语法错误的提示，因为在Javascript中<和>字符要用引号包含起来。当你在代码上运行JSX解释器，它将被转换成这样

varExampleComponent=React.createClass({
render:function(){
return(
React.createElement('div',{className:'navigation'},'HelloWorld!')
);
}
});

可以点此测试示例- 我使用的是浏览器JSX解释器（这并不推荐，但是为了JSFiddle）。

运行了！JSX解释了你使用 React.createElement 生成的所有DOM节点，生成了节点类型、参数和内容。你可以不用JSX，但这意味着你必须要手动写 React.createElement 以外的所有DOM节点。无数例子告诉我要使用JSX。

你一定很疑惑我为什么在DOM上使用 className 来代替 class。这是因为 class 是Javascript的保留词。当JSX解释你的代码时就会改变这节点上的所有属性到一个对象上，但你不能把对象当作属性！

将变量用在属性上

如果你想动态改变组件的样式类(或者任何其他的属性值),你可以使用变量. 不过你不能只是传进去一个变量名称，你还要将其用一对大括弧包起来,这样JSX就能知道这是一个外部的变量了.

varExampleComponent=React.createClass({
render:function(){
varnavigationClass='navigation';
return(
<divclassName={navigationClass}> HelloWorld! </div>
);
}
});

你可以在这儿看到这个功能.

初始的渲染器

当你最开始要渲染一个React组件时，你需要告诉React是要渲染什么组件，还要制定一个现有的DOM节点以表示在哪儿渲染这个组件. 为此你会要使用React.render函数.

varExampleComponent=React.createClass({
render:function(){
return(
<divclassName="navigation"> HelloWorld! </div>
);
}
});
React.render(<ExampleContent/>,document.body);

他将会在body节点上渲染组件——简单吧! 从此你就可以像通常那样调用其他的组件了,或者如果你希望的话，可以使用render函数许多次,如果你不想使用React来渲染整个页面，但仍然想要使用多个组件.

一个组件的基础

组件可以拥有其自己的“状态”。这使我们能够重复多次使用相同的组件但却让它们看起来完全不同，因为每个组件实例的状态是唯一的。

当你通过传递属性到一个组件时这些被称为属性。不要只局限于 HTML 属性，你可以传递任何你想传递的东西，并在组件内通过 this.props 访问它。这样使得我们能够重复使用相同的组件但传递一组不同的属性，比如组件的“配置”。

属性

根据我们前面“Hello World!”的例子，我们在 HTML 节点上有 className 的属性。在组件内部，我们可以使用 this.props.classname 访问这个值，但正如前面所述，你可以传递任何你喜欢的内容。对我们的下拉来说，我们需要将导航配置为对象，组件将使用它作为要渲染的配置。让我们开始吧—

varnavigationConfig=[];

varNavigation=React.createClass({
render:function(){
return(
<divclassName="navigation">  </div>
);
}
});

React.render(<Navigationconfig={navigationConfig}/>,document.body);

如果现在能访问 this.props.config 的话，我们会受到一个空数组（navigationConfig 的值）。在我们进入到真正导航的编码前先让我们说明一下状态。

状态

如之前所讨论的，每一个组件都有其自己的”状态”。当要使用状态时，你要定义初始状态，让后才可以使用 this.setState 来更新状态。无论何时状态得到了更新，组件都会再一次调用 render 函数，拿新的值去替换或者改变之前渲染的值。这就是虚拟 DOM 的奥义 - 计算差异的算法实在 React 内部完成的，因此我们不用去以来 DOM 的更新了(因为 DOM 很慢)。React 会计算出差异并产生一堆指令的集合 (例如，加入向”navigation__link“加入”active“类，或者移除一个节点），并在 DOM 上执行它们。

使用导航，我们将下拉菜单打开保持在状态中。为此，添加一个 getInitialState 函数到类配置对象上，并返回带有我们想要的初始状态的对象。

varnavigationConfig=[];

varNavigation=React.createClass({
getInitialState:function(){
return{
openDropdown:-1
};
},render:function(){
return(
<divclassName="navigation">  </div>
);
}
});

React.render(<Navigationconfig={navigationConfig}/>,document.body);

你会发现我们将其设置成了-1。当我们准备去打开一个下拉菜单时，将使用状态里面的配置数组中的导航项的位置，而由于数组索引开始于0，我们就得使用 -1 来表示还没有指向一个导航项。

我们可以使用 this.state 来访问状态，因此如果我们去观察 atthis.state.openDropdown，应该会有 -1 被返回。

组件的生命周期

每个组件都有其“生命周期”—这是一系列你可以在组件配置里定义的函数，它们将在部件生命周期内被调用。我们已经看过了 getinitialstate 一它只被调用一次，在组件被挂载时调用。

componentWillMount

当组件要被挂载时这个函数被调用。这意味着我们可以在此运行组件功能必须的代码。为由于 render 在组件生命周期里被多次调用，我们一般会把只需要执行一次的代码放在这里，比如 XHR 请求。

varExampleComponent=React.createClass({
componentWillMount:function(){
//xhrrequestheretogetdata
},render:function(){
//thisgetscalledmanytimesinacomponentslife
return(
<div> HelloWorld! </div>
);
}
});

componentDidMount

一旦你的组件已经运行了 render 函数，并实际将组件渲染到了 DOM 中，componentDidMount 就会被调用。我们可以在这儿做任何需要做的 DOM 操作，已经任何需要依赖于组件已经实际存在于 DOM 之后才能做的事情,例如渲染一个图表。你可以通过调用 this.getDOMNode 在内部访问到 DOM 节点。

varExampleComponent=React.createClass({
componentDidMount:function(){
varnode=this.getDOMNode();
//renderachartontheDOMnode
},render:function(){
return(
<div> HelloWorld! </div>
);
}
});

componentWillUnmount

如果你准备吧组件从 DOM 移除时，这个函数将会被调用。这让我们可以在组件背后进行清理，比如移除任何我们已经绑定的事件监听器。如果我们没有在自身背后做清理，而当其中一个事件被触发时，就会尝试去计算一个没有载入的组件，React 就会抛出一个错误。

varExampleComponent=React.createClass({
componentWillUnmount:function(){
//unbindanyeventlisteneRSSpecifictothiscomponent
},render:function(){
return(
<div> HelloWorld! </div>
);
}
});

组件方法

React 也为组件提供了更方便我们工作的方法。它们会在组件的创建过程中被调用到。例如getInitialState，能让我们定义一个默认的状态，这样我们不用担心在代码里面对状态项目是否存在做进一步的检查了。

getDefaultProps

当我们创建组件时，可以按照我们的想法为组件的属性定义默认值。这意味着我们在调用组件时，如果给这些属性设置值，组件会有一个默认的“配置”，而我们就不用操心在下一行代码中检查属性这类事情了。

当你定义了组件时，这些默认的属性会被缓存起来，因而针对每个组件的实例它们都是一样的，并且不能被改变。对于导航组件，我们将配置指定为一个空的数组，因而就算没有传入配置，render 方法内也不会发生错误。

varNavigation=React.createClass({
getInitialState:function(){
return{
openDropdown:-1
};
},getDefaultProps:function(){
return{
config:[]
}
},document.body);