現(xiàn)在你可能會想知道教程的下一步是什么树肃，在這之前我們先總結(jié)一下現(xiàn)在你學(xué)到了什么:
- 如何安裝webpack茁肠，babel和react來用es6進行開發(fā)单寂。
- 如何創(chuàng)建基本react組件并引入app看靠。
- 如何寫JSX來渲染文本摔桦。
- 如何通過傳入props來給組件傳值端朵。
- 如何同時渲染多行文本好芭。
- 如何處理瀏覽器事件。
- 如何使用state冲呢，state和props的區(qū)別舍败。
- 如何通過循環(huán)渲染數(shù)組中的數(shù)據(jù)。
所有的這一切都會被用上:我們將會使用Ajax去獲取GitHub上的數(shù)據(jù)敬拓。好吧邻薯，技術(shù)上講我們要用的方法是Ajaj而不是Ajax。因為github提供的數(shù)據(jù)是JSON而不是XML乘凸，當(dāng)然這都不重要厕诡。如果你之前沒用過Ajax，這只是一種獲取遠程服務(wù)器數(shù)據(jù)的方法营勤。
在終端按ctrl+c退出webpack dev server然后運行下面的命令:
npm install --save superagent
SuperAgent是一個輕量級的Ajax工具灵嫌，它有簡單清晰的語法，易于學(xué)習(xí)使用葛作。我們現(xiàn)在要把之前的練手項目換成用Ajax調(diào)用GitHub API得到數(shù)據(jù)的項目寿羞，改動會有點大不過都是你見過的東西:
注意:當(dāng)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()方法客年。別擔(dān)心霞幅，你學(xué)的這些都會用到漠吻，只是現(xiàn)在不需要了量瓜。
作為代替我們會創(chuàng)建一些很簡單的初始state：一個空數(shù)組。在Ajax完成后它會被填滿途乃。代碼如下:
src/pages/Detail.js
this.state = { commits: [] };
至于render()绍傲，我們要改變變量名不然他們只會輸出靜態(tài)數(shù)據(jù)。之后我們將填入細節(jié)，很快的烫饼，現(xiàn)在先換成這樣:
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數(shù)組是空的荠耽，下面我們來修改它。
