react-入门

环境搭建

安装官方脚手架

npm install create-react-app -g

运行脚手架工具

create-react-app react-demo

生成的项目结构如下：

image.png

启动项目

npm start

mockjs

npm install mockjs --save

新建js文件

import Mock from 'mockjs';

Mock.mock('http://api/comments', [
    {
        "author":"@name",
        "body":"@name"
    },
    {
        "author":"小明",
        "body":"@name评论2"
    },
    {
        "author":"小明",
        "body":"@name评论1"
    },
    {
        "author":"小明",
        "body":"@name|评论1"
    }
]);

ajax加载数据

//引入上面的js文件
import data from './mock';

 //dom加载完成后要做的事情
    componentDidMount(){
        this.getData();
    }

    //获取数据
    getData(){
        $.ajax({
            url:"http://api/comments",
            type:'get',
            dataType:"json",
            //箭头函数 自动绑定this
            success: (comments) => {
                // console.log(comments);
                this.setState({
                    comments:comments
                });
            },
            error: (xhr,status,err) =>{
                console.log("err.toString")
        }
        })
    }

编写一个评论列表小demo