詳情：https://juejin.cn/post/7085558184252801061

此文為譯文，原文出自：

原作者：Amitav Mishra
原文鏈接：React Libraries for 2022^[2]
譯者：LBJ

React 出現(xiàn)已經(jīng)有一定的時(shí)間了。從那時(shí)起，圍繞組件驅(qū)動(dòng)的庫(kù)發(fā)展了一個(gè)全面而強(qiáng)大的庫(kù)生態(tài)系統(tǒng)。來(lái)自其他編程語(yǔ)言或庫(kù)/框架的開(kāi)發(fā)者通常很難弄清楚使用 React 創(chuàng)建 Web 應(yīng)用程序的所有庫(kù)。

從本質(zhì)上講，React 使用戶能夠使用函數(shù)組件^[3]創(chuàng)建組件驅(qū)動(dòng)的用戶界面。不過(guò)，它帶有幾個(gè)內(nèi)置的解決方案，例如，用于本地狀態(tài)、副作用和性能優(yōu)化的 React Hooks。但畢竟，你在這里只處理函數(shù)（組件和鉤子）來(lái)創(chuàng)建 UI。

以下文章將會(huì)為你如何選擇庫(kù)來(lái)構(gòu)建 React 應(yīng)用程序提供指導(dǎo)。

如何創(chuàng)建 React 項(xiàng)目^[4]
React 狀態(tài)管理^[5]
React 數(shù)據(jù)獲取^[6]
使用 React Router^[7]
React 中的 CSS 樣式^[8]
React UI 庫(kù)^[9]
React 動(dòng)畫庫(kù)^[10]
React 中的可視化和圖表庫(kù)^[11]
React 中的表單庫(kù)^[12]
React 類型檢查^[13]
React 代碼結(jié)構(gòu)：樣式和格式^[14]
React 驗(yàn)證^[15]
React 托管^[16]
React 中的測(cè)試^[17]
React 和不可變數(shù)據(jù)結(jié)構(gòu)^[18]
React 國(guó)際化^[19]
React中的富文本編輯器^[20]
React 中的支付^[21]
React 中的時(shí)間^[22]
React 桌面應(yīng)用程序^[23]
使用React進(jìn)行手機(jī)開(kāi)發(fā)^[24]
React VR/AR^[25]
React的原型設(shè)計(jì)^[26]
React 組件文檔^[27]

如何創(chuàng)建 React 項(xiàng)目

對(duì)于每個(gè)React初學(xué)者來(lái)說(shuō)，在加入React 時(shí)如何建立一個(gè)React項(xiàng)目都是未知的。有許多框架可供選擇。React社區(qū)的現(xiàn)狀是Facebook的create-react-app \(CRA\)^[28]。它的配置為零，并為你提供了一個(gè)極簡(jiǎn)的開(kāi)箱即用的React應(yīng)用程序。所有工具都對(duì)你隱藏，但你可以稍后更改工具（例如 eject 或 craco）。

繼續(xù)閱讀：了解為什么像React這樣的框架很重要^[29]

然而，現(xiàn)在CRA建立在過(guò)時(shí)的工具上——這導(dǎo)致了較慢的開(kāi)發(fā)體驗(yàn)。Vite^[30] 是時(shí)下最受歡迎的新產(chǎn)品之一，它的開(kāi)發(fā)和生產(chǎn)速度令人難以置信^[31]，而且有很多模板可供選擇(如React、React + TypeScript)。

如果你已經(jīng)熟悉 React，你可以選擇它最流行的（元）框架之一作為替代：Next.js^[32] 和 Gatsby.js^[33]。這兩個(gè)框架都建立在 React 之上，因此你應(yīng)該已經(jīng)熟悉 React 的基礎(chǔ)知識(shí)^[34]。這個(gè)領(lǐng)域另一個(gè)流行但更新的框架是 Remix^[35]，它在 2022 年絕對(duì)值得一試。

繼續(xù)閱讀：了解有關(guān)網(wǎng)站和 Web 應(yīng)用程序的更多信息^[36]

雖然Next.js最初用于服務(wù)器端渲染(例如動(dòng)態(tài)web應(yīng)用程序)，但Gatsby.js主要用于靜態(tài)站點(diǎn)（例如靜態(tài)網(wǎng)站，如博客和登陸頁(yè)面）。但是，在過(guò)去幾年中，兩個(gè)框架之間的線路都有模糊，因?yàn)?Next.js 允許你選擇加入靜態(tài)站點(diǎn)，而 Gatsby 允許你選擇加入服務(wù)器端渲染。在這個(gè)階段，我會(huì)說(shuō) Next.js 贏得了大多數(shù)用例的流行之戰(zhàn)。

繼續(xù)閱讀：如何創(chuàng)建現(xiàn)代 JavaScript 項(xiàng)目^[37]

如果你只是想了解像create-react-app這樣的工具在底層是如何工作的，試著自己從頭開(kāi)始創(chuàng)建一個(gè)React項(xiàng)目^[38]。你將從一個(gè)簡(jiǎn)單的HTML JavaScript項(xiàng)目開(kāi)始，自己添加React及其支持工具(如Webpack, Babel)。這不是你在日常工作中必須要處理的事情，但這是了解底層工具的一個(gè)很好的學(xué)習(xí)經(jīng)驗(yàn)。

建議：

Vite 用于客戶端 React 應(yīng)用程序

CRA 備選

Next.js 主要用于服務(wù)器端渲染的 React 應(yīng)用程序

前沿技術(shù)：Remix
Gatsby 用于靜態(tài)生成器備選

可選學(xué)習(xí)經(jīng)驗(yàn)：從頭開(kāi)始創(chuàng)建 React 項(xiàng)目

React 狀態(tài)管理

React自帶兩個(gè)內(nèi)置鉤子來(lái)管理本地狀態(tài):useState^[39]和useReducer^[40]。如果狀態(tài)需要全局管理，你可以選擇加入React內(nèi)置的useContext Hook^[41]，在不使用道具的情況下將道具從頂級(jí)組件傳遞到底層組件，從而避免了props drilling的問(wèn)題。

繼續(xù)閱讀：了解何時(shí)使用useState和useReducer^[42]

這三個(gè)React鉤子都能讓開(kāi)發(fā)者在React中實(shí)現(xiàn)強(qiáng)大的狀態(tài)管理，這些狀態(tài)管理可以通過(guò)React的useState/useReducer鉤子放在組件中，也可以通過(guò)與React的useContext鉤子結(jié)合在一起進(jìn)行全局管理。

繼續(xù)閱讀: 學(xué)習(xí)如何結(jié)合useState/useReducer和useContext^[43]

如果你發(fā)現(xiàn)自己過(guò)于頻繁地使用React的Context來(lái)處理共享/全局狀態(tài)，你一定要看看Redux^[44]，它是最流行的狀態(tài)管理庫(kù)。它允許你管理應(yīng)用程序的全局狀態(tài)，任何連接到其全局存儲(chǔ)的React組件都可以讀取和修改應(yīng)用程序的全局狀態(tài)。

繼續(xù)閱讀: 學(xué)習(xí)Redux^[45]

如果你碰巧使用Redux，你一定也應(yīng)該查看Redux Toolkit^[46]。它是Redux核心之上的一個(gè)很棒的API，極大地改善了開(kāi)發(fā)者使用Redux的體驗(yàn)。

作為替代方案，如果你喜歡全局store的總體概念，但不喜歡 Redux 的處理方式，請(qǐng)查看其他流行的本地狀態(tài)管理解決方案，例如 Zustand^[47]、Jotai^[48]、XState^[49] 或 Recoil^[50]。

建議：

useState/useReducer 用于共存或共享狀態(tài)
選擇使用 useContext 來(lái)啟用_一些_全局狀態(tài)

可選學(xué)習(xí)經(jīng)驗(yàn)：學(xué)習(xí)如何結(jié)合useState/useReducer和useContext

Redux(或另一種選擇)用于許多全局狀態(tài)

React 數(shù)據(jù)獲取

React的內(nèi)置鉤子非常適合UI狀態(tài)，但當(dāng)涉及到遠(yuǎn)程數(shù)據(jù)的狀態(tài)管理(因此也包括數(shù)據(jù)獲取)時(shí)，我建議使用一個(gè)專門的數(shù)據(jù)獲取庫(kù)，比如React Query^[51]，它自帶內(nèi)置的狀態(tài)管理功能。雖然React Query本身并不被看作是一個(gè)狀態(tài)管理庫(kù)，因?yàn)樗饕糜趶腶pi獲取你的遠(yuǎn)程數(shù)據(jù)，但它會(huì)為你處理這些遠(yuǎn)程數(shù)據(jù)的所有狀態(tài)管理(例如緩存，樂(lè)觀更新)。

繼續(xù)閱讀: 了解React Query是如何工作的^[52]

React Query是為使用REST api^[53]而設(shè)計(jì)的。然而，現(xiàn)在它也支持GraphQL^[54]。但是如果你正在為你的React前端尋找一個(gè)專用的GraphQL庫(kù)，可以選擇Apollo Client^[55](流行版)、urql^[56](輕量級(jí)版)或Relay^[57] (Facebook版)。

繼續(xù)閱讀: React中關(guān)于本地和遠(yuǎn)程數(shù)據(jù)狀態(tài)的所有內(nèi)容^[58]

如果你已經(jīng)在使用 Redux，并且想在 Redux 中添加具有集成狀態(tài)管理的數(shù)據(jù)獲取功能，而不是添加 React Query，你可能需要查看 RTK Query^[59]，它將數(shù)據(jù)獲取巧妙地集成到 Redux 中。

建議：

React Query (REST APIs, GraphQL APIs)

使用axios作為獲取庫(kù)

Apollo Client (GraphQL APIs)
可選的學(xué)習(xí)經(jīng)驗(yàn)：學(xué)習(xí)React Query是如何工作的

使用 React Router

如果你使用的是像Next.js或Gatsby.js這樣的React框架，路由已經(jīng)為你解決了。然而，如果你使用React時(shí)沒(méi)有框架，只用于客戶端渲染(如CRA)，那么最強(qiáng)大、最流行的路由庫(kù)是React Router^[60]。

繼續(xù)閱讀: 學(xué)習(xí)使用React Router^[61]

在你的React項(xiàng)目中引入路由器之前，當(dāng)你正要學(xué)習(xí)React時(shí)，你可以先嘗試一下React的條件渲染^[62]。它不是路由的替代品，但在小型應(yīng)用程序中，它經(jīng)常以這種方式交換組件。

建議：

React Router

可選學(xué)習(xí)經(jīng)驗(yàn)：學(xué)習(xí)使用React Router

React 中的 CSS 樣式

React中有很多關(guān)于樣式/CSS的選項(xiàng)，甚至更多的意見(jiàn)，所以把所有的東西放在一個(gè)部分是不夠的。如果你想更深入地了解這個(gè)主題，了解所有的選項(xiàng)，請(qǐng)查看以下指南。

繼續(xù)閱讀: React CSS樣式^[63]

但是讓我們先從概述開(kāi)始。作為一個(gè)React初學(xué)者，可以通過(guò)使用一個(gè)帶有所有CSS屬性的樣式對(duì)象作為HTML樣式屬性的鍵/值對(duì)來(lái)開(kāi)始使用內(nèi)聯(lián)樣式和基本的CSS。

const Headline = ({ title }) =>
  <h1 style={{ color: 'blue' }}>
    {title}
  </h1>
復(fù)制代碼

內(nèi)聯(lián)樣式可以在React中通過(guò)JavaScript動(dòng)態(tài)和編程的方式添加樣式，而外部CSS文件可以包含React應(yīng)用的所有剩余樣式：

import './Headline.css';

const Headline = ({ title }) =>
  <h1 className="headline" style={{ color: 'blue' }}>
    {title}
  </h1>
復(fù)制代碼

一旦你的應(yīng)用程序增長(zhǎng)，還有很多其他的樣式選擇。首先，我建議你將CSS模塊作為眾多CSS中CSS解決方案之一來(lái)研究。CRA支持CSS模塊，并提供了一種將CSS封裝到組件范圍內(nèi)的模塊的方法。這樣，它就不會(huì)意外地泄露到其他React組件的樣式中。盡管你的應(yīng)用程序的某些部分仍然可以共享樣式，但其他部分不必訪問(wèn)它。在React中，CSS模塊通常是將CSS文件放在React組件文件中：

import styles from './style.module.css';

const Headline = ({ title }) =>
  <h1 className={styles.headline}>
    {title}
  </h1>
復(fù)制代碼

其次，我想向你推薦所謂的風(fēng)格組件，作為React的眾多CSS-in-JS解決方案之一。這種方法是通過(guò)一個(gè)名為styles-components^[64](或其他選擇，如emotion或)的庫(kù)來(lái)實(shí)現(xiàn)的，它將樣式與JavaScript放在React組件的JavaScript文件或共存文件的旁邊：

import styled from 'styled-components';

const BlueHeadline = styled.h1`
  color: blue;
`;
const Headline = ({ title }) =>
  <BlueHeadline>
    {title}
  </BlueHeadline>
復(fù)制代碼

第三，我想推薦Tailwind CSS^[65]作為最流行的實(shí)用優(yōu)先CSS解決方案。它提供了預(yù)定義的CSS類，你可以在React組件中使用它們，而不用自己定義它們。這讓你作為一個(gè)開(kāi)發(fā)者更有效率，也讓你的React應(yīng)用程序的設(shè)計(jì)系統(tǒng)更加一致，但同時(shí)也需要了解所有的類：

const Headline = ({ title }) =>
  <h1 className="text-blue-700">
    {title}
  </h1>
復(fù)制代碼

選擇 CSS-in-CSS、CSS-in-JS 還是函數(shù)式 CSS 取決于你。所有策略都適用于較大的React應(yīng)用程序。最后一點(diǎn)提示：如果你想在React中有條件地應(yīng)用一個(gè)className，請(qǐng)使用像clsx這樣的工具。

建議：

CSS-in-CSS 用 CSS Modules
CSS-in-JS 用 styles-components (最流行)

備選: Emotion 或 Stitches

函數(shù)式的 CSS 用 Tailwind CSS
可選: 有條件地應(yīng)用一個(gè)className 選擇使用 clsx

React UI 庫(kù)

對(duì)于初學(xué)者來(lái)說(shuō)，從零開(kāi)始構(gòu)建可重用的組件是一個(gè)很好的學(xué)習(xí)經(jīng)驗(yàn)，值得推薦。無(wú)論它是下拉菜單、單選按鈕還是復(fù)選框，你最終都應(yīng)該知道如何創(chuàng)建這些UI組件。

然而，在某些時(shí)候，你想要使用一個(gè)UI庫(kù)，它可以讓你訪問(wèn)許多共享相同設(shè)計(jì)系統(tǒng)的預(yù)構(gòu)建組件。以下所有的UI庫(kù)都帶有基本組件，如按鈕、下拉菜單、對(duì)話框和列表:

Material UI \(MUI\)^[66] (最流行)
Mantine^[67] (最推薦的)
Chakra UI^[68] (最推薦的)
Ant Design^[69]
Radix^[70]
Primer^[71]
NextUI^[72]
Tailwind UI^[73] (不是免費(fèi)的)
Semantic UI^[74]
React Bootstrap^[75]

盡管所有這些UI庫(kù)都帶有許多內(nèi)部組件，但它們不能使每個(gè)組件都像只關(guān)注一個(gè)UI組件的庫(kù)那樣強(qiáng)大。例如，React-table-library^[76]允許你在React中創(chuàng)建功能強(qiáng)大的表組件，同時(shí)也提供了主題(如Material UI)，可以很好地融入流行的UI組件庫(kù)中。

React 動(dòng)畫庫(kù)

web應(yīng)用中的任何動(dòng)畫都是從CSS開(kāi)始的。最終你會(huì)發(fā)現(xiàn)CSS動(dòng)畫不能滿足你的需求。通常開(kāi)發(fā)者會(huì)選擇React Transition Group^[77]，這樣他們就可以使用React組件來(lái)執(zhí)行動(dòng)畫了。React的其他知名動(dòng)畫庫(kù)有：

Framer Motion^[78] (最推薦的)
react-spring^[79] (也經(jīng)常推薦的)
react-motion^[80]
react-move^[81]
Animated^[82] (React Native)

React 中的可視化和圖表庫(kù)

如果你真的想要自己從頭開(kāi)始創(chuàng)建圖表，那么就沒(méi)有辦法繞過(guò)D3^[83]。這是一個(gè)低級(jí)的可視化庫(kù)，可以為你提供創(chuàng)建令人驚嘆的圖表所需的一切。然而，學(xué)習(xí)D3是一個(gè)完全不同的冒險(xiǎn)，因此許多開(kāi)發(fā)人員只是選擇一個(gè)React圖表庫(kù)，它可以為他們做所有的事情，以換取靈活性。以下是一些流行的解決方案：

Recharts^[84]
react-chartjs^[85]
visx^[86]
Victory^[87]

React 中的表單庫(kù)

React 中最受歡迎的表單庫(kù)是 React Hook Form。它提供了從驗(yàn)證（最流行的集成是 yup 和 zod）到提交到表單狀態(tài)管理所需的一切。過(guò)去更流行的另一種選擇是Formik。兩者都是你的 React 應(yīng)用程序的有效解決方案。這個(gè)領(lǐng)域的另一個(gè)選擇是 React Final Form。畢竟，如果你已經(jīng)在使用 React UI 庫(kù)，你還可以查看他們的內(nèi)置表單解決方案。

建議：

React Hook Form

使用yup或zod集成進(jìn)行驗(yàn)證

如果使用UI庫(kù)，請(qǐng)檢查內(nèi)置表單是否支持所有需求

React 類型檢查

React自帶一個(gè)內(nèi)部的類型檢查，叫做PropTypes^[88]。通過(guò)使用PropTypes，你可以為React組件定義prop。當(dāng)一個(gè)錯(cuò)誤類型的prop被傳遞給組件時(shí)，你會(huì)在運(yùn)行應(yīng)用程序時(shí)得到一個(gè)錯(cuò)誤消息:

import PropTypes from 'prop-types';

const List = ({ list }) =>
  <div>
    {list.map(item => <div key={item.id}>{item.title}</div>)}
  </div>

List.propTypes = {
  list: PropTypes.array.isRequired,
};
復(fù)制代碼

然而，PropTypes不再包含在React核心庫(kù)中。在過(guò)去的幾年里，PropTypes變得不那么流行了，取而代之的是TypeScript：

type Item = {
  id: string;
  title: string;
};

type ListProps = {
  list: Item[];
};

const List: React.FC<ListProps> = ({ list }) =>
  <div>
    {list.map(item => <div key={item.id}>{item.title}</div>)}
  </div>
復(fù)制代碼

如果你真的想在React中擁抱類型，TypeScript^[89]是現(xiàn)在的最佳選擇。

建議：

如果需要類型化的JavaScript，使用TypeScript

React 代碼結(jié)構(gòu)：樣式和格式

本質(zhì)上，有兩種方法可以遵循代碼結(jié)構(gòu)的常識(shí)：

如果你想要一種統(tǒng)一的、通用的代碼風(fēng)格，在你的React項(xiàng)目中使用ESLint。像ESLint這樣的檢測(cè)程序在你的React項(xiàng)目中強(qiáng)制執(zhí)行特定的代碼風(fēng)格。例如，你可以在ESLint中要求遵循一個(gè)流行的風(fēng)格指南(如Airbnb風(fēng)格指南)。之后，將ESLint與你的IDE/編輯器集成，它會(huì)指出你的每一個(gè)錯(cuò)誤。

繼續(xù)閱讀: React文件/文件夾結(jié)構(gòu)^[90]

如果你想采用統(tǒng)一的代碼格式，在React項(xiàng)目中使用Prettier。它是一個(gè)固執(zhí)的代碼格式化器，只有少量可選擇的配置。你可以將其集成到編輯器或IDE中，以便在每次保存文件時(shí)對(duì)代碼進(jìn)行格式化。雖然Prettier不能取代ESLint，但它可以很好地與ESLint集成。

建議：

ESLint + Prettier

React 驗(yàn)證

在React應(yīng)用程序中，你可能希望引入帶有注冊(cè)、登錄和退出等功能的身份驗(yàn)證。其他功能，如密碼重置和密碼更改功能通常也需要。這些特性遠(yuǎn)遠(yuǎn)超出了React的范疇，因?yàn)楹笈_(tái)應(yīng)用程序會(huì)為你管理這些東西。

繼續(xù)閱讀: 如何準(zhǔn)備React Router認(rèn)證^[91]

最好的學(xué)習(xí)經(jīng)驗(yàn)是自己實(shí)現(xiàn)一個(gè)帶有身份驗(yàn)證的后端應(yīng)用程序(例如GraphQL backend^[92])。然而，由于身份驗(yàn)證有很多安全風(fēng)險(xiǎn)，而且并非每個(gè)人都知道細(xì)節(jié)，我建議使用現(xiàn)有的眾多身份驗(yàn)證/后端即服務(wù)解決方案中的一種:

Firebase^[93]
Auth0^[94]
AWS Cognito^[95]

建議：

選擇一個(gè)認(rèn)證服務(wù)或BaaS(如Firebase)
可選學(xué)習(xí)經(jīng)驗(yàn)：自定義后端

React 托管

你可以像部署其他web應(yīng)用一樣部署和托管React應(yīng)用。如果你想擁有完全的控制權(quán)，選擇像Digital Ocean^[96]這樣的東西。如果你想找人來(lái)處理所有的事情，Cloudflare Workers^[97]、Netlify^[98]或Vercel^[99](特別是針對(duì)Next.js)是流行的解決方案。如果你已經(jīng)在使用像Firebase這樣的第三方后臺(tái)服務(wù)，你可以檢查他們是否也提供托管服務(wù)(例如Firebase hosting^[100])。

React 中的測(cè)試

如果你想深入了解React中的測(cè)試，請(qǐng)閱讀這篇文章:如何在React中測(cè)試組件。這里有一個(gè)要點(diǎn):測(cè)試一個(gè)React應(yīng)用的主干是Jest。它提供了測(cè)試運(yùn)行器、斷言庫(kù)和監(jiān)視/模仿/存根功能。一個(gè)全面的測(cè)試框架所需要的一切。

至少，你可以使用React-test-renderer^[101]在Jest測(cè)試中呈現(xiàn)React組件。這已經(jīng)足夠用Jest執(zhí)行所謂的Snapshot Tests^[102]了。Snapshot Tests的工作方式如下:一旦運(yùn)行測(cè)試，就會(huì)創(chuàng)建React組件中呈現(xiàn)的DOM元素的快照。當(dāng)你在某個(gè)時(shí)間點(diǎn)再次運(yùn)行測(cè)試時(shí)，將創(chuàng)建另一個(gè)快照，該快照將用作前一個(gè)快照的差異。如果差異不相同，Jest將發(fā)出抱怨，你要么必須接受快照，要么更改組件的實(shí)現(xiàn)。

最終，你會(huì)發(fā)現(xiàn)自己正在使用流行的React測(cè)試庫(kù)\(RTL\)^[103]——它是在Jest測(cè)試環(huán)境中使用的——來(lái)為React創(chuàng)建一個(gè)更復(fù)雜的測(cè)試庫(kù)。RTL使呈現(xiàn)組件和在HTML元素上模擬事件成為可能。之后，Jest用于DOM節(jié)點(diǎn)上的斷言。

如果你正在尋找React端到端(E2E)測(cè)試的測(cè)試工具，Cypress^[104]是最受歡迎的選擇。不過(guò)另一個(gè)越來(lái)越受歡迎的是Playwright^[105]。

建議：

Unit/Integration: Jest + React Testing Library (最流行的)
Snapshot Tests: Jest
E2E Tests: Cypress

React 和不可變數(shù)據(jù)結(jié)構(gòu)

Vanilla JavaScript 為你提供了大量的內(nèi)置工具來(lái)處理數(shù)據(jù)結(jié)構(gòu)，就好像它們是不可變的一樣。但是，如果你和你的團(tuán)隊(duì)覺(jué)得需要執(zhí)行不可變的數(shù)據(jù)結(jié)構(gòu)，那么最流行的選擇之一就是Immer^[106]。我個(gè)人不使用它，因?yàn)镴avaScript可以用于管理不可變的數(shù)據(jù)結(jié)構(gòu)，但任何時(shí)候有人問(wèn)起JS的不可變性，就會(huì)有人推薦它。

React 國(guó)際化

當(dāng)涉及到React應(yīng)用程序的國(guó)際化i18n時(shí)，你不僅需要考慮翻譯，還需要考慮多元化、日期和貨幣的格式，以及其他一些事情。以下是最常用的處理它的庫(kù)：

FormatJS^[107]
react-i18next^[108]

React中的富文本編輯器

說(shuō)到React中的富文本編輯器，我只能想到以下這些，因?yàn)槲疫€沒(méi)有在React中使用過(guò)其他的編輯器：

Draft.js^[109]
Slate.js^[110]
ReactQuill^[111]

React 中的支付

和其他網(wǎng)絡(luò)應(yīng)用一樣，最常見(jiàn)的支付提供商是Stripe和PayPal。兩者都可以巧妙地集成到React中。這是一個(gè)與React集成的Stripe Checkout。

PayPal^[112]
React Stripe Elements^[113] or Stripe Checkout^[114]

React 中的時(shí)間

JavaScript本身在最近幾年的日期和時(shí)間處理上做得非常棒。因此，實(shí)際上不需要使用庫(kù)來(lái)處理它們。然而，如果你的React應(yīng)用需要處理大量的日期、時(shí)間和時(shí)區(qū)，你可以引入一個(gè)庫(kù)來(lái)為你管理這些東西。以下是你的選擇：

date-fns^[115]
Day.js^[116]
Luxon^[117]

React 桌面應(yīng)用程序

Electron^[118] 是跨平臺(tái)桌面應(yīng)用程序的框架。然而，也有其他選擇，例如：

Tauri^[119] (fairly new)
NW.js^[120]
Neutralino.js^[121]

使用React進(jìn)行手機(jī)開(kāi)發(fā)

想將React從網(wǎng)頁(yè)帶到手機(jī)平臺(tái)的解決方案仍然是React Native。如果你想幫助一個(gè)框架創(chuàng)建React Native應(yīng)用程序，請(qǐng)查看Expo^[122]。

繼續(xù)閱讀: 學(xué)習(xí)React Native^[123]

React VR/AR

通過(guò)React，我們可以深入研究虛擬現(xiàn)實(shí)或增強(qiáng)現(xiàn)實(shí)。老實(shí)說(shuō)，我沒(méi)有使用過(guò)這些庫(kù)中的任何一個(gè)，但它們是我在React中所熟悉的AR/VR庫(kù):

react-three-fiber^[124] (流行的 3d 庫(kù), 我也看到過(guò)VR的例子)
react-360^[125]
aframe-react^[126]

React的原型設(shè)計(jì)

如果你有UI/UX背景，你可能想要使用一個(gè)工具來(lái)快速創(chuàng)建React組件、布局或UI/UX概念的原型。我過(guò)去使用Sketch^[127]，但后來(lái)改用Figma^[128]。雖然我兩個(gè)都喜歡，但我現(xiàn)在不后悔使用Figma。Zeplin^[129]是另一種選擇。對(duì)于粗糙而輕量級(jí)的草圖，我喜歡使用Excalidraw^[130]。如果你正在尋找交互式UI/UX設(shè)計(jì)，請(qǐng)查看InVision^[131]。

React 組件文檔

如果你負(fù)責(zé)為組件編寫文檔，有各種各樣的React文檔工具。我已經(jīng)在許多項(xiàng)目中使用了Storybook，我只能推薦它，但我也聽(tīng)說(shuō)過(guò)其他解決方案的好處：

Docusaurus^[132]
Docz^[133]
Styleguidist^[134]

畢竟，React生態(tài)系統(tǒng)可以被看作是React的一個(gè)框架，但它的核心仍然是React的靈活性。它是一個(gè)靈活的框架，你可以根據(jù)自己的了解做出想要選擇加入哪些庫(kù)的決定。你可以從小處開(kāi)始，只添加庫(kù)來(lái)解決特定的問(wèn)題。相反，如果你只需要React，你可以只使用這個(gè)庫(kù)來(lái)保持輕量級(jí)。

結(jié)語(yǔ)

好了以上就是本文的所有內(nèi)容，如有問(wèn)題，歡迎指正 ??

【React】1332- 2022 年值得推薦的 React 庫(kù)

目錄

如何創(chuàng)建 React 項(xiàng)目

React 狀態(tài)管理

React 數(shù)據(jù)獲取

使用 React Router

React 中的 CSS 樣式

React UI 庫(kù)

React 動(dòng)畫庫(kù)

React 中的可視化和圖表庫(kù)

React 中的表單庫(kù)

React 類型檢查

React 代碼結(jié)構(gòu)：樣式和格式

React 驗(yàn)證

React 托管

React 中的測(cè)試

React 和不可變數(shù)據(jù)結(jié)構(gòu)

React 國(guó)際化

React中的富文本編輯器

React 中的支付

React 中的時(shí)間

React 桌面應(yīng)用程序

使用React進(jìn)行手機(jī)開(kāi)發(fā)

React VR/AR

React的原型設(shè)計(jì)

React 組件文檔

結(jié)語(yǔ)