【备战春招】第19天 CRA和Mock数据

课程名称：React16+Redux 实战企业级大众点评Web App

课程章节：第2章 React项目脚手架：create-react-app

课程讲师：艾特老干部

课程内容：

CRA

CRA 是 React 官方脚手架 create-react-app 的简称，可以零配置创建React应用，可以自动处理JS、CSS、图片等资源，提高开发效率，比如支持自动刷新、代理转发、单元测试等。

用法：

新建项目：

$ npx create-react-app [项目名] 

注意：使用npx命令，需要npm版本大于等于 5.2

CRA 支持使用 es7 的类属性方法：

getVisibleTodos = () => {
  const currentFilter = this.state.filter;
    return this.state.todos.filter(item => {
        // ...
   })
}

Mock 数据

Mock 数据方便在服务端接口尚未开发出来时，在前端进行接口的测试。React 项目中有两种使用 mock 数据的方式。

方式1：通过第三方模块开启一个 mock server，比如是以 serve 模块：

$ yarn global add serve

在 mock 数据的文件夹中，比如有这样一个目录结构：

test

|-api

data.json

在test目录下启动服务：

$ serve

使用 mock 服务器会产生跨域的问题，所以要设置代理转发。

在package.json中，配置一个proxy属性：定义哪些path需要被转发。这里定义当含有"/api"的path，就转发到http://localhost:5000：

"proxy": {
    "/api": {
        "target": "http://localhost:5000"
    }
}

注意：

1.当CRA版本低于2时，proxy的值可以是一个对象

2.当CRA版本高于2时，必须是一个string。

方式2：直接将mock数据放到public目录中。这种方式不存在跨域，方便开发。

使用 CRA 创建的项目会有一个 public 静态资源目录，通过开发服务可以被外界访问到。所以将mock数据的文件放到此目录中，就是一个简单的 mock server 了。

课程收获：

这节课学习了使用 CRA 脚手架快速创建 React 项目，同时了解了如何在 React 项目中通过配置代理的方式去解决跨域问题，以及如何设置mock server 的方式。