8个增强日常UI元素的React JavaScript片段React是Facebook的一个开源JavaScript库，

React是Facebook的一个开源JavaScript库，可以用来构建用户界面。它的使用已经像野火一样蔓延。你不仅会在滚动浏览社交网络时看到它，而且它还被集成到WordPress等流行的软件应用中。

React的特点是它能够创建高度互动、数据驱动的用户界面，而且速度惊人。对终端用户来说，它们显得自然和无缝，接续了AJAX的不足。

开发人员正在将这些能力很好地利用起来。他们经常使用日常元素，如购物车、表单和多媒体，并将它们推向另一个层次。

想看看React对用户界面的影响吗？这里有一些主要的例子来证明这个库的能力。

洁净的产品布局

电子商务可以真正从React所提供的东西中受益。看看这个虚构的鞋店吧。它没有使用传统的表单元素，而是提供了一个现代和多彩的用户界面。其结果是，购物者可以有风格地定制他们的订单。

在这里，React被用来为标准的复选框带来更强的外观和更高层次的背景。这些元素很突出，同时有助于引导用户。

我们之前提到React有效处理数据的能力，这就是一个完美的例子。输入你的GitHub用户名，这个片段就会迅速加载到你的个人资料中。同样地，这种类型的功能也可以用来极大地改善网站的搜索功能。

请参阅Simon Vrachliotis的PenReactJS：GitHub用户卡

用户注册表格可能是一种痛苦。你怎样才能确保用户遵循你所设定的安全准则？这个表格的设计是为了帮助使这些期望变得清晰明了。当准则被满足时，它们会立即从表格下方的列表中划掉。

查看Sasha的PenUI + React

在线日历和日期选择器往往是有点乏味的。它们经常被笨拙的用户界面所困扰，使用户更难与之互动。然而，这个日期范围选择器是一股清新的空气。点击你想要的范围内的第一个日期，然后点击最后一个。就这么简单。

数据的可视化是React的真正优势之一。为了证明这一点，请看这个令人难以置信的储蓄目标进度图片段。它提供了一个清晰的视觉表现，说明你离你的目标有多远。不仅如此，它是完全互动的。你可以添加到你的总数，甚至调整目标。进度指标会自动沿途改变。

查看笔式储蓄目标--Kelly H的ReactJS

这个片段超越了以往。当然，在你的页面上抛出一个文件链接列表是可能的。但如果你能用一个华丽的React音频播放器全力以赴，为什么还要满足于此？它直观的用户界面是让你的访问者收听的完美方式。

这里有一个简化界面的好方法。这个服务清单允许用户通过点击来添加/删除项目，并看着他们的总数立即更新。这种体验看起来非常自然。

查看Olga的PenReact价格表

这些片段的共同点是它们如何将日常的网络UI变成更好的东西。即使视觉元素已经到位，React也能使用户的体验更加愉悦。

其结果是一个快速的界面，只是工作。而通过增加元素的直观性，你也可能增加转换率。这是一个相当强大的东西。

如果你想看更多React的实例，请查看我们的CodePen集合。