前端技术学习记录：react+dvajs+ant design实现暴走计算器的页面重构（一）

前言

生命不停，学习不止。
最近在业余时间看了些react的视频和文档，本文作为本次学习后练习的一个DEMO，以此文章做记录。
因为我是一个做后端的，对前端的知识并不是那么的熟悉，所以可能存在一些设计不合理，可优化的问题，欢迎指正。
本次Demo基于我一年前玩过的一款游戏，部分玩家对其开发的【暴走英雄坛计算器】，本次只练习前端，后端接口就仍然调用其原本的接口。

现在的效果

【暴走英雄坛计算器H5】

安装 dva-cli

默认你们电脑安装了node，打开cmd命令。
通过 npm 全局安装 dva-cli 并确保版本是 0.9.1 或以上。我的是0.10.1。

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

创建新应用

安装完 dva-cli 之后，就可以在命令行里访问到 dva 命令了。
首先我们新建一个文件夹作为工作空间。
然后通过 dva new 创建我们本次的应用，我就取名baozouApp吧。

$ dva new baozouApp

创建成功：

预览项目

创建好baozou爱趴趴之后，进入项目路径，通过npm启动项目

$ cd baozouApp
$ npm start

启动成功：
访问http://localhost:8000/#/可以看到默认页面：

文件结构简单介绍

我这里用的是WebStorm，也可以使用别的开发工具。打开项目初始化目录如下。

使用 antd做页面

在WebStorm中打开Terminal面板，在这里执行命令，为了方便不在cmd命令行执行了。

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

安装完成：
编辑 .webpackrc，使 babel-plugin-import 插件生效。

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

定义自己的页面

删除初始化项目时components、models、routes、services这几个文件夹下的文件，在routes文件夹下新建一个页面BzMain.js。

import React from 'react';

const BzMain = (props) => (
  <h2>欢迎来到：BzMain</h2>
);

export default BzMain;

定义路由

路由可以想象成是组成应用的不同页面。
编辑router.js，将项目的默认加载页面改成BzMain。

import React from 'react';
import { Router, Route, Switch } from 'dva/router';
import BzMain from './routes/BzMain';

function RouterConfig({ history }) {
  retur