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 將處理簡潔搜索功能所需的所有困難算法功能，並為您提供一種可以讓用戶日復一日地回來的搜索平台。 有時，任何項目最重要的功能是搜索功能； 這就是您的用戶與您的內容進行交互的方式。