react是Facebook推出的一个用来构建用户界面的JavaScript开发框架，主要用于构建UI，可使创建交互式UI变得轻而易举。Ant Design是阿里蚂蚁金服团队基于React开发的ui组件，主要用于中后台系统的使用；它它使用TypeScript构建，提供完整的类型定义文件。

本教程操作环境：Windows7系统、react18版、Dell G3电脑。

什么是react？

React是用于构建用户界面的JavaScript库， 起源于Facebook的内部项目，因为该公司对市场上所有 JavaScript MVC框架，都不满意，就决定自己写一套，用来架设Instagram的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。

React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面，这些代码片段被称作“组件”。

由于 React的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。

React 是一个为数据提供渲染为 HTML 视图的开源 JavaScript 库。React 视图通常采用包含以自定义 HTML 标记规定的其他组件的组件渲染。React 为程序员提供了一种子组件不能直接影响外层组件的模型，数据改变时对 HTML 文档的有效更新，和现代单页应用中组件之间干净的分离。

React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据改变时 React 能有效地更新并正确地渲染组件。组件逻辑使用 JavaScript 编写而非模版，因此你可以轻松地在应用中传递数据，并使得状态与 DOM 分离。

React 特点

• 声明式设计：React采用声明范式，可以轻松描述应用。

• 高效：React通过对DOM的模拟，最大限度地减少与DOM的交互。

• 灵活：React可以与已知的库或框架很好地配合。

• JSX：JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。

• 组件：通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。

• 单向响应的数据流： React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

掌握 React 不仅可以帮你应对前端应用开发，而且它的编程思想还可以应用到 React Native 原生 App 开发和服务器端渲染的后端开发。所以不论你是否从事前端开发工作，学习 React 对技能提升和职业发展都有很大的帮助。

什么是Ant Design？

Ant Design是阿里蚂蚁金服团队基于React开发的ui组件，主要用于中后台系统的使用。

官网：https://ant.design/index-cn

特性：

• 提炼自企业级中后台产品的交互语言和视觉风格。

• 开箱即用的高质量 React 组件。

• 使用 TypeScript 构建，提供完整的类型定义文件。

• 全链路开发和设计工具体系。

开始使用

• 引入Ant Desig

Ant Design 是一个服务于企业级产品的设计体系，组件库是它的 React 实现，antd 被发布为一个 npm 包方便开发者安装并使用。

可使用 npm 或 yarn 的方式进行开发，不仅可在开发环境轻松调试，也可放心地在生产环境打包部署使用，享受整个生态圈和工具链带来的诸多好处。

$ npm install antd --save
$ yarn add antd

在 umi 中，你可以通过在插件集 umi-plugin-react 中配置 antd 打开 antd 插件，antd 插件会帮你引入 antd 并实现按需编译。

在config.js文件中进行配置：

export default {
    plugins: [
        ['umi-plugin-react', {
            dva: true, // 开启dva功能
            antd: true // 开启Ant Design功能
        }]
    ]
};

• 小试牛刀

接下来，我们开始使用antd的组件，以tabs组件为例，地址：https://ant.design/components/tabs-cn/
效果：

参考官方给出的示例，进行使用，创建MyTabs.js文件：

import React from 'react'
import {Tabs} from 'antd'

const TabPane = Tabs.TabPane;
const callback = (key) => { console.log(key);
}

class MyTabs extends React.Component {
    render() {
        return (
            <Tabs defaultActiveKey="1" onChange={callback}>
                <TabPane tab="Tab 1" key="1">Content of Tab Pane 1</TabPane>
                <TabPane tab="Tab 2" key="2">Content of Tab Pane 2</TabPane>
                <TabPane tab="Tab 3" key="3">Content of Tab Pane 3</TabPane>
            </Tabs>
        )
    }
}
export default MyTabs;

效果：

到此，我们已经掌握了antd组件的基本使用。