第一个基于React应用为一个投票的app，效果图如下显示：
点击蓝色的小三角对应的票数会增加。
github源码地址
使用create-react-app来构建React应用。具体的使用方法参考React官方教程create-react-app使用。安装好create-react-app以后来构建我们的第一个简单的项目。
构建方法如下：
create-react-app voting-app
cd voting-app
yarn start
当网页如下显示以后表明应用启动成功：
项目结构如下：
在public/index.html更改一下index.html的结构
<div class="main ui text container">
<h1 class="ui dividing centered header">Popular Products</h1>
<div id="root"></div>
</div>
这里的<div id="root"></div>是React应用的挂载点，后面会具体提到。样式使用了semantic ui，在该文件中引入对应的样式文件即可。
什么是组件？
构建一个React的核心就是组件。一个独立的React组件可以被认为是一个app中的UI组件。我们可以将voting-app划分成两个主要的组件：
从图中我们可以看出有一个父组件包含了许多子组件，并且分别称他们为ProductList和Product。
-
ProductList：包含许多product组件 -
Product：显示信息
每个组件可以包含标签，视图逻辑，组件样式，交互事件等。也就是说，一个组件中可以包含HTML结构，CSS样式，JavaScript事件。这使得React组件有很好的复用性。（这和传统的HTML，CSS，JavaScript分离的观念不同）。
此外，React对于组件的数据流和交互性是严格限制的。在React中，当一个组件的输入发生了变化，那么组件也会重新渲染，所以这使得数据和UI的一致性得到了保障：只要给定的数据输入不发生变化，那么其输出（组件在页面上的显示）则始终保持一致。
根据上面的project-structure图来建立两个组件（都是js文件）。
ProductList.js：
import React, { Component } from 'react'
class ProductList extends Component {
render () {
return (
<div className="ui unstackable items">
</div>
)
}
}
export default ProductList
React组件是一个继承与React.Component的 ES6 class。ProductList类中有一个方法名为render()，这个方法是一个组件中必须存在的一个方法，其返回值会决定将什么渲染到页面上。
(关于ES6类的用法可以参考阮一峰老师的ES6入门。class基本语法，class的继承)
如果你熟悉JavaScript，你会对render返回的值感到奇怪：
return (
<div className="ui unstackable items">
some text
</div>
)
这个返回值看起来并不像传统的JavaScript，而看上去更像HTML。其实这是一种称之为JSX(JavaScript eXtension syntax)的语法。这是由Facebook对JavaScript的一种语法拓展。使用JSX可以让我们写出HTML-like的语法来渲染页面。其实JSX的本质就是JavaScript对象，可以使用编译器(如babel)将JSX翻译成JavaScript对象。
JSX:
<div className="ui item">
some text
</div>
则会翻译成：
React.createElement(
'div',
{className: "ui item"},
'some text'
)
总结一下JSX：
React组件最终都会被渲染成HTML显示在页面上。而render()方法则是描述view应该如何被HTML表示。React使用一种伪DOM(fake DOM)来构建app，这个伪DOM称之为虚拟DOM(virtual DOM)，之后会具体阐述什么是虚拟DOM（很重要的一个概念）。所以，React可以让我们以JavaScript的方式来描述组件的HTML。
如何将组件显示到页面上？
在index.js中：
import React from 'react';
import ReactDOM from 'react-dom';
import registerServiceWorker from './registerServiceWorker';
import ProductList from './components/ProductList'
ReactDOM.render(<ProductList />, document.getElementById('root'));
registerServiceWorker();
其他的先不管，具体来看看ReactDOM.render()方法。
ReactDOM来自于react-dom库，该方法接受两个参数，第一个参数是我们想要渲染什么(what)，第二个参数是渲染到哪里(where)：
ReactDOM.render(what, where)
这里，what就是我们刚刚创建的组件ProductList，它由import ProductList from './components/ProductList'导入。而where则是在index.html中的`<div id="root"></div>"中。相当于将React的组件渲染到这个节点下。
注意：自定义组件的首字母必须大写，否则React会将其看作HTML标签来渲染，从而导致错误。
保存以后可以看看页面上的显示效果（每次保存文件后，浏览器会自动刷新）。
创建Product
现在让我们来创建子组件Product。同样的，我们使用ES6的class来创建该组件：
import React, { Component } from 'react'
class Product extends Component {
render () {
return (
<div className="item">
{/* todo... 这是React中的注释方法 */}
</div>
)
}
}
export default Product
组件可以以组合的方式来构建，所以在父组件中可以嵌套子组件，由之前的组件划分我们可以将Product组件放入ProductList组件中：
import React, { Component } from 'react'
import Product from './Product'
class ProductList extends Component {
render () {
return (
<div className="ui unstackable items">
<Product/>
</div>
)
}
}
export default ProductList
数据驱动的Product组件
创建一个products.json文件，里面的具体内容可以参考代码。
使用props
我们将修改Product组件，这样就可以不使用静态的，硬编码的数据了。我们想要从父组件ProductList中将数据传递到子组件Product中。数据的流向如下：
数据是以props的方式从父组件传递到子组件。
现在让我们修改ProductList，使用props来向Product传递数据，然后渲染：
ProductList.js
import products from '../products.json'
class ProductList extends Component {
render () {
const product = products[0]
const productComponents = (
<Product
id={product.id}
title={product.title}
description={product.description}
url={product.url}
votes={product.votes}
submitterAvatarUrl={product.submitterAvatarUrl}
productImageUrl={product.productImageUrl}/>
)
})
return (
<div className="ui unstackable items">
{productComponents}
</div>
)
}
}
这里，变量product是用于藐视第一个products的JavaScript对象。我们以一种类似于HTML中的属性的属性方式在组件上写属性，而这个[propName]=[propValue]的语法方式就是props的用法。这样子组件就可以通过一种方式来获取这些“属性”和“属性值”。
当然，这里还有两个有趣的地方。第一个是在每个属性值外包括的花括号{}。
id={product.id}
在JSX中，花括号是一种定界符，用来告诉JSX花括号中的内容是JavaScript表达式。
另一个定界符是使用引号""来引用字符串，就像这样：id="1"。所以，id={1}这里的id的内容是数字1，而id="1"的id内容是字符串1。
现在ProductList已经通过props的方式将数据传递给了Product，那么在Product中如果得到这些数据呢？现在让我们修改Product以获取这些数据。
render () {
return (
<div className="item">
<div className="image">
<img src={this.props.productImageUrl} alt=""/>
</div>
<div className="middle aligned content">
<div className="header">
<a onClick={this.handleUpVote}>
<i className="large caret up icon"></i>
</a>
{this.props.votes}
</div>
<div className="description">
<a href={this.props.url}>{this.props.title}</a>
<p>{this.props.description}</p>
</div>
<div className="extra">
<span>Submitted by: </span>
<img src={this.props.submitterAvatarUrl} className="ui avatar image" alt=""/>
</div>
</div>
</div>
)
}
可以看出，这里是用this.props.xxx的方式来获取props的值。
在HTML元素中使用props的方式可以让我们创建动态，数据驱动的React组件。
保存文件以后，可以看到浏览器已经渲染出一个列表了。
渲染多个products
为了渲染多个products，我们需要让ProductList产生一个Product组件数组，每个Product组件用于渲染特定的数据。我们可以使用JavaScript中的map()方法来产生一组特定的Product组件数组。map的解释
ProductList.js：
render () {
const productComponents = products.map(product => {
return (
<Product
key={`product-${product.id}`}
id={product.id}
title={product.title}
description={product.description}
url={product.url}
votes={product.votes}
submitterAvatarUrl={product.submitterAvatarUrl}
productImageUrl={product.productImageUrl}
onVote={this.handleProductUpVote}/>
)
})
return (
<div className="ui unstackable items">
{productComponents}
</div>
)
这里新添加的key属性很重要，必须添加，以后会详细解释为什么
保存文件，浏览器上就能显示一个Product列表了。
现在再修改一下，让页面以票数从小到大来显示。其实很简单，只要将products数据做一个排序就可以了，可以使用sort()方法。sort的解释
ProductList.js:
render () {
const sortedProducts = this.state.products.sort((a, b) => a.votes - b.votes)
const productComponents = sortedProducts.map(product => {
return (
<Product
key={`product-${product.id}`}
id={product.id}
title={product.title}
description={product.description}
url={product.url}
votes={product.votes}
submitterAvatarUrl={product.submitterAvatarUrl}
productImageUrl={product.productImageUrl}
onVote={this.handleProductUpVote}/>
)
})
return (
<div className="ui unstackable items">
{productComponents}
</div>
)
此时，浏览器的页面渲染效果如下：
