react与后台交互获取并渲染数据（适合初学者）⼀个完整的demo
1. 前提：
已经了解react框架的使⽤、webstrom已配置react的基本东西已经了解react框架的使⽤、webstrom已配置react的基本东西已经了解react框架的使⽤、webstrom已配置react的基本东西已经了解react框架的使⽤、webstrom已配置react的基本东西
2. 提⽰：
因为这⾥不能直接访问到我的后台，所以这⾥⽤虚拟数据作为后台
3. 安装json-server
⾸先你的电脑中需要安装nodejs，建议使⽤最新版本。然后全局安装json server.
npm install json-server -g
可以使⽤json-server -h 来查看是否安装成功
4. 在src同级⽬录下创建mock⽂件夹，⾥⾯新建data.json 写⼊数据
{
"data": [
{
"title": "湘潭夜跑",
"author": "张三",
"date": "2018年9⽉20⽇"
},
{
"title": "爬岳麓⼭",
"author": "李四",
"date": "2018年9⽉30⽇"
},
{
"title": "湘潭夜跑",
"author": "张三",
"date": "2018年9⽉20⽇"
}
]
}
然后打开新的terminal输⼊
json-server mock/data.json -p 3003
5. 反向代理
在package.json⽂件中添加下条语句
"proxy":"localhost:3003"
注意：这⾥需要重新运⾏（npm start）该项⽬package.json更改的数据才会⽣效
6. 在src⽬录下新建⼀个testCorrespond⽂件夹⾥⾯新建两个js⽂件，分别为PostItem.js、PostList.js
7. PostItem.js
class PostItem extends Component{
render() {
const { title,author,date} = this.props;
return (
<div>
<div>
{ title }
</div>
<div>
创建⼈：<span>{ author }</span>                </div>
<div>
创建时间：<span>{ date }</span>                </div>
</div>
);
}
}
export default PostItem;
8. PostList.js
import PostItem from './PostItem';
class PostList extends Component{
constructor(props){
super(props);
this.state = {
news:[
{
title:"⼤家⼀起来讨论React吧",
author:"张三",
date:"2017-09-01 10:00"
}
]
};
}
handle_click = ()=>{
let t = this;
fetch("/data", {method: 'GET'}).then(
function (res) {
console.log(res);
res.json().then(function (data) {
console.log(data);
t.setState({
news:data
});
}
)
});
};
render() {
return (
<div>
<button onClick={this.handle_click}>button</button>                <br/>
帖⼦列表：
{ws.map((item,i) =>
<div key={i}>
<PostItem
title = {item.title}
author = {item.author}
date = {item.date}
/>
</div>
)}
</div>
);
}
}
export default PostList;
最后别忘记修改根⽬录下的index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// import App from './App';
import PostList from "./testCorrespond/PostList"
react开发框架
// import OrdinaryActivityList from './component/OrdinaryActivityList/index'; import * as serviceWorker from './serviceWorker';
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: bit.ly/CRA-PWA serviceWorker.unregister();

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。