React + Dva + Antd项目搭建入门

本项目搭建过程参考 Dva官方快速上手教程
项目环境：（在该环境下测试通过，默认使用cnpm）
dva 0.9.2
node 8.10.0

安装 dva-cli

确保版本在 0.9.1 及以上

$ npm install dva-cli -g
$ dva -v
dva-cli version 0.9.2

创建新应用

$ dva new dva-demo

完成之后进入生成的项目文件夹并启动项目

$ cd dva-demo
$ npm start

在浏览器里打开 http://localhost:8000

使用 antd

antd 是淘宝前端团队开源的一个UI库

安装 antd 和 babel-plugin-import（babel-plugin-import 用来按需加载 antd 的脚本和样式）

$ cnpm install antd babel-plugin-import --save

编辑 .webpackrc，使 babel-plugin-import 插件生效（代码每行首个字符为 + 表示该行为新增内容，下同）

{
+  "extraBabelPlugins": [
+    ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
+  ]
}

定义路由

创建一个数据列表页面，实现增删改查

新建路由组件routes/Products.js

import React from 'react';

const Products = (props) => (
  <h2>List of Products</h2>
);

export default Products;

添加路由信息到路由表 router.js

+ import Products from './routes/Products';
...
+ <Route path="/products" exact component={Products} />

然后在浏览器里打开 http://localhost:8000/#/products

编写 UI 组件

新建 components/ProductList.js 文件

import React from 'react';
import PropTypes from 'prop-types';
import { Table, Popconfirm, Button } from 'antd';

const ProductList = ({ products }) => {
  const columns = [{
    title: '名称',
    dataIndex: 'name',
  }, {
    title: '描述',
    dataIndex: 'desc'
  }];
  return (
    <Table
      dataSource={products}
      columns={columns}
    />
  );
};

ProductList.propTypes = {
  products: PropTypes.array.isRequired,
};

export default ProductList;

定义 Model

现在开始处理数据和逻辑：dva 通过 model 的概念把一个领域的模型管理起来，包含同步更新 state 的 reducers，处理异步逻辑的 effects，订阅数据源的 subscriptions 。

• namespace 表示在全局 state 上的 key
• state 是初始值，在这里是空数组
• reducers 等同于 redux 里的 reducer，接收action，同步更新 state
  新建 model models/products.js

expo