【React学习笔记】React—UI组件库教程_react ui 框架

之前学习教程的案例资料不全，还找寻找合适的案例进行操练。先继续学习一些其他内容

0、流行的开源的UI组件库

material-ui(国外)

在官网上查看文档，github上有
官网：material-ui链接
github:代码


本篇博客不做讲解

ant-design(国内蚂蚁金服)

官网：ant-design

1、ant-design基本使用

组件库的使用基本是相通了，知道如何引入、使用、修改，便可以基本使用这个组件库。

1.1 安装

我安装的是当前最新版本>5，很多配置都比之前的版本简化了，对新手友好。
安装：

npm install antd --save
1

大家如果有下载失败的可以查看一下npm下载源，可以更换成淘宝或者清华镜像。如果不行，搜索一下错误提示，我在下载过程中出现了证书过期的错误，关闭SSL就下载成功了。

//查看地址
npm config get registry
//修改成淘宝镜像地址
npm config set registry https://registry.npm.taobao.org/
1
2
3
4

1.2 使用

以图标为例，其他举一反三

• 引入
  按需引入，使用哪个组件引入哪个组件。

import {PhoneOutlined} from '@ant-design/icons';
1

• 使用
  
• 扩展
  使用和掌握一个组件的使用，还得看一些参数的使用。一般按钮等组件要结合事件结合起来，看官网文档模仿学习。