这篇文章将概括性的介绍一下如何用 ReactJS 进行开发。我将介绍一些基础知识，不会有过于深入的分析。你可以结合这些代码阅读本文。
一些概念
React 的 API 非常少，简单易懂易用。在正式开始之前先介绍几个概念，一个一个来。
React 元素 是表现为 HTML 元素的 JavaScript 对象，他们并不真实存在于浏览器中。他们最终表现为类似h1,div 或 section 之类的浏览器元素。
JSX 是一种创建 React 元素和 components 的技术。例如 <h1>Hello</h1> 是一个用 JSX 写的 React 元素。同样可以用纯 JavaScript 写成 React.DOM.h1(null,'Hello');。JSX 读写起来更轻松，最终上线之前必须将 JSX 语句转为 JavaScript 语句。
虚拟DOM 是由 React 元素和 components 组成的 JavaScript 树形结构对象。React 将虚拟 DOM 渲染到浏览器中变成最终的用户界面。React 会观察虚拟 DOM 的变化，并自动将这些变化渲染到浏览器端。
理解了上面这些概念，我们可以开始使用 React 写一些例子了。下面会开发一系列功能，每一个例子都是在前一个例子的基础上进行改进。我们会编写一个类似 instagram 的照片流程序 - 没有比这更好的示例程序了。
渲染
第一步是渲染虚拟元素（React 元素或 component）。注意，虚拟元素只存在于内存中，必须显式地告诉 React 将它渲染到浏览器上。
React.render(<img src='http://tinyurl.com/lkevsb9' />,document.body)
render 函数接收两个参数：虚拟元素和真实的浏览器 DOM 元素。React 将虚拟元素插入到指定的 DOM 元素中。上例中可以看到图片被渲染出来了。
组件(Components)
组件是 React 的精髓所在。它们是自定义的 React 元素，通常有一些功能和结构定义。
var Photo = React.createClass({
render: function() {
return <img src='http://tinyurl.com/lkevsb9' />
}
});
React.render(<Photo />,document.body);
createClass 函数接收一个对象，这个对象实现了 render 方法。
这个Photo组件定义了 <Photo />元素，并且渲染到 document.body 里。
这个组件跟之前的渲染图片没有太大区别，但是它为将来添加自定义功能奠定了基础。
属性(Props)
可以把属性看做组件的配置参数，看起来非常像 HTML 属性。
var Photo = React.createClass({
render: function() {
return (
<div className='photo'>
<img src={this.props.imageURL} />
<span>{this.props.caption}</span>
</div>
);
}
});
React.render(<Photo imageURL='http://tinyurl.com/lkevsb9' caption='Hong Kong!' />,document.body);
imageURL 和 caption 两个属性被传递到 Photo 组件内的 render 函数里。
imageURL 被用在 React 图片元素的 src 属性，caption 被用作 React span 元素内的文本。
组件不会改变它的属性，他们是静止不变的。如果组件里包含动态数据，就要用到状态(State)对象。
状态(State)
状态对象用来记录随时可能变化的数据。
var Photo = React.createClass({
toggleLiked: function() {
this.setState({
liked: !this.state.liked
});
},getInitialState: function() {
return {
liked: false
};
},render: function() {
var buttonClass = this.state.liked ? 'active' : '';
return (
<div className='photo'>
<img src={this.props.src} />
<div className='bar'>
<button onClick={this.toggoleLiked} className={buttonClass}>
♥
</button>
<span>{this.props.caption}</span>
</div>
</div>
);
}
});
React.render(<Photo src='http://tinyurl.com/lkevsb9' caption='Hong Kong!') />,document.body);
组件的状态给组件引入了一些复杂性。
这个组件有一个新的函数 getInitialState。 当组件初始化时 React 会去调用这个函数。根据它返回的对象来设置组件的初始状态（正如函数名所表达的那样）。
这个组件还有另一个新函数 toggleLiked。它调用了 setState 来切换 liked 的值。
在 render 函数里有个 buttonClass 的变量，根据 liked 状态被标记为 'active' 或 空值。
buttonClass 被用作 React button 元素的类名。这个按钮还将 toggleLiked 函数绑定到 onClick 事件上。
看看在浏览器中渲染出来是什么效果：
当组件里的按钮被点击时，触发
toggleLiked函数liked状态被改变React 重新渲染虚拟 DOM
新老虚拟 DOM 进行对比
React 识别出变化的部分并渲染到浏览器
上例演示了点击按钮来改变类名
组合组件(Composition)
将一些小的组件(components)链接起来形成一个大的组合组件。例如 Photo 组件可以用在 PhotoGallery 组件中，如下：
var Photo = React.createClass({
toggleLiked: function() {
this.setState({
liked: !this.state.liked
});
},render: function() {
var buttonClass = this.state.liked ? 'active' : '';
return (
<div className='photo'>
<img src={this.props.src} />
<div className='bar'>
<button onClick={this.toggleLiked} className={buttonClass}>
♥
</button>
<span>{this.props.caption}</span>
</div>
</div>
);
}
});
var PhotoGallery = React.createClass({
render: function() {
var photos = this.props.photos.map(function(photo) {
return <Photo src={photo.url} caption={photo.caption} />
});
return (
<div className='photo-gallery'>
{photos}
</div>
);
}
});
var data = [
{
url: 'http://tinyurl.com/lkevsb9',caption: 'Hong Kong!'
},{
url: 'http://tinyurl.com/mxkwh56',caption: 'Cows'
},{
url: 'http://tinyurl.com/nc7jv28',caption: 'Scooters'
}
];
React.render(<PhotoGallery photos={data} />,document.body);
Photo 组件跟之前的没什么两样。新组件 PhotoGallery 根据 3 条假数据生成了 3 个 Photo 组件。
结语
本文只是一篇 React 入门，我强烈推荐大家去读 React 官方文档，里面包含了所有你想要的细节。
还有一些值得一看的视频资源。Pete Hunt 讲的 re-thinking web application architecture with React 和 Tom Occhino 讲的 React Native for building native mobile applications with React (WIP)。
本文并没有介绍如何设置你的本地开发环境，官方文档有相关介绍，或者，你还可以看看我的解决方案 boilerplate。
如果本文有什么错误之处，欢迎在 twitter 上联系我，或者给我提 pull request。尽情给我发邮件吧，我很乐意效劳。
P.S - 如果你准备开发一个更复杂的 React 应用，推荐 The Flux Quick Start Guide(译注：中文译文 《Flux 入门》)。
