react(1) 如何用dva-cli 进行搭建react项目

dva是淘宝团队弄的，为了支持国货，赶紧试试看咋用吧 
第一步：安装 dva-cli

npm install dva-cli -g

第二步：采用dva来创建项目：

dva new myapp
cd myapp

第三步：npm start 启动起来访问路径： http://localhost:8000/  界面效果如下：

使用 antd#

通过 npm 安装 antd 和 babel-plugin-import 。babel-plugin-import 是用来按需加载 antd 的脚本和样式的，详见 repo 。

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

编辑 .webpackrc，使 babel-plugin-import 插件生效。

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

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

定义路由#

我们要写个应用来先显示产品列表。首先第一步是创建路由，路由可以想象成是组成应用的不同页面。

新建 route component 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 ，你应该能看到前面定义的 <h2> 标签。