ReactEasyUI 是一个基于 React 的常用组件库,封装了日期、列表、图表等常见使用场景,由 易车前端团队 倾力打造。
官方网站:https://reacteasyui.github.io
ReactEasyUI 依赖于 React,若未安装 React,须先 安装 React。
然后安装 ReactEasyUI。
npm install reacteasyui --save-dev
ReactEasyUI 组件样式依赖 Bootstrap 与 ReactEasyUI.css。
<link src="../css/lib/bootstrap/3.3.5/bootstrap.min.css" rel="stylesheet">
<link src="../css/lib/ReactEasyUI.css" rel="stylesheet">
lib.js
集成了 ReactEasyUI 需要的 jQuery.js(1.12.2+)、bootstrap.js(3.3.5+)、jsfunction.js 三个文件,echarts.js 在图表组件中需要。
<script href="../js/lib/lib.js"><script>
<script href="../js/lib/echarts.js"><script>
通过如下方式引入 React 与 ReactEasyUI。
import React from 'react';
import * as RE from 'reacteasyui';
然后就可以通过 <RE.PluginName />
的方式来使用 ReactEasyUI 组件了,例如使用 SwitchBtn 组件,则代码如下。
<RE.SwitchBtn
name="clue_time"
text={["On","Off"]}
active="true"
/>
具体组件的使用方法,请查看组件文档页面。
ReactEasyUI 组件库包含多种常用组件,如 基础组件
、日期组件
、表格组件
、图表组件
、进度与比例图组件
等。
ReactEasyUI 源码包含有预先编译的 CSS、JavaScript 和图标字体文件,以及 SASS、JavaScript 和文档的源码,主要文件结构如下:
ReactEasyUI/
├─ src/
├── css/plugin/
│ ├── Base
│ │ ├── AutoComplete.scss
│ │ ├── FreeCheckBox.scss
│ │ └── TextWithCount.scss
│ ├── Date
│ │ ├── AppCalendar.scss
│ │ ├── Calendar.scss
│ │ ├── DateChooser.scss
│ │ └── DateRangePicker.scss
│ ├── ECharts
│ │ └── LineAndPopupChart.scss
│ ├── List
│ │ └── Table.scss
│ ├── Progress
│ │ ├── Compare.scss
│ │ ├── ProgressBar.scss
│ │ └── Ring.scss
├── js/plugin/
│ ├── Base
│ │ ├── AutoComplete.jsx
│ │ ├── DelIconInput.jsx
│ │ ├── FreeCheckBox.jsx
│ │ └── TextWithCount.jsx
│ ├── Cloud
│ │ └── Cloud.scss
│ ├── Date
│ │ ├── AppCalendar
│ │ ├── DateRangePicker
│ │ ├── Calendar.jsx
│ │ └── DateChooser.jsx
│ ├── ECharts
│ │ ├── Chart.jsx
│ │ ├── DoubleYLineChart.jsx
│ │ ├── HorizontalBar.jsx
│ │ ├── Line.jsx
│ │ ├── LineAndPopupCharts.jsx
│ │ ├── MapChart.jsx
│ │ ├── MultipleBar.jsx
│ │ ├── Pie.jsx
│ │ ├── PieAndLineChart.jsx
│ │ ├── PieWithLabel.jsx
│ │ ├── Scatter.jsx
│ │ ├── SimpleBar.jsx
│ │ └── VerticalBar.jsx
│ ├── List
│ │ └── Table.jsx
│ ├── Progress
│ │ ├── Compare.jsx
│ │ ├── Loading.jsx
│ │ ├── PieChart.jsx
│ │ ├── Progress.jsx
│ │ ├── ProgressBar.jsx
│ │ ├── ProgressChart.jsx
│ │ └── Ring.jsx
├── images/
├─ dev/
└─ build/
css/
、js/
和 font/
目录分别包含了 CSS、JS 和字体图标的源码。dev/
目录包含了预编译 ReactEasyUI 包内的所有文件。js/plugin/
包含了所有文档的源码文件,js/component/
目录是 ReactEasyUI 提供的实例工程。