2020 年面向 Web 开发人员的 18 个 React 组件

在短短几年内看到一个库像 React.js 那样起飞是非常罕见的。 当涉及到新版本、功能和开发时，该库实际上以光速加速； 有关最新的主要版本，请参见此处。 当然，有些人会争辩说不需要“框架”，但 React 不仅仅是一个框架，或者我们应该说“远低于”。 为什么？ 因为 React 是一个帮助构建反应式组件的库。 它不一定充当框架，但它会很高兴地在您使用的任何现有框架之上工作，无论是 Meteor 还是 Angular。

React 的现状现在看起来相当不错。 社区正在讨论新的可能性，一般来说，每个人都在忙于构建，而不是抱怨。 该库显然有效，并且具有巨大的潜力。 它现在需要的是更有经验的工程师和开发人员，他们可以构建一些肯定会脱颖而出的东西。 有很多开发人员喜欢对 React 进行“咆哮”。 但是，那些不这样做的人正忙于在世界上做出某种改变。

更多关于反应

React 很大程度上基于组件，并且组件可以重用！ 这意味着任何人都可以用 React 创建一些很酷的东西，并与开发者社区的其他成员分享。 而这正是正在发生的事情，尤其是在最近几年。 为了庆祝，我们觉得是时候把我们自己的 React 组件资源放在一起，这些资源将包含可用的、多功能的和功能性的 React 组件，您可以将这些组件集成到您想要启动的现有应用程序、网站或其他软件中在不远的将来。 我们还尝试尽可能独特并包含尽可能多的变体。 但是由于错误确实会发生，请与我们一起帮助创建这个最好的 React 组件综述，并与我们分享您自己最喜欢的组件，您无法想象没有这些组件将如何生活，谢谢！

材质界面

以防万一您没有在第一个组件中找到您想要的功能，这里是 Material-UI 库，它将 Google 的材料设计完全集成到您的 React 组件工作流程中。 该库的所有者对使用此框架和组件持开放态度，并鼓励您在赤裸裸地跳入这些泥泞的水域之前阅读材料设计的文档。 理解 React 和 Material design 在 Web 开发领域中的角色对于让它为你工作至关重要。

React 的温泉 UI

Onsen UI 是一组 React 组件，用于实现混合移动应用程序。 如果这是您最近一直在处理的事情，您最好考虑使用 Onsen UI 节省时间。 请记住，为了您的方便，该工具与 Android 和 iOS 兼容。 有 100 多个组件可供您使用，您知道您会找到适合您项目的正确组合。 它们都基于材料和平面设计。 此外，一切都以用户为中心，尽可能易于理解。

反应引导

React-Bootstrap 是一个使用 React 构建的 Bootstrap 4 组件包。 虽然您可以使用可用材料从头开始构建新项目，但您也可以将其集成到您现有的应用程序中。 当然，请确保您首先查看套件随附的综合文档，然后从那里开始。 还有一个选项是使用 React-Bootstrap 从 Bootstrap 转到 Bootstrap 4，但同样，帮自己一个忙，先阅读文档，这样执行会更加完美。 对于本地设置，Yarn 是可以解决问题的包管理器。 最后，如果您想为该项目做出贡献，您也可以。

反应工具箱

React Toolbox 是一组 Material Design 组件，可保证您立即启动您的项目。 毕竟，您不必独自完成整个繁重的工作。 相反，选择 React Toolbox 为您准备的即用型工具，并立即发挥作用。 说到组件，React Toolbox 具有应用栏、头像、自动完成、下拉、对话框、菜单、进度条、输入和堆等功能。 这个 React 组件库对开发人员来说会很好，这是一个保证。 详细的文档也非常方便，因为它展示了如何正确使用每个组件。

索环

当您迈向成功启动移动优先项目时，现在就享受 Grommet 的惊人之处。 即使您在多个应用程序上工作，这是 React 组件库，它可以发挥魔力，通过屋顶提升您的工作流程。 当然，一切都考虑到了响应性，所以最终的性能将是一流的。 您可以根据自己的喜好自由混合和匹配所有预定义元素，并相应地自定义它们。 无论是从事新项目还是改进现有项目，Grommet 都适用于这两种方法。 有大量积木可供您充分利用，所以现在就充分利用它们。

语义 UI 反应

顾名思义，Semantic UI React 是 Semantic UI 的官方 React 集成。 如果您需要深入了解安装说明和使用方法，请确保首先浏览官方产品登陆页面的所有部分并了解其要点。 Semantic UI React 的一些特性包含子组件、自动控制状态、速记道具、增强和声明式 API，仅举几例。 至于元素，你也得到了很多。 从按钮、标志和标题到输入、标签、加载器和显示，这些只是您可以获得的所有好东西中的一小部分。

反应桌面 | 用于 OS X El Capitan 和 Windows 10 的 React UI 组件

想要将 React 的甜蜜动作带到桌面吗？ 现在你可以了！ 尽管该库被标记为 BETA 项目，但如果更多的开发人员花宝贵的时间思考和调整库以使其最适合 Windows 10 和 Mac OS X 平台，那将会很有帮助。 毋庸置疑，它们中最有前途的特性是您可以使用 JavaScript 来组建您自己的桌面计算机可以从中受益的项目。 观察这个空间的发展也会很有趣。 很高兴看到技术正在超越基本的软件受限编程语言。 相反，我们也在学习将 Web 带到您的桌面。

Griddle - 反应网格组件

Griddle 是网格优化数据表的特性，它在浏览器之间实现高性能和无缝交互。 当我们第一次探索 Griddle 时，它​​看起来就像任何其他网格表项目一样。 但是经过仔细检查和理解，似乎 Griddle 的性能几乎优于任何其他网格表库。 它确实提供了众所周知的可以带入 Web 开发人员工作流程的高质量组件。 尝试玩这个演示，亲眼看看在浏览数据和调整搜索参数时交互有多流畅，周围都是很棒的东西。

反应绝对网格

网格也经常与它们的功能混淆。 它是网页中的特定元素，具有自己的样式和浏览器值。 通过使用外部库，我们可以使这些组件和元素更加灵活。 特别是，我们可以实现像 Absolute Grid 这样的库，并完全控制我们呈现给用户的元素网格。 您在此处查看的组件可以轻松配置为用于基于数据库值共享内容和组织的网站/平台。 非常多才多艺的库，一个真正的开发可能性的例子。

反应头像

如果你没听说过 Gravatar，那你肯定是最近两天才上线的，哈哈！ Gravatar 是集成到 WordPress 平台的默认用户头像平台。 现在，您可以通过使用 React Gravatar 组件库将所有这些令人惊叹的头像带到您更高级的项目中。 有了这个，组件将根据用户输入的电子邮件地址呈现用户正在使用的 Gravatar 头像。 将这些库放在手边真的很有帮助，以便推动为他们获取用户数据的全球化方面，而不是让他们手动完成。

反应旋转器

想要告诉您的用户他们正在尝试访问的页面仍在加载吗？ 也许您想在您的应用程序中添加一个微调器，使页面跳转过程更具交互性？ 节省一些时间，不必编写自己的微调器； 只需实现这个易于使用的组件。 它实际上不需要任何配置。

React Stripe Checkout 组件

Stripe 继续给每个人留下深刻印象； 客户、设计师、开发人员和整个技术社区。 一家真正重新定义了大型初创公司的工作方式以及初创公司如何改变世界的初创公司，即使它们没有谷歌市值那么大的资源。 Stripe 的 checkout 被数以百万计的平台使用，每天发送数十亿次请求。 如果您一直计划在您的 React 项目中使用 Stripe，请使用 React Stripe Checkout 组件直接加载 Stripe 的 Checkout 库作为 React 组件。 这将是在您的应用程序中使用 Stripe 的一个更加平滑的过渡。

React-Crouton

React.js 的消息传递组件——React Crouton。 如果您认为这是一个即时消息组件，请不要感到困惑，它不是。 这更像是一个消息组件，旨在以导航突出显示菜单的形式提供突出显示选项。 使用该组件，您可以根据用户请求的表单提交创建将在页面顶部显示给用户的消息。 我们已经可以预见电子邮件营销人员会为这个流畅且完美的库而疯狂。

ReactJS 的 SVG 加载器组件

SVG 毫无疑问越来越受欢迎，因为我们过渡到 Web 开发时代，在这个时代，性能得到了更多的关注和关注。 React InlineSVG 库将帮助您直接通过 React.js 加载 SVG 文件。 这使您可以编辑它们并为其设置样式，而无需在同一文档之间进行转换。

反应标签组件

一个 React 标签组件，您将能够在需要标签内容的任何类型的情况下实现。 观察 React 对知识库等平台变得有用的方式将会很有趣，这些平台以使用标签式内容更方便地呈现数据而闻名。 总体而言，这里是非常可靠的库，可在几秒钟内为您的内容添加选项卡交互。

反应可拖动

如果我们讨论的前几个可拖动组件对您没有吸引力，并且您正在寻找更原始和独特的东西，那么试试 React Draggable； 这是尽可能原生的。 通过可拖动功能公开您的内容，并创建一些让用户负责内容对他的显示方式的内容。 目前，演示没有显示固定的拖动功能。 但是有了一点 React 魔法，你应该很快就能达到那个功能。

用于 React.js 的 Google reCAPTCHA

垃圾邮件发送者认为他们变得越来越聪明，但谷歌的 reCAPTCHA 确实经受住了现代验证码系统和试图破坏该系统的机器人的挑战。 reCAPTCHA 是保护您的提交表单数据免受垃圾邮件发送者攻击的可靠替代方案。 请记住，您需要创建一个 reCAPTCHA 帐户并获取 API 密钥。 这样，您就可以充分利用该组件的潜力。

Elasticsearch 的 UI 组件

Searchkit 是流行的 Elasticsearch 的 UI 组件集合。 现在，您可以改变您的搜索体验并使其真正现代化。 如果您喜欢构建电影网站，Searchkit 将处理简洁搜索功能所需的所有困难算法功能，并为您提供一种可以让用户日复一日地回来的搜索平台。 有时，任何项目最重要的功能是搜索功能； 这就是您的用户与您的内容进行交互的方式。