React UI组件库介绍（八）

React UI组件库介绍（八）

React 官网链接：

• 英文官网
• 中文官网

接着上节 React 路由介绍（七）

前言

在实现React SPA应用的时候，我们通常采用 面向组件编程 ，如果组件全部都是自己去写的话，未免有点太蠢了~，要写具体的布局与样式，如果完成一个项目的话，这个就是一个很大的工程了

原生在html+css+js的前端页面实现时，也会依靠一些现成的样式/布局库来实现页面的UI， 像 bootstrap 、easy-ui 等等，同样的，针对React的组件，同样有一些现成的组件库来供我们直接使用

React UI组件库

1. material-ui(国外)

• 官网
• github

2. ant-design(国内蚂蚁金服)

• 官网
• Github

其实不止上面的组件库，有很多组件库可以选择，但是使用都是一样的，很简单，下面以 ant-design 这个为例说明一下具体如何使用，都是三个步骤：

• 安装
• 引用
• 使用

这里主要根据 官网 来介绍一下如何使用：

1、安装

使用 npm 或 yarn 安装

// npm 安装
npm install antd --save

// yarn 安装
yarn add antd

2、引用

我们在官网组件库 中找到我们想使用的组件，然后直接引用即可，以Button 按钮为例

左边找到组件，右边点击 图片按钮 打开具体代码：

引入：

import { Button,DatePicker } from 'antd';

3、使用

像正常使用组件那样使用即可

import React, { Component } from 'react'
import { Button,DatePicker } from 'antd'; // 导入想用的组件
import 'antd/dist/antd.css' // 导入样式

export default class App extends Component {
	render() {
		return (
			<div>
				App....
            	 // 使用基本 html中的button
				<button>点我</button> 
            	 // 使用组件 Button
				<Button type="primary">按钮1</Button>
				<Button >按钮2</Button>
				<Button type="link">按钮3</Button>
			</div>
		)
	}
}

4、样式按需引用

这里如果使用组件时，需要引用其需要的样式，不然是没有样式效果的，即

import 'antd/dist/antd.css' // 导入样式

而如果直接这样将antd的样式引用的话，会引用其所有的样式，如果想要按需引用或者修改这些主题色，可以尝试这样做，三个步骤：

• 安装依赖：

yarn add react-app-rewired customize-cra babel-plugin-import less less-loader

// 或者

npm install react-app-rewired customize-cra babel-plugin-import less less-loader

• 修改 package.json 文件（修改脚本启动方式）

// 修改前
....
"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
},
....

// 修改后
....
	"scripts": {
		"start": "react-app-rewired start",
		"build": "react-app-rewired build",
		"test": "react-app-rewired test",
		"eject": "react-scripts eject"
	},
....

• 根目录下创建 config-overrides.js 文件

//配置具体的修改规则
const { override, fixBabelImports,addLessLoader} = require('customize-cra');
//配置样式按需引用
module.exports = override(
		fixBabelImports('import', {
		libraryName: 'antd',
		libraryDirectory: 'es',
	    style: true,
	}),
    // 修改一些默认的配置，例如修改主题色为green
	addLessLoader({
		lessOptions:{
			javascriptEnabled: true,
			modifyVars: { '@primary-color': 'green' },
		}
	}),
);

配置结束后，就不用在组件里亲自引入样式了，即删除：import ‘antd/dist/antd.css’

总结

随着技术的发展与成熟，出现了很多很多组件库，上面只是举了两个例子，有其他的也可也使用，使用方式都大同小异，去官网看看，先安装 再引用 再使用，三个步骤解决