英文 | https://javascript.plainenglish.io/eleven-libraries-to-take-your-react-app-up-a-notch-570c11923738
翻譯 | 楊小二
你可以開始使用所有以下劃線 ( _)開頭的內置函數。下面是一個例子：
_.chunk(array, size)_.chunk(['a', 'b', 'c', 'd'], 2) _.chunk(['a', 'b', 'c', 'd'], 3)這些方法非常適合迭代數組、對象和字符串，操作和測試值，以及創建複合函數。
所有功能和文檔地址：https://lodash.com/docs/4.17.15
2、date-fns這個庫的標語是「It's like Lodash for Dates」和lodash類似，date-fns也有很多內置函數。無論你是嘗試轉換時區還是相互比較日期/時間，你都一定會從這個庫中找到一些用處。有超過 200 多種功能適用於所有場合。
要使用 date-fns，請找到你要查找的方法並像這樣導入它：
import { format, compareAsc } from 'date-fns' format(new Date(2014, 1, 11), 'MM/dd/yyyy') const dates = [ new Date(1995, 6, 2), new Date(1987, 1, 11), new Date(1989, 6, 10) ] dates.sort(compareAsc)文檔可以在這裡找到：https://date-fns.org/docs/Getting-Started/
3、react-icons使用react-icons可以 從十多個庫和數千個圖標中進行選擇，包括許多品牌徽標。最好的部分是圖標可以直接用作組件中的文本，因此，你不必像處理圖像一樣擔心 CSS 大小。
react-icons 利用 ES6 導入，你只需要導入你的項目正在使用的圖標即可，如下所示：
import { FaBeer } from 'react-icons/fa';function Question (){ return <h3> Lets go for a <FaBeer />? </h3>}搜索圖標並訪問文檔地址：https://react-icons.github.io/react-icons/
4、react-portal雖然很少使用Portal，但大多數 React 開發人員仍然熟悉它們。Portals 提供了一種流行的方式來將子組件渲染到存在於父組件的 DOM 層次結構之外的 DOM 節點中。
React 本身有一個內置的門戶創建器，但過程繁瑣，文檔可能有點密集。react-portal解決了這個問題。
要使用該庫，請使用標準 JavaScript 選擇器（如getElementById或 ）將 HTML 代碼中的門戶容器作為目標querySelector，然後就大功告成了。
import { Portal } from 'react-portal';<Portal> This text is portaled at the end of document.body!</Portal><Portal node={document && document.getElementById('new-york')}> This text is portaled into New York!</Portal>文檔地址：https://github.com/tajo/react-portal
5、react-calendar這是 React 應用程式的終極日曆應用程式。react-calendar支持幾乎所有語言，而且設置起來又快又容易。
有了數十種可能的模板，日曆可以根據你的需要進行定製。下面是一個react-calendar使用示例：
import React, { useState } from 'react';import Calendar from 'react-calendar';
function MyApp() { const [value, onChange] = useState(new Date());
return ( <div> <Calendar onChange={onChange} value={value} /> </div> );}查看現場演示：https://projects.wojtekmaj.pl/react-calendar/
訪問文檔地址：https://www.npmjs.com/package/react-calendar
6、react-tabsreact-tabs是一個易於訪問且可能是為 React 設置的最簡單的選項卡組件。它很簡單，其默認樣式可提供流暢的用戶體驗。
要實現，請使用下面的代碼作為起點。
import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';import 'react-tabs/style/react-tabs.css';
export default () => ( <Tabs> <TabList> <Tab>Title 1</Tab> <Tab>Title 2</Tab> </TabList>
<TabPanel> <h2>Any content 1</h2> </TabPanel> <TabPanel> <h2>Any content 2</h2> </TabPanel> </Tabs>);查看更多示例與查看文檔地址：https://reactcommunity.org/react-tabs/
7、react-sidebar如果你剛開始接觸編程或設計樣式並不是你的強項，那麼你就會知道創建導航菜單有多麼困難。react-sidebar為你簡化該過程。
根據你實現的自定義和事件處理功能，代碼可能會變得有點冗長。但你可以看演示地址：https://paulusschoutsen.nl/react-sidebar/example/#
以及查看完整文檔地址：https://github.com/balloob/react-sidebar#installation
8、react-credit-cards
如果你正在開發使用信用卡付款的電子商務應用程式，那麼這個庫特別適合你。react-credit-cards在用戶輸入信用卡憑證時提供視覺刺激。雖然設置可能需要一些時間，但我是一個有趣的動畫，肯定會改善用戶體驗。
如何實現與演示地址：https://www.npmjs.com/package/react-credit-cards
9、@stripe/react-stripe-js在信用卡主題方面，Stripe 在提供支付處理軟體和 API 的金融科技世界中享有盛譽，他們的 React 庫是大眾的最愛。如果你希望在你的應用程式中實現付款處理，請務必查看此處的文檔地址：https://stripe.com/docs/stripe-js/react10、react-toastify如今，使用alert()已經過時並且在用戶體驗方面沒有太大作用。相反，用於react-toastify創建 Toast 通知。它使用簡單，還有很多自定義選項。
下面是一個示例代碼塊：
import React from 'react';
import { ToastContainer, toast } from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css';
function App(){ const notify = () => toast("Wow so easy!");
return ( <div> <button onClick={notify}>Notify!</button> <ToastContainer /> </div> ); }檢查文檔，以及演示地址：https://fkhadra.github.io/react-toastify/introduction/
11、semantic-ui-react如果你想嘗試除 Bootstrap 之外的另一個樣式庫，那麼semantic-ui-react. 它是語義 UI的官方 React 集成，許多公司在日常工作中使用它。藉助大量內置功能，semantic-ui-react您可以通過向目標元素添加特定類來快速設計漂亮的 React 網站。
了解更多信息地址：ttps://react.semantic-ui.com/
綜上所述無論你是 React 的新手還是從它一開始就一直在使用它，你一定會在某個時候使用不同的庫。它們可以用於極大的優勢並幫助提升你的代碼。
在構建下一個 React 項目時，嘗試實現此處共享的庫之一。也許有一天你會設計開發一個自己的庫！
感謝你的閱讀，祝編程愉快！
學習更多技能
請點擊下方公眾號