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":"http://localhost:3003"

注意：这里需要重新运行（npm start）该项目package.json更改的数据才会生效

6. 在src目录下新建一个testCorrespond文件夹里面新建两个js文件，分别为PostItem.js、PostList.js
7. PostItem.js

import React,{Component} from 'react';
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 React,{Component} from 'react';
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/>
                帖子列表：
                    {this.state.news.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"
// import OrdinaryActivityList from './component/OrdinaryActivityList/index';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<PostList />, document.getElementById('root'));

// 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: http://bit.ly/CRA-PWA
serviceWorker.unregister();

ok
项目跑成功后的界面显示

点击button后

打开控制台可与查看请求信息和数据

欢迎大家关注微信公众号