React最佳实践系列 —— Dva快速入门

作者： DocWhite白先生

一. 门槛

React 技术栈

在进行 dva框架的实践练习之前，请确保对 React技术栈有比较全面的了解，掌握必要的React基础。 dva框架本质上是 蚂蚁金服基于 React技术栈封装的一套框架，特点在于免去了新手手动搭建完整开发环境（Redux，React-Router等的安装）的麻烦，一键安装即可项目开发，虽然降低了上手难度，但不可避免的是反而使扩展成本变得更高（如需要单独配置特定的webpack配置项，而这些配置项不在roadhog可配置范围时），也不必担忧，系统复杂度不高的web应用使用dva框架开发，使用封装好的配置项已绰绰有余。
涉及的知识点：

1. ES6
2. React + React-Router + Redux + Redux-saga
3. webpack + antd(UI组件库)webpack + antd(UI组件库)

二. Hello World

不废话，以一个简单的Hello World开始dva最佳实践。

准备工作

1. dva-cli。

npm install -g dva-cli     		  // 全局安装 dva命令行工具

2. 利用dva-cli创建空的dva项目

dva new dva-best-practice    	  // 执行该命令将会在当前目录创建 dva-best-practice 目录，包含有初始化的项目文件。

3. 启动 dva项目

cd dva-best-practice 
npm start  						  // 在执行 dva new时已经自动安装好项目初始化时所需要的npm依赖包

这时候在浏览器 http://localhost:8000 已经能看到一个官方例子的 Hello World。

三. 一个简单H5

源码github地址
Hello World只是万里长征第一步，接下来以一个简单的以dva框架制作的H5例子，直接打通学习dva的障碍。（悟性高以及前端基础好的同学可以直接通过查看dva官方文档学习dva的使用技巧