Ant Design React 学习笔记

发表于 Disqus：

Learn the Ant Design step by step from the course

cover

学习 Ant Design，需要一定的 Node.js 和 React 或者现在的一些前端框架如 Vue.js 或 AngularJS 的基础。这篇教程使用的是 React。Ant Design 也有 Vue.js 或 AngularJS 的版本，通过 Ant Design 官网 了解。

可以先看下 Node.js 和 React 的各种教程，理解一些基本概念再开始学习。

推荐官方教程和阮一峰的 React 技术栈系列教程

这篇文章是针对于 Ant Design 教程的浓缩版。结构也与原文差不多。

基础知识

前端开发的演变

  • 静态页面阶段

    前后端一体，后端生成页面，前端只是纯粹的展示，脚本也只是增加一些效果。主要采用后端 MVC 模式。

  • AJAX 阶段

    2004 年，AJAX 诞生，实现了从获取数据，处理数据到展示数据的完整业务逻辑。初现前后端分离。

  • 前端 MVC 阶段

    2010 年，第一个前端 MVC 框架 Backbone.JS 诞生。出现了 MVC 和 MVVM 两种模式。前后端开始分离。后端做业务逻辑处理，前端做 UI 逻辑处理。

  • SPA 阶段

    类似于桌面应用，即是把浏览器当作操作系统，通过单页面模拟出以前多页面操作的完整应用程序。即被称为 SPA（single-page application）。涌现出如 Vue、Angular、React 的前端应用开发框架。

初始化项目

到 SPA 阶段后，已经不是简单的写 HTML，CSS 和 Javascript 了。更多的是如后端，写好程序后，通过编译最终生成可以被浏览器执行的 HTML，CSS 和 Javascript。

虽然不外乎源码 -> 编译 -> 运行这套。但是因为 Web 的体系和开源的发展，现在前端的开发栈异常复杂。各种工具、框架和库，多如牛毛，同一个功能实现可以找到数十种实现方式。

该教程选用了 umi 作为编译工具，对前端开发的常用工具进行了封装，使我们可以快速的搭建一个 React 项目。

开发环境

准备好 Node.js 的运行环境。

命令解释：npm 与 cnpm 基本相同。cnpm 使用的是 npm 的国内镜像，下载速度快。

Hello World

初始化

创建目录 antd-course 存放代码。

1
2
$ mkdir antd-course
$ cd antd-course

然后调用 npm init 初始化 Node.js 项目。

1
$ npm init -y

-y 表示以默认方式初始化。

安装 umi 依赖

1
$ npm install umi --save-dev