前言

开始学习

欢迎来到《Ant Design 实战教程》。

这本教程将从最简单的教起，让大家学会如何使用 Ant Design 组件库，然后逐渐深入，讲解如何开发一个包含多个复杂网页、用于实际生产的大型应用。

这是 Ant Design 组件库的官方教程，由 Ant Design 开发团队负责编写。不管你是刚刚接触前端开发的新手，还是已经从事实际开发、希望尝试 React 技术栈的工程师，都是我们的目标读者。

通过学习这门课程，我们希望帮助读者达到下面几个目标。

掌握 React 技术栈
掌握 Ant Design 组件库和周边工具
了解互联网公司实际的前端开发模式和流程
了解前端开发技术的实现原理
提升实际开发能力和就业竞争力，能够承担真实业务

学习本教程，你最终会得到一个可以运行的示例项目，该项目所有代码可以在 https://github.com/ant-design/react-tutorial 中拿到。但是我们推荐你按照章节的顺序，一步一步地自己搭建出整个示例项目。

前置知识

学习这本教程之前，读者需要了解前端开发的基本知识，理解网页的原理，会使用 HTML + CSS + JavaScript 写简单的网页。

教程会大量使用 JavaScript 最新语法标准 ES6，所以也需要了解 ES6。如果你对这方面不熟悉，也没有关系，我们在附录里面，准备了 ES6 语法简介，可以开始学习之前，先读一下这个附录。

另外，教程使用的是命令行开发，会用到 Node。你不需要对 Node 有很深的了解，但是需要会在命令行下执行 Node 脚本。所以，请确认你的开发环境已经安装了 Node。

Ant Design 介绍

这门课程主要教的是 Ant Design 组件库。那么，组件（component）到底是什么东西？

如果你经常浏览各种网站，就会发现不管网页的主题是什么，通常都会使用一些重复出现的构件，比如日历、表格、表单、菜单、卡片、导航栏等等。这些构件的功能和外观都很类似，只是在一些细节的地方，根据需要做了定制。它们就叫做组件，一张完整的网页，可以看做是不同功能的组件的集合。

很早就有人设想，如果能够把常用的组件都封装好，提供给开发者，那么网页开发就会变得非常简单，只要把不同的组件像搭积木那样组合起来，就能做出一张网页。

但是，由于浏览器和 JavaScript 对组件的支持一直不完善，这个想法实行起来困难重重。很长一段时间，组件库几乎没有进展。

2014年，React 框架发布，为组件提出了一套可行的解决方案。从此，可以用于实际开发的组件库才变成了现实。

Ant Design 就是基于 React 实现的一套组件库。它是由蚂蚁金服体验技术部开发的，最早是在2015年发布的，到现在已经发布了三个大版本，目前一共封装了50多个组件。它在国内得到广泛使用，可能是使用量最大的 React 组件库，在国际上也有一定的知名度。

它的功能完备，使用简单。你会发现使用 Ant Design，可以很快做出一张网页，真的就像搭积木一样。

值得一提的是，Ant Design 不仅包括组件，也包括一套设计规范和理念。组件库可以看做是 Ant Design 设计规范的 React 实现。Ant Design 想要带给用户，不仅仅是功能，还包括漂亮的外观和良好的体验。

React 介绍

Ant Design 是基于 React 开发的。要使用 Ant Design，必须学会 React。

React 是 Facebook 公司推出的一套前端开发框架，是目前全世界最流行的前端框架。它的核心理念是将网页应用看成一个组件构成的状态机（state machine），状态的变化导致了 UI 的变化。

React 本身的 API 并不多，是一个较为简单的框架。但是，要用好它，必须使用其他的配套工具，所以人们常说学习 React 并不是学习一个框架，而是学习一整套 React 技术栈。

这门课程之中，我们也给大家准备了 React 入门章节和深入学习章节，帮助大家学会 React。

umi 介绍

https://umijs.org/

React 组件使用的是 JSX 语法和很多新的 ES6 语法，浏览器不支持。另外，不同的组件脚本必须打包在一起，浏览器才能加载。

因此，React 应用有一个构建过程，将源码编译为生产环境代码。这个步骤对于新手来说是比较麻烦的，因为有很多配置的细节，而且包括很多重复的环节，每个项目都必须做一次，也是很烦人的。

因此，我们开发了一个工具 umi，封装了编译步骤，包括了很多开发时的有用工具。只要你写好 React 代码，接下来 umi 就会把它处理为生产代码。

umi 也是蚂蚁金服体验技术部推出的工具。本课程采用 umi 和 Ant Design 配套使用。

学习交流群

大家在学习的过程中可以到钉钉学习交流群内交流沟通。

贡献者

本教程是通过程序自动同步，语雀中显示的作者并不是实际的作者。该课程是由下面的同学们共同编写的：

边柳
豆酱
兔哥
愚道
兼续
云谦
至正
期贤
炫明
水鱼
迫风

以上排名不分先后。

AntDesign 实战教程 --------前言相关推荐

PyTorch 高级实战教程：基于 BI-LSTM CRF 实现命名实体识别和中文分词
20210607 https://blog.csdn.net/u011828281/article/details/81171066 前言:译者实测 PyTorch 代码非常简洁易懂,只需要将中文分词 ...
Swift游戏开发实战教程（大学霸内部资料）
Swift游戏开发实战教程(大学霸内部资料) 试读下载地址:http://pan.baidu.com/s/1sj7DvQH 介绍:本教程是国内第一本Swift游戏开发专向资料. 本教程详细讲解记忆配对 ...
Nginx高性能Web服务器实战教程PDF
网站更多书籍点击进入>> CiCi岛下载电子版仅供预览及学习交流使用,下载后请24小时内删除,支持正版,喜欢的请购买正版书籍电子书下载(皮皮云盘-点击"普通下载" ...
【NAS备份】摆脱丢数据的噩梦，群晖备份硬核实战教程分享
前言大家好,我是村雨Mura,本期来聊一聊我是如何用 NAS 轻松.完整地备份自己数据的. 首先,硬件再好不如备份即便从小的线材到硬盘的质量都用最好的,也很难保证不丢数据,宇宙射线.硬盘不可逆衰减 ...
电商小程序实战教程-分类导航
电商小程序实战教程第一章总体介绍第二章创建数据源第三章创建管理后台第四章首页的创建前言从上一篇开始,我们就正式进入到了电商小程序的实战开发阶段.首先是介绍了首页的开发,首页主要是展 ...
AutoJs 4.1.1 实战教程、Hamibot
Auto.js 中文文档:https://pro.autojs.org/docs/ pro 版本支持 Node.js AutoJs Pro 7.0.4-1 实战教程---史上最全快手.抖音极速版 :h ...
机器学习实战教程（三）：决策树实战篇
一.前言上篇文章机器学习实战教程(二):决策树基础篇_M_Q_T的博客-CSDN博客讲述了机器学习决策树的原理,以及如何选择最优特征作为分类特征.本篇文章将在此基础上进行介绍.主要包括: 决策树构建 ...
STM32CubeMX实战教程（七）——TFT_LCD液晶显示（附驱动代码）
液晶显示前言材料 TFT_LCD FSMC接口原理图工程配置进入代码驱动程序引入代码分析 TFTLCD_Init LCD_Drawxxx LCD_Fill LCD_Showxxxx 功能 ...
使用ChatGPT工具阅读文献的实战教程
大家好,我是herosunly.985院校硕士毕业,现担任算法研究员一职,热衷于机器学习算法研究与应用.曾获得阿里云天池比赛第一名,CCF比赛第二名,科大讯飞比赛第三名.拥有多项发明专利.对机器学 ...
《黑马程序员2023新版黑马程序员大数据入门到实战教程，大数据开发必会的Hadoop、Hive，云平台实战项目》学习笔记总目录
本文是对<黑马程序员新版大数据入门到实战教程>所有知识点的笔记进行总结分类. 学习视频:黑马程序员新版大数据学习时总结的学习笔记以及思维导图会在后续更新,请敬请期待. 前言:配置三台虚拟 ...

AntDesign 实战教程 --------前言

前言