[toc]
组件库介绍
- arco.design: arco.design/
- Material UI: mui.com/
- Ant Design: ant.design/
- Semi Design: semi.design/
- TDesign: www.tdesign.web.tr/
- Fluent UI: developer.microsoft.com/en-us/fluen…
- Bootstrap: getbootstrap.com/
- Element: element-plus.org/#/en-US
- View Design: www.iviewui.com/
- Blueprint: blueprintjs.com/
- Chakra UI: chakra-ui.com/
- Evergreen: evergreen.segment.com/
- Grommet: grommet.io/
- Materialize: materializecss.com/
- PrimeReact: www.primefaces.org/primereact/
- Quasar: quasar.dev/
- Rebass: rebassjs.org/
- Semantic UI: semantic-ui.com/
- Shards: designrevision.com/downloads/s…
- Tailwind CSS: tailwindcss.com/
- Vuetify: vuetifyjs.com/
- W3.CSS: www.w3schools.com/w3css/
- Bulma: bulma.io/
- Carbon Design System: www.carbondesignsystem.com/
- Foundation: foundation.zurb.com/
- Ionic Framework: ionicframework.com/
- Material Design Lite: getmdl.io/
- Onsen UI: onsen.io/
- Spectre.css: picturepan2.github.io/spectre/
- UIKit: getuikit.com/
- UIkit for React: uiwjs.github.io/react-uikit…
- UIkit 3 for Vue.js: uikitvue.tkompare.com/
- Vuesax: vuesax.com/
- Wijmo: www.grapecity.com/wijmo
- Base Web: baseweb.design/
- Material Design for Bootstrap: mdbootstrap.com/
- MUI (formerly MUI CSS): www.muicss.com/
- Office UI Fabric: developer.microsoft.com/en-us/fabri…
- Phosphor Icons: phosphoricons.com/
- Reakit: reakit.io/
- Semantic-UI-React: react.semantic-ui.com/
- Shiny: shiny.rstudio.com/
- Tachyons: tachyons.io/
- Theme UI: theme-ui.com/
- Tippy.js: atomiks.github.io/tippyjs/
常用组件的官方命名
- 按钮(Button)
- 文本框(Input)
- 复选框(Checkbox)
- 单选框(Radio)
- 下拉菜单(Dropdown)
- 滑块(Slider)
- 日期选择器(Date picker)
- 时间选择器(Time picker)
- 表格(Table)
- 标签页(Tabs)
- 对话框(Dialog)
- 警告框(Alert)
- 消息框(Message)
- 进度条(Progress bar)
- 菜单(Menu)
更多控件的名字可以看 ftium4.com/categories/…
编写前端项目时一些好用的插件
- babel-plugin-import 按需加载需要的组件或模块，从而减小打包的文件大小
- react-lazyload - 延迟加载图片或组件
- react-loadable - 以组件为单位按需加载
- dynamic-import-webpack - 在 Webpack 中实现动态 import
- chunk-names-plugin - 自定义 Webpack chunk 名称
- loadable-components - 基于 react-loadable 的高阶组件
- react-async-component - 支持异步加载组件的高阶组件
- react-universal-component - 支持服务端渲染的高阶组件
- style-resources-loader - 全局注入 Sass/Less 变量和 mixin
- babel-plugin-styled-components - 优化 styled-components 的性能
- react-helmet - 管理文档头信息
- react-redux-loading-bar - 显示 Redux 异步加载状态的进度条
- react-intl - 国际化和本地化支持
- react-transition-group - 实现复杂动画过渡效果
- react-axe - 可访问性检测工具
- react-final-form - 简化表单处理逻辑
- react-beautiful-dnd - 实现拖放交互
- react-dnd - 实现高级拖放交互
- react-router - 前端路由管理
- react-hoc-utils - 高阶组件工具库
- react-native-fast-image - 高性能的图片加载组件
- react-i18next - React 中的国际化方案
- react-pdf - 在 React 应用中渲染 PDF 文档
- redux-persist - Redux 状态持久化
- immer - 优雅地更新不可变数据结构
- react-select - 下拉选择框组件
- react-virtualized - 高性能的虚拟化列表组件
- lodash-webpack-plugin - 按需加载 Lodash 模块
- react-window - 可滚动区域的高性能列表和网格组件
- react-spring - 高性能的动画库
- react-draft-wysiwyg - 基于 Draft.js 的富文本编辑器组件
- react-image-gallery - 显示图片集的组件
- react-player - 播放音频和视频的组件
- react-tooltip - 显示工具提示的组件
- react-google-maps - 在 React 应用中使用 Google 地图
- react-icons - 包含一系列图标库的组件
- react-datepicker - 日期选择器组件
- react-draggable - 可拖拽元素的组件
