简单易懂的React魔法(14):准备开始编写真正的项目

现在你可能会想知道教程的下一步是什么，在这之前我们先总结一下现在你学到了什么:

1. 如何安装webpack，babel和react来用es6进行开发。
2. 如何创建基本react组件并引入app。
3. 如何写JSX来渲染文本。
4. 如何通过传入props来给组件传值。
5. 如何同时渲染多行文本。
6. 如何处理浏览器事件。
7. 如何使用state，state和props的区别。
8. 如何通过循环渲染数组中的数据。

所有的这一切都会被用上:我们将会使用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数组是空的，下面我们来修改它。