选择16个可以快速实现良好用户界面的React组件库

1 年 ago
新, 韵
4 minutes

至今，开发者为了实现“快速、体面的用户界面”，倚靠类似Bootstrap的CSS框架。

然而，现在我们开始使用像React这样的库将UI组件化。即使是在React中，我们可以预先加载CSS框架并通过添加类名来像以前一样使用它们。然而，由于现有的CSS框架经常在内部使用jQuery，所以必须要么让React和jQuery共存，要么自己实现jQuery的部分。

于是，我开始逐一调查在React中能够快速创建具有适当用户界面的React组件集。

注意：这只包含面向 Web 的 UI 组件。不包括针对混合应用程序/移动 Web 应用程序的 UI，如 React Native 或 Onsen UI。

选择 16 个 React 组件集合

React 组件集是一套将 UI 部件（例如 Button 和 Form）转化为 React 组件，并以集合形式提供的工具。
大多数情况下，通过在 React 组件中进行导入，可以在渲染函数内使用。

在中文中我们把它称为 React 组件集或者 React UI 库。

这两个组件库被归类为“基于 React 的 React 组件库”和“通过移植现有的 CSS 制作的 React 组件库”。加粗的部分是相对维护得较好，个人推荐的选项。

    • React を前提とした React コンポーネントセット

material-ui
react-toolbox
rebass
belle
mui
grommet
elemental-ui

既存の CSS を移植した React コンポーネントセット

react-bootstrap
reactstrap
react-mdl
material-design-react
react-materialize
react-uikit-components
uikit-react
react-semantify
react-semantic-ui

基于 React 的 React 组件集合。

这些是专门为React设计的组件，或者是官方提供支持的组件。
它们都是为React开发而设计的，因此可以通过传递props来自定义组件，使用CSS Modules来覆盖样式，并考虑了服务器端渲染。

如果你不拘泥于现有的CSS框架，那么从这里选择似乎是个不错的选择。

材料用户界面

screenshot-www.material-ui.com 2016-07-10 19-56-03.png
    • official sites: http://www.material-ui.com/

github: https://github.com/callemall/material-ui

npm: https://www.npmjs.com/package/material-ui

status: in development (v0.15.2)

这是一个根据Google Material Design准则创建的React组件集。在日本有许多人使用它，信息量也很丰富，因此非常易于使用。 组件的种类丰富，并且质量很高，还考虑了服务器端渲染，并提供了主题和颜色调色板等，给人一种安心感。

反应工具

screenshot-react-toolbox.com 2016-07-10 19-59-36.png
    • official sites: http://react-toolbox.io/

github: https://github.com/react-toolbox/react-toolbox

npm: https://www.npmjs.com/package/react-toolbox

status: Stable (v1.0.1)

这个 React 组件库与 material-ui 一样，符合Google Material Design 的设计指南。
无论是组件的种类还是主题和色彩调色板，都与material-ui 相当。

material-ui 和 react-toolbox 最大的区别在于 CSS 的管理方式。
material-ui 使用内联样式编写，而 react-toolbox 则使用 CSS Modules 导入由 sass 编写的样式。

注意：使用CSS Modules时，如果存在现有的原始CSS，可以将其导入到React组件中。如果您有兴趣，请务必阅读以下文章：《使用React进行模块化CSS：CSS-in-JS和CSS模块》http://postd.cc/modular-css-with-react/

低音 – dī

screenshot-jxnblk.com 2016-07-10 20-01-25.png
    • official sites: http://jxnblk.com/rebass/

github: https://github.com/jxnblk/rebass

npm: https://www.npmjs.com/package/rebass

status: in development (v0.3.0)

这是一个使用 React Context 实现主题切换的 React 组件集。您可以像添加选项一样设置字体、颜色以及间距等，具有相当大的自由度。当您试用演示时，可能会更好地理解。

使用框架会使得独特的外观变得更加困难，因此能够轻松改变外观是很好的。

美丽的

screenshot-nikgraf.github.io 2016-07-10 20-02-22.png
    • official sites: http://nikgraf.github.io/belle/

github: https://github.com/nikgraf/belle

npm: https://www.npmjs.com/package/belle

status: Stable (v2.0.7)

尽管种类不是特别多，但我们提供简单且扁平的 React 组件。
虽然给组件传递的属性相对较多，但使用感觉上与 material-ui 并没有太大差别。

很抱歉，但您提供的内容不足以进行重述。请提供更多的具体信息，以便我能够理解并为您提供准确的翻译。谢谢。

screenshot-www.muicss.com 2016-07-10 20-03-04.png
    • official sites: https://www.muicss.com/

github: https://github.com/muicss/mui

npm: https://www.npmjs.com/package/muicss

status: in development (v0.6.5)

这是一个符合Google Material Design指南的轻量级CSS框架。它官方支持React和Angular，并且还提供CSS (LESS)。

我们的目标是提供基本组件和辅助功能，目前组件的种类并不是很多。然而，我们不仅仅希望能在Web上使用，还希望能够统一在移动端、邮件、iOS和Android平台上使用。我们也提供了适用于邮件的组件和适用于Sketch的设计文件。

根据路线图，可以期待在v1之前获得各种组件，这令人兴奋。

熟练点小顺间暂停。

screenshot-www.grommet.io 2016-07-10 20-03-52.png
    • official sites: http://www.grommet.io/docs/

github: https://github.com/grommet/grommet

npm: https://www.npmjs.com/package/grommet

status: in development (v0.6.9)

这是一个专为企业用户设计的高质量用户体验框架。它是基于React开发的，但更多地是为设计师而不是开发者设计的，并提供了Sketch / Illustrator / Axure / Balsamiq用的设计文件。该框架提供了各种各样的组件，包括一些罕见的组件，如Map、Meter、Number Input、SocialShare、Value、Video、WorldMap等。

原子-ui

screenshot-elemental-ui.com 2016-07-10 20-04-25.png
    • official sites: http://elemental-ui.com/

github: https://github.com/elementalui/elemental

npm: https://www.npmjs.com/package/elemental

status: in development (v0.5.14)

这是在Keystone.js CMS平台上使用的React组件集。
这个轻量级库提供了类似于Bootstrap的基本组件，例如Button和Form。
它似乎是从Keystone.js中剥离出来的，并且仍处于实验阶段。

将已有的 CSS 移植到 React 组件集中。

这个功能是将现有的 CSS 以 React 组件的形式提供。
为了使用，需要预先加载原始的 CSS/JavaScript 或者稍作修改以适应 React 组件的 CSS/JavaScript。

如果可以独立使用CSS，那么在使用React进行渲染的页面和不使用React进行渲染的页面之间，可以使用共同的UI，这可能是一个优点。

然而，有些情况下，它们可能不支持原始 CSS 框架的某些部分，或者依赖于 jQuery。

注意：如果您非常希望使用依赖于jQuery的框架，以下网站可能会给您提供一些建议。

React 共存 jQuery 的方法：http://recruit.gmo.jp/engineer/jisedai/blog/react-with-jquery/

响应式引导程序

screenshot-react-bootstrap.github.io 2016-07-10 20-04-52.png
    • official sites: http://react-bootstrap.github.io/

github: https://github.com/react-bootstrap/react-bootstrap

npm: https://www.npmjs.com/package/react-bootstrap

status: in development (v0.29.5)

這是 Bootstrap 的 React 組件套件。Bootstrap 提供了豐富的組件，幾乎不需要 jQuery 的依賴就可以使用。
目前正在開發第一版，所以需要注意，可能會有重大變化。
不過，由於社群規模很大且已經相當成熟，所以我認為它是相對穩定的。

reactstrap 可以被理解为React的一个可复用UI组件库，使得构建Web应用程序变得更加简单和高效。

screenshot-reactstrap.github.io 2016-07-10 20-05-30.png
    • official sites: https://reactstrap.github.io/

github: https://github.com/reactstrap/reactstrap/

npm: https://www.npmjs.com/package/reactstrap

status: Stable (v1.5.0)

這是針對希望使用 Bootstrap 4 的人所設計的 React 組件集。雖然內含一些常用組件，但相較於 react-bootstrap，數量仍然相對較少。由於 Bootstrap 4 本身仍然處於 alpha 版本，因此不太推薦使用⋯⋯。

react-mdl 可以用原生的方式进行汉语转述：应对材料设计。

screenshot-tleunen.github.io 2016-07-10 20-06-22.png
    • official sites: https://tleunen.github.io/react-mdl/

github: https://react-mdl.github.io/react-mdl/

npm: https://www.npmjs.com/package/react-mdl

status: Stable (v1.6.1)

谷歌开发的Material Design Lite的React组件集。
想要使用材料设计的人，请点击这里。

材料设计React

    • github: https://github.com/nikvm/material-design-react

npm: https://www.npmjs.com/package/material-design-react

status: in development (v0.2.1)

请看Google制作的Material Design Lite的React组件集。这里是暂停中。请查看https://github.com/tleunen/react-mdl，以获取更完整的实现，遵循相似的目标。他们希望您参考react-mdl。

响应材料化

screenshot-react-materialize.github.io 2016-07-10 20-07-37.png
    • official sites: https://react-materialize.github.io/

github: https://github.com/react-materialize/react-materialize

npm: https://www.npmjs.com/package/react-materialize

status: in development (v0.14.4)

这是一个基于 React 的组件集，名为 materialize。
与 Material Design Lite 类似，我觉得这是一个代表性的材料设计 CSS 框架。
然而，它似乎依赖于 jQuery…如果你喜欢这个外观，也许可以考虑使用它。

响应式UI工具组件

screenshot-otissv.github.io 2016-07-10 20-08-20.png
    • official sites: http://otissv.github.io/react-uikit-components/

github: https://github.com/otissv/react-uikit-components

npm: https://www.npmjs.com/package/react-uikit-components

status: Stable (v1.2.0)

这个 React 组件集是基于 UIkit 的。由于组件和帮助器都非常全面，所以使用起来应该不会遇到什么问题的印象。

此外，每个组件都被拆分到了 react-uikit-* 中（例如，按钮组件位于 react-uikit-button 中）。
我认为这使得可以仅使用部分组件，并且源代码也更易于追踪，这也是一个优点。

UIKit-React 组件库

screenshot-uikit-react.firebaseapp.com 2016-07-10 20-08-59.png
    • official sites: https://uikit-react.firebaseapp.com/

github: https://github.com/stipsan/uikit-react

npm: https://www.npmjs.com/package/uikit-react

status: in development (v0.0.10)

一个基于React的UIkit组件集。
由于仍处于alpha版本，所以在Github上有警告。
由于文档还很少，所以暂时建议使用前面提到的react-uikit-components。

以自然语义反应

screenshot-jessy1092.github.io 2016-07-10 20-09-35.png
    • official sites: http://jessy1092.github.io/react-semantify/

github: https://github.com/jessy1092/react-semantify

npm: https://www.npmjs.com/package/react-semantify

status: in development (v0.5.1)

语义化的 React 组件集合。
需要注意它似乎依赖于 jQuery，请注意。由于组件仍然有很多预发布版本，所以我们期待未来的更新。

反应语义化用户界面

    • github: https://github.com/jhudson8/react-semantic-ui

npm: https://www.npmjs.com/package/react-semantic-ui

status: in development (v0.2.0)

这个项目的目的不是完全重现每个semantic-ui组件，而是有意义的地方和能够增加价值的地方用React组件来代替。

最后

由于大多数引介的内容仍然处于开发中，因此在使用时可能需要谨慎。然而，这些组件套装中也出现了足够稳定的选项，建议您一定要考虑一下。

此外，如果使用React组件集过于复杂，也可以考虑在React Components中寻找单一功能的组件作为一种选择。

请务必好好利用！享受吧！

请提供更多的上下文信息。

    • React＋CSSフレームワークを検討してみたよ http://qiita.com/usagi-f/items/9c675737ef44d0bfcb4e

5 ReactJS Application Frameworks to Get Your App Running Quickly http://www.gajotres.net/5-reactjs-application-frameworks-to-get-your-app-running-quickly/

React UI Libraries http://blog.webkid.io/react-ui-libraries/

Existing UI libraries to use with React.js? http://stackoverflow.com/questions/23380903/existing-ui-libraries-to-use-with-react-js

公開されているReact Componentを利用してみる http://qiita.com/koba04/items/2b11361d9e199cf279e2

✖
广告
将在 10 秒后关闭
bannerAds