英文 | https://javascript.plainenglish.io/eleven-libraries-to-take-your-react-app-up-a-notch-570c11923738

翻譯 | 楊小二

1、Lodash

import _ from "lodash"

你可以開(kāi)始使用所有以下劃線 ( _)開(kāi)頭的內(nèi)置函數(shù)。下面是一個(gè)例子：

_.chunk(array, size)// Creates an array of elements split into groups the length of size. If array can't be split evenly, the final chunk will be the remaining elements._.chunk(['a', 'b', 'c', 'd'], 2)      // => [['a', 'b'], ['c', 'd']]_.chunk(['a', 'b', 'c', 'd'], 3)      // => [['a', 'b', 'c'], ['d']]

這些方法非常適合迭代數(shù)組、對(duì)象和字符串，操作和測(cè)試值，以及創(chuàng)建復(fù)合函數(shù)。

所有功能和文檔地址：https://lodash.com/docs/4.17.15

2、date-fns

這個(gè)庫(kù)的標(biāo)語(yǔ)是“It's like Lodash for Dates”和lodash類(lèi)似，date-fns也有很多內(nèi)置函數(shù)。無(wú)論你是嘗試轉(zhuǎn)換時(shí)區(qū)還是相互比較日期/時(shí)間，你都一定會(huì)從這個(gè)庫(kù)中找到一些用處。有超過(guò) 200 多種功能適用于所有場(chǎng)合。

要使用 date-fns，請(qǐng)找到你要查找的方法并像這樣導(dǎo)入它：

import { format, compareAsc } from 'date-fns'  format(new Date(2014, 1, 11), 'MM/dd/yyyy')        //=> '02/11/2014'  const dates = [    new Date(1995, 6, 2),    new Date(1987, 1, 11),       new Date(1989, 6, 10)    ] dates.sort(compareAsc) //=> [ //     Wed Feb 11 1987 00:00:00, //     Mon Jul 10 1989 00:00:00, //     Sun Jul 02 1995 00:00:00 // ]

文檔可以在這里找到：https://date-fns.org/docs/Getting-Started/

3、react-icons

使用react-icons可以 從十多個(gè)庫(kù)和數(shù)千個(gè)圖標(biāo)中進(jìn)行選擇，包括許多品牌徽標(biāo)。最好的部分是圖標(biāo)可以直接用作組件中的文本，因此，你不必像處理圖像一樣擔(dān)心 CSS 大小。

react-icons 利用 ES6 導(dǎo)入，你只需要導(dǎo)入你的項(xiàng)目正在使用的圖標(biāo)即可，如下所示：

import { FaBeer } from 'react-icons/fa';function Question (){    return <h3> Lets go for a <FaBeer />? </h3>}

搜索圖標(biāo)并訪問(wèn)文檔地址：https://react-icons.github.io/react-icons/

4、react-portal

雖然很少使用Portal，但大多數(shù) React 開(kāi)發(fā)人員仍然熟悉它們。Portals 提供了一種流行的方式來(lái)將子組件渲染到存在于父組件的 DOM 層次結(jié)構(gòu)之外的 DOM 節(jié)點(diǎn)中。

React 本身有一個(gè)內(nèi)置的門(mén)戶創(chuàng)建器，但過(guò)程繁瑣，文檔可能有點(diǎn)密集。react-portal解決了這個(gè)問(wèn)題。

要使用該庫(kù)，請(qǐng)使用標(biāo)準(zhǔn) JavaScript 選擇器（如getElementById或 ）將 HTML 代碼中的門(mén)戶容器作為目標(biāo)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 應(yīng)用程序的終極日歷應(yīng)用程序。react-calendar支持幾乎所有語(yǔ)言，而且設(shè)置起來(lái)又快又容易。

有了數(shù)十種可能的模板，日歷可以根據(jù)你的需要進(jìn)行定制。下面是一個(gè)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>  );}

查看現(xiàn)場(chǎng)演示：https://projects.wojtekmaj.pl/react-calendar/

訪問(wèn)文檔地址：https://www.npmjs.com/package/react-calendar

6、react-tabs

react-tabs是一個(gè)易于訪問(wèn)且可能是為 React 設(shè)置的最簡(jiǎn)單的選項(xiàng)卡組件。它很簡(jiǎn)單，其默認(rèn)樣式可提供流暢的用戶體驗(yàn)。

要實(shí)現(xiàn)，請(qǐng)使用下面的代碼作為起點(diǎn)。

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

如果你剛開(kāi)始接觸編程或設(shè)計(jì)樣式并不是你的強(qiáng)項(xiàng)，那么你就會(huì)知道創(chuàng)建導(dǎo)航菜單有多么困難。react-sidebar為你簡(jiǎn)化該過(guò)程。

根據(jù)你實(shí)現(xiàn)的自定義和事件處理功能，代碼可能會(huì)變得有點(diǎn)冗長(zhǎng)。但你可以看演示地址：https://paulusschoutsen.nl/react-sidebar/example/#

以及查看完整文檔地址：https://github.com/balloob/react-sidebar#installation

8、react-credit-cards

如果你正在開(kāi)發(fā)使用信用卡付款的電子商務(wù)應(yīng)用程序，那么這個(gè)庫(kù)特別適合你。react-credit-cards在用戶輸入信用卡憑證時(shí)提供視覺(jué)刺激。雖然設(shè)置可能需要一些時(shí)間，但我是一個(gè)有趣的動(dòng)畫(huà)，肯定會(huì)改善用戶體驗(yàn)。

如何實(shí)現(xiàn)與演示地址：https://www.npmjs.com/package/react-credit-cards

9、@stripe/react-stripe-js

在信用卡主題方面，Stripe 在提供支付處理軟件和 API 的金融科技世界中享有盛譽(yù)，他們的 React 庫(kù)是大眾的最?lèi)?ài)。如果你希望在你的應(yīng)用程序中實(shí)現(xiàn)付款處理，請(qǐng)務(wù)必查看此處的文檔地址：https://stripe.com/docs/stripe-js/react

10、react-toastify

如今，使用alert()已經(jīng)過(guò)時(shí)并且在用戶體驗(yàn)方面沒(méi)有太大作用。相反，用于react-toastify創(chuàng)建 Toast 通知。它使用簡(jiǎn)單，還有很多自定義選項(xiàng)。

下面是一個(gè)示例代碼塊：

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 之外的另一個(gè)樣式庫(kù)，那么semantic-ui-react. 它是語(yǔ)義 UI的官方 React 集成，許多公司在日常工作中使用它。借助大量?jī)?nèi)置功能，semantic-ui-react您可以通過(guò)向目標(biāo)元素添加特定類(lèi)來(lái)快速設(shè)計(jì)漂亮的 React 網(wǎng)站。

了解更多信息地址：ttps://react.semantic-ui.com/

綜上所述

無(wú)論你是 React 的新手還是從它一開(kāi)始就一直在使用它，你一定會(huì)在某個(gè)時(shí)候使用不同的庫(kù)。它們可以用于極大的優(yōu)勢(shì)并幫助提升你的代碼。

在構(gòu)建下一個(gè) React 項(xiàng)目時(shí)，嘗試實(shí)現(xiàn)此處共享的庫(kù)之一。也許有一天你會(huì)設(shè)計(jì)開(kāi)發(fā)一個(gè)自己的庫(kù)！

感謝你的閱讀，祝編程愉快！

學(xué)習(xí)更多技能

請(qǐng)點(diǎn)擊下方公眾號(hào)