现在你可能会想知道教程的下一步是什么，在这之前我们先总结一下现在你学到了什么:
- 如何安装webpack，babel和react来用es6进行开发。
- 如何创建基本react组件并引入app。
- 如何写JSX来渲染文本。
- 如何通过传入props来给组件传值。
- 如何同时渲染多行文本。
- 如何处理浏览器事件。
- 如何使用state，state和props的区别。
- 如何通过循环渲染数组中的数据。
所有的这一切都会被用上:我们将会使用Ajax去获取GitHub上的数据。好吧，技术上讲我们要用的方法是Ajaj而不是Ajax。因为github提供的数据是JSON而不是XML，当然这都不重要。如果你之前没用过Ajax，这只是一种获取远程服务器数据的方法。
在终端按ctrl+c退出webpack dev server然后运行下面的命令:
npm install --save superagent
SuperAgent是一个轻量级的Ajax工具，它有简单清晰的语法，易于学习使用。我们现在要把之前的练手项目换成用Ajax调用GitHub API得到数据的项目，改动会有点大不过都是你见过的东西:
注意:当superAgent安装完，再重新打开webpack-dev-server。
首先在constructor方法里找到这一行:
src/pages/Detail.js
const people = [];
for (let i = 0; i < 10; i++) {
people.push({
name: chance.first(),
country: chance.country({ full: true })
})
}
this.state = { people };
……然后删掉他们。我们再也不需要这些了。顺便也删掉import Chance from 'chance'和整个buttonClicked()方法。别担心，你学的这些都会用到，只是现在不需要了。
作为代替我们会创建一些很简单的初始state：一个空数组。在Ajax完成后它会被填满。代码如下:
src/pages/Detail.js
this.state = { commits: [] };
至于render()，我们要改变变量名不然他们只会输出静态数据。之后我们将填入细节，很快的，现在先换成这样:
src/pages/Detail.js
render() {
return (<div>
{this.state.commits.map((commit, index) => (
<p key={index}>Some commit data here.</p>
))}
</div>);
}
为了确保你跟着教程一步一步走，下面给出Detail.js:
src/pages/Detail.js
class Detail extends React.Component {
constructor(props) {
super(props);
this.state = { commits: [] };
}
render() {
return (<div>
{this.state.commits.map((commit, index) => (
<p key={index}>Some commit data here.</p>
))}
</div>);
}
}
一旦你保存文件，整个页面会变空，因为commits数组是空的，下面我们来修改它。
