十大ReactJS的最佳UI框架

本文概述

• 10. Blueprint
• 9. Belle
• 8. Office UI Fabric
• 7. React MD
• 6. React Boostrap
• 5. Elemental UI
• 4. Ant Design
• 3. React Toolbox
• 2. React Semantic UI
• 1. MaterialUI
• React Material Bootstrap

高质量用户界面的关键在于可以帮助你实现最佳图形用户界面的设计。有像我这样的开发人员, 他们为我的应用程序从头开始设计UI组件很糟糕。幸运的是, 对于像我们这样的人来说, 它们通常在后端工作, 并且由于某些原因必须与前端一起工作, 因此有许多很棒的框架可以帮助创建惊人的用户界面。如果你使用React来处理客户端代码, 尽管没有太多适合与React中的组件一起使用的框架, 但是仍然存在一些在所有已知CSS框架中都可以胜任的框架。

享受我们的10个最佳UI框架集合, 这些框架可用于令人敬畏的React.js框架。

10. Blueprint

Github

Blueprint是React UI组件的集合, 涵盖了Web上大多数常见的界面元素, 模式和交互。使用Blueprint可确保你最终获得一个优雅且易于使用的UI, 使你可以专注于构建产品, 而不是专注于构成产品的基本部分。一组可以直接使用的高质量通用组件可提高生产率, 并且通用设计概念和修饰符适用于所有组件。Blueprint是专为桌面应用程序而设计的, 因此尚未在移动Web浏览器上进行全面测试(iPad可以正常工作)。

9. Belle

Github

百丽为你提供了一组React组件, 例如Toggle, ComboBox, Rating, TextInput, Button, Card, Select等。所有组件均经过优化, 可在移动和台式设备上使用。样式可在两个级别上高度自定义。你可以配置所有组件的基本样式, 也可以分别修改其中的每个样式。

8. Office UI Fabric

Github

Fabric是用于构建无缝集成到Office和Office 365中的体验的官方前端框架。Fabric是用于Office加载项的官方UX设计框架。使用Fabric, 外接程序可以与Word, Excel, PowerPoint和Outlook无缝集成。 Fabric的强大, 最新组件是使用React框架构建的。浏览组件列表以查看使用Fabric React可用的构建基块。 Fabric的组件可帮助你快速, 轻松地获得类似于Office的按钮, 导航等。它们还包含其他功能, 可帮助你的应用程序像Office一样运行。

7. React MD

Github

React MD的目标是能够使用React Components和Sass创建一个完全可访问的材料设计风格的网站。使用Sass中的样式而不是内联样式, 可以很容易地使用现有样式创建自定义组件。文档网站可用于查看实时示例, 代码示例和常规prop文档。

6. React Boostrap

Github

React Bootstrap是为最流行的前端框架的React重建的。 React-Bootstrap是一个可重用的前端组件库。通过Facebook的React.js框架, 你将获得Twitter Bootstrap的外观, 但代码更简洁。 React-Bootstrap组件库试图遵循React.js的哲学, 即应该在单个位置定义单个功能。在组件页面上查看当前的React-Bootstrap库。

5. Elemental UI

Github

Elemental UI是用于React.js网站和应用程序的UI工具包。 Elemental UI的诞生是为了解决我们正在研究的项目中的实际需求, 并可以在node.js内容管理平台KeystoneJS中使用。 Elemental UI的目标是创建一组功能强大且不受限制的组件, 这些组件可单独使用或一起使用, 并具有不干扰的默认样式和灵活的主题功能。 Elemental旨在从npm安装, 并通过browserify或webpack内置到你的项目中。你也可以通过包含我们的LESS来对其进行自定义。

4. Ant Design

Github

Ant Design为Web应用程序提供了企业级UI设计语言, 并提供了一系列高质量的React组件。它用具有完整定义类型的TypeScript编写。它可以在现代浏览器和Internet Explorer 9+(使用polyfill)上运行, 并支持服务器端渲染。在开发过程中, 你可能需要编译和调试JSX和ES2015代码, 甚至将某些请求代理到模拟数据或某些外部服务。所有这些都可以通过热重新加载更改来提供快速反馈来完成。

3. React Toolbox

Github

React Toolbox是一组实现Google Material Design规范的React组件。它建立在一些最时尚的提议之上, 例如CSS模块(用SASS编写), Webpack和ES6。该库与你的Webpack工作流和谐地集成在一起, 易于定制且非常灵活。

默认情况下, React Toolbox使用CSS模块导入以SASS编写的样式表。如果要导入已经与CSS捆绑在一起的组件, 则模块捆绑器应能够要求这些SASS模块。

2. React Semantic UI

Github

语义UI React是语义UI的官方React集成。语义UI将单词和类视为可交换的概念。类使用自然语言(例如名词/修饰语关系, 词序和多种)的语法来直观地链接概念。语义使用称为行为的简单短语来触发功能。组件中的任何任意决定都包含为开发人员可以修改的设置。它配备了直观的继承系统和高级主题变量, 使你拥有完全的设计自由。它是完全免费的jQuery, 并使用易于遵循的声明性API。

1. MaterialUI

Github

MaterialUI是一组实施Google的材料设计指南的React组件。你可以查看2个入门项目。它们可以在examples文件夹中找到。这些项目是基本示例, 显示了如何在自己的项目中使用material-ui组件。第一个项目使用browserify进行模块捆绑, 并使用gulp进行JS任务自动化, 而第二个项目使用webpack进行模块捆绑和构建。你只需在项目目录中运行npm install material-ui, 然后使用所需的Material-UI组件, 即可在项目中包含Material-UI。

React Material Bootstrap

Bootstrap的React Material Bootstrap(MDB)是用于Bootstrap 4的免费, 功能强大的Material Design UI KIT。它是迄今为止创建的最全面的材料设计框架之一。它可用于不同的框架或库, 例如ReactJS, Vue.js, jQuery和Angular。 Material Bootstrap的React版本基于最新的Bootstrap 4和React 15.6.1, 这意味着绝对没有jQuery。拥有超过400多种材质UI元素, 600多种材质图标, 74个CSS动画, SASS文件以及更多组件, 广为人知的Material Bootstrap的React版本将确保在你的新项目中实现的UI选项列表中。

Shards React

Github

如果你从一开始就以Web开发人员的身份使用普通的jQuery和Bootstrap, 那么你肯定知道Shards, 这是精美而现代的Bootstrap 4 UI套件, 其中包含额外的模板和组件。 React版本的Shards具有与Shards相同的现代设计系统, 因此你可以通过流畅的微交互和美好的整体用户体验来打动你的用户。 Shards React提供了对Material和Fontawesome图标包的支持。它还包含了Shards中所有可用的自定义组件, 包括日期选择器, 范围滑块, 切换输入等等。

Shards React是GitHub上的开源软件, 可作为NPM软件包使用。但是, 你也可以在此处下载它并访问原始的核心文件, 以免动手并扩展套件以适合你的需要。

如果你知道另一个很棒的ReactJS开源UI框架, 请在评论框中与社区分享。