<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="example"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>
<script type="text/babel">
/*
* 需求：
* 1.界面效果如下
* 2.根据指定的关键字在github上搜索匹配的最受关注的库
* 3.显示库名，点击链接查看库
* 4.测试接口：https://api.github.com/search/repositories?q=r&sort=stars
*/
class MostStarRepo extends React.Component {
state = {
repoName: '',
repoUrl: ''
}
//在这里发送异步ajax请求
componentDidMount() {
//1.使用axios发送
const url = `https://api.github.com/search/repositories?q=r&sort=stars`;
//因为是promise风格的，所以后面可以使用.then()
axios.get(url).then(response => {
//数据就在response里面
const result = response.data
//使用解构得到想要的数据
const {name, html_url} = result.items[0];
//更新状态
this.setState({repoName: name, repoUrl: html_url})
}).catch((error) => {
alert(error.message)
})
//2.使用fetch发送异步ajax请求
/*fetch(url).then(response => {
return response.json()//response.json()实际上是一个promise对象
}).then(data => {
//得到数据
const {name, html_url} = data.items[0]
//更新状态
this.setState({repoName: name, repoUrl: html_url})
})*/
}
render() {
const {repoName, repoUrl} = this.state
if (!repoName) {
return <h2>LOADING......</h2>
} else {
return <h2>Most star repo is <a href={repoUrl}>{repoName}</a></h2>
}
}
}
ReactDOM.render(<MostStarRepo/>, document.getElementById('example'));
</script>
</body>
</html>