基于Dav快速搭建React开发框架

1、 dva-cli

安装 dva-cli，具体教程 快速上手dva

2、改写上面示例中的Products.js

将函数组件改成React类组件

import React from "react";
import { connect } from "dva";
import ProductList from "../components/ProductList";

class Products extends React.Component {
    constructor(...args) {
        super(...args);
        this.state = {
            show: false
        };
    }
    handleDelete(id) {
      this.props.dispatch({
        type: "products/delete",
        payload: id,
      });
    }
    render() {
      console.log(this.props);
     return (
      <div>
        <h2>List of Products</h2>
        <ProductList onDelete={this.handleDelete} products={this.props.products.initData} />
      </div>
    );
    }
}
Products.defaultProps = {
    title: "下拉弹框",
    datas: [1, 2, 3],
}
export default connect(({ products }) => ({
  products,
}))(Products);

3、配置.webpackrc

dva-cli 基于 roadhog 实现 build 和 dev, 更多 .webpackrc 的配置详见
roadhog

{
    "entry": {
        "index":"./src/main.ts",
        "vendor":["react","react-dom","react-router-dom","react-router-redux","redux","react-redux","dva","@reco-mobile/core","prop-types","immutable","classnames"],
        "polyfills":["jquery","isomorphic-fetch","webuploader","./src/polyfills.ts"]
    },
    "extraBabelPlugins": [
        ["import", {"libraryName": "antd-mobile", "style": true}]
    ],
    "hash": true,
    "jquery": true,
    "html": {"template": "./src/index.ejs"},
    "commons":[{"name":["vendor","react","polyfills","manifest"]}],
    "disableCSSModules": true,
    "copy":[{"from": "src/assets","to": "assets"}],
    "theme":"theme.json",
    "browserslist": [ "Android >= 6.0","iOS 9"]
}