[[315731]]

React 已經(jīng)誕生很久了，自從它誕生開始，圍繞組件驅(qū)動(dòng)形成了一個(gè)非常全面的生態(tài)，但是來自其他編程語言或者框架的開發(fā)人員很難找到要構(gòu)建一個(gè) React 系統(tǒng)的所有組件。如果你是來自于像 Angular 這樣的框架的開發(fā)者，你可能已經(jīng)習(xí)慣了框架包含了所需要的所有功能，

然而對(duì)于 React 來說，它的核心并不是完善所有的可選庫。 這是優(yōu)勢(shì)還是劣勢(shì)取決于你自己。 當(dāng)我從 Angular 切換到 React，我絕對(duì)經(jīng)歷了它作為 React 的優(yōu)勢(shì)。

只有通過 React，您才能使用函數(shù)組件和 props 構(gòu)建組件驅(qū)動(dòng)的用戶界面。 它帶有一些內(nèi)置的解決方案，例如，用于本地狀態(tài)和副作用的 React Hooks。

下面的文章將向您提供一些自己總結(jié)的方法，以便從補(bǔ)充庫中進(jìn)行選擇，從而構(gòu)建一個(gè)全面的 React 應(yīng)用程序。

如何開始 React

如果你是一個(gè)完全不熟悉 React 的初學(xué)者想創(chuàng)建一個(gè) React 項(xiàng)目，加入 React 的世界。有許多工具包項(xiàng)目可以選擇，每個(gè)項(xiàng)目都試圖滿足不同的需求。 React 社區(qū)的現(xiàn)狀是通過 Facebook 的 create-react-app(CRA)。 它提供了一個(gè)零配置的設(shè)置，并給你一個(gè)開箱即用并且簡(jiǎn)單的啟動(dòng)和運(yùn)行的 React 應(yīng)用程序。 所有的工具都對(duì)您隱藏起來了，但是最終要由您來更改這些工具。

如果你已經(jīng)熟悉 React，你可以選擇它流行的入門工具包之一: Next.js 和 Gatsby.js。 這兩個(gè)框架都建立在 React 之上，因此你應(yīng)該已經(jīng)熟悉 React 的基本原理。 Next.js 用于服務(wù)器端渲染(如動(dòng)態(tài) web 應(yīng)用程序) ，Gatsby.js 用于靜態(tài)站點(diǎn)生成(如博客、登陸頁面)。

如果您只是想了解這些初學(xué)者工具包是如何工作的，那么可以嘗試從頭開始設(shè)置 React 項(xiàng)目。 你將從一個(gè)基本的 HTML 和 JavaScript 項(xiàng)目開始，然后自己添加 React 和它的支持工具。

如果你想選擇一個(gè)自定義樣板項(xiàng)目，試著縮小你的要求。 樣板文件應(yīng)該是最小的，不要試圖解決所有問題。 它應(yīng)該針對(duì)你的問題。 例如，gatsby-Firebase-authentication 樣板文件只在 Gatsby.js 中為您提供了完整的 Firebase 身份驗(yàn)證機(jī)制，但是其他所有內(nèi)容都被省略了。

建議：

• create-react-app for React beginners/advanced
• Gatsby.js for static websites in React
• Next.js for server-side rendered React
• custom React project to understand the underlying tools

React 狀態(tài)管理

React 帶有內(nèi)置的 hooks 來管理局部狀態(tài): useState、 useReducer 和 useContext。 所有這些都可以在 React 中用于復(fù)雜的本地狀態(tài)管理。 它甚至可以模擬 Redux(Redux 是 React 的一個(gè)流行的狀態(tài)管理庫)。

所有 React 的內(nèi)置 hooks 都非常適合本地狀態(tài)管理。 當(dāng)涉及到遠(yuǎn)程數(shù)據(jù)的狀態(tài)管理時(shí)，如果遠(yuǎn)程數(shù)據(jù)帶有 GraphQL 端點(diǎn)，我建議使用 Apollo Client。Apollo Client 的替代方案是 urql 和 Relay。

如果遠(yuǎn)程數(shù)據(jù)不是來自 GraphQL 端點(diǎn)，請(qǐng)嘗試使用 React 的 Hooks 來管理它。 如果不行，像 Redux 或者 MobX/Mobx State tree 這樣的解決方案可能會(huì)有所幫助。

如果你想了解更多細(xì)節(jié)，請(qǐng)?jiān)L問我的綜合狀態(tài)管理反應(yīng)教程。

推薦：

• 局部狀態(tài): React 的 useState, useReducer, useContext Hooks
• 通過 Graph QL 的遠(yuǎn)程狀態(tài): Apollo Client
• 通過 REST 的遠(yuǎn)程狀態(tài): React Hooks or Redux/MobX/Mobx State Tree

使用 React 路由

路由在 React 中起著重要作用。 畢竟，React 可以幫助您實(shí)現(xiàn)在客戶端處理路由的單頁應(yīng)用程序。 當(dāng)介紹一個(gè)復(fù)雜的路由 的時(shí)候，有好幾個(gè)路由解決方案。 最值得推薦的解決方案是 React Router。

在您引入路由以前，您可以先嘗試 React 的條件渲染，它雖然不是路由的合理替代，但是小型應(yīng)用中以及足夠用了。

建議:

• React Router

React 中的樣式庫

雖然關(guān)于 React 樣式處理有很多解決方法，但是作為一個(gè) React 初學(xué)者，剛開始使用內(nèi)聯(lián)樣式和基本 CSS 是很好的。

import './Headline.css'; 
const Headline = ({ title }) => 
<h1 className="headline" style={{ color: 'blue' }}> 
  {title} 
</h1> 

雖然內(nèi)聯(lián)樣式可以用 JavaScript 在 React 中動(dòng)態(tài)地添加樣式，但是一個(gè)外部的 CSS 文件可以擁有 React 應(yīng)用程序的所有剩余樣式。 一旦您的應(yīng)用程序增長(zhǎng)，還有許多其他樣式方案選擇。

首先，我建議您研究一下 CSS Modules，將其作為 CSS-in-CSS 解決方案之一。 CSS Modules 受到 create-react-app 的支持，并為您提供了將 CSS 封裝到模塊中的方法。 這樣，它就不會(huì)意外地泄漏到其他人的樣式中。 盡管應(yīng)用程序的某些部分仍然可以共享樣式，但其他部分不必訪問它。 在 React 中，CSS Modules 通常將 CSS 文件與 React 組件文件共存。

import styles from './style.css'; 
const Headline = ({ title }) => 
  <h1 className={styles.headline}> 
    {title} 
  </h1> 

其次，我想推薦的是被稱作為 styled components，作為 React 的 CSS-in-JS 解決方案之一。 這個(gè)方法是由一個(gè)名為 styled-components 的庫提供的，它將樣式與 JavaScript 共享到 React 組件的旁邊:

import styled from 'styled-components'; 
const BlueHeadline = styled.h1` 
  color: blue; 
`; 
const Headline = ({ title }) => 
  <BlueHeadline> 
    {title} 
  </BlueHeadline> 

第三，我想推薦 Tailwind CSS 作為一個(gè)函數(shù)式的 CSS 解決方案:

const Headline = ({ title }) =>  <h1 className="text-blue-700">    {title}  </h1> 

是否選擇 CSS in CSS、 CSS in js 或函數(shù)式 CSS 取決于您。 所有的策略都適用于大型的 React 應(yīng)用程序。

建議:

• CSS-in-CSS with CSS Modules
• CSS-in-JS with Styled Components
• Functional CSS with Tailwind CSS

React UI 庫

如果您不想從頭開始構(gòu)建所有必要的 React UI 組件，您可以選擇 React UI Library 來完成這項(xiàng)工作。 所有這些都有一些基本的組件，比如按鈕，下拉菜單，對(duì)話框和列表。 有很多 UI 庫可供 React 選擇:

• Ant Design
• Chakra UI
• Tailwind UI
• Semantic UI
• Material UI
• React Bootstrap 1. React Bootstrap

React 動(dòng)畫

任何 web 應(yīng)用程序中的動(dòng)畫都是從 CSS 開始的。 最終你會(huì)發(fā)現(xiàn) CSS 動(dòng)畫并不能滿足你的需求。 通常開發(fā)人員會(huì)檢查 React Transition Group，這樣他們就可以使用 React 組件執(zhí)行動(dòng)畫。 其他著名的 React 動(dòng)畫庫有:

• react-motion
• react-spring
• Framer Motion
• Animated (React Native)

建議:

• React Transition Group

React 可視化和圖表庫

如果你真的想自己從頭開始構(gòu)建圖表，你沒辦法不去學(xué)習(xí) D3 。 這是一個(gè)底層的可視化庫，它為你提供了創(chuàng)建令人驚嘆的圖表所需的一切。 然而，學(xué)習(xí) D3 是一個(gè)完全不同的冒險(xiǎn)，因此許多開發(fā)人員只是想選擇一個(gè) React 圖表庫，它可以為他們做任何事情，以換取靈活性。 以下是一些流行的解決方案:

• nivo
• Victory
• react-vis
• Recharts
• Chart Parts

React 中的表單庫

在 React 中最流行的表單庫是 Formik。 它提供了從驗(yàn)證到提交到形成狀態(tài)管理所需的一切。另外一個(gè)選擇是 React Hook Form。 如果您開始使用更復(fù)雜的表單，這兩種方法對(duì)于 React 應(yīng)用程序都是有效的解決方案。

建議:

• Formik
• React Hook Form

React 中的數(shù)據(jù)獲取庫

很快，您就必須向遠(yuǎn)程 API 發(fā)出請(qǐng)求，以便在 React 中獲取數(shù)據(jù)。 現(xiàn)代瀏覽器帶有本地獲取 API 來執(zhí)行異步數(shù)據(jù)請(qǐng)求:

function App() {  React.useEffect(() => {    const result = fetch(my/api/domain)      .then(response => response.json())      .then(result => {        // do success handling        // e.g. store in local state      });    setData(result.data);  });  return (    ...  );} 

基本上，你不需要添加任何其他庫來完成這項(xiàng)工作。 但是，有時(shí)候不僅需要提供復(fù)雜的異步請(qǐng)求，還需要它們具有更強(qiáng)大的功能，而且只是一個(gè)輕量級(jí)的庫。 我推薦的這些庫之一稱為 axios。 當(dāng)您的應(yīng)用程序增大時(shí)，可以使用它來代替本地獲取 API。

如果您有足夠的時(shí)間來處理 GraphQL API，我建議您使用 Apollo Client。 可供選擇的 GraphQL 客戶端將是 urql 或 Relay。

建議:

• 瀏覽器的本地 fetch API
• axios
• Apollo Client

React 類型檢查

幸運(yùn)的是 React 有自己的類型檢查能力。 使用 PropTypes，你可以為你的 React 組件定義傳入的 props。 無論何時(shí)向組件傳遞了錯(cuò)誤的類型，在運(yùn)行應(yīng)用程序時(shí)都會(huì)收到錯(cuò)誤消息。 但是這種形式的類型檢查只應(yīng)該用于較小的應(yīng)用程序。

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,}; 

在較大的 React 應(yīng)用程序中，TypeScript 為整個(gè)應(yīng)用程序增加了類型安全性，而不是使用 React PropTypes。 當(dāng)使用這樣的類型檢查器時(shí)，您可以在開發(fā)期間獲得錯(cuò)誤。 您不必啟動(dòng)應(yīng)用程序就可以找到本可以通過這種類型檢查防止的 bug。 這樣一來，類型檢查器就可以提高您的開發(fā)人員體驗(yàn)，避免首先引入 bug。

建議:

• TypeScript

React 代碼風(fēng)格

對(duì)于代碼風(fēng)格，基本上有三個(gè)選項(xiàng)可以用的。

第一種方法是遵循一個(gè)被社區(qū)所接受的風(fēng)格指南。 一個(gè)流行的 Airbnb 開源的React style guide 。 即使你沒有刻意遵循這些樣式指南，但是讀一讀它們，在 React 中獲得常見代碼樣式的要點(diǎn)是有意義的。

第二種方法是使用 linter，比如 ESLint。 雖然樣式指南只給出建議，但是 linter 在應(yīng)用程序中強(qiáng)制執(zhí)行這個(gè)建議。 例如，你可以要求遵循流行的 Airbnb 樣式指南，你的 IED/編輯器會(huì)告訴你每一個(gè)錯(cuò)誤。

第三種也是最流行的方法是使用 Prettier。 它是一個(gè)強(qiáng)制的代碼格式化程序。 您可以將其集成到編輯器或 IDE 中，使其在每次保存文件時(shí)格式化您的代碼。 也許它并不總是符合您的口味，但至少您不必再擔(dān)心自己或團(tuán)隊(duì)代碼庫中的代碼格式。 雖然 Prettier 不能取代 ESLint，但是它與 ESLint 的集成非常好。

建議:

• ESLint
• Prettier

React 認(rèn)證

在較大的 React 應(yīng)用程序中，您可能希望引入具有注冊(cè)、登錄和退出功能的身份驗(yàn)證。 此外，密碼重置和密碼更改功能往往是需要的。 這些特性遠(yuǎn)遠(yuǎn)超出了 React，因?yàn)楹蠖藨?yīng)用程序?yàn)槟芾磉@些事情。

通常的方法是使用自定義身份驗(yàn)證實(shí)現(xiàn)自己的自定義后端應(yīng)用程序。 如果您不想啟動(dòng)自己的身份驗(yàn)證，可以考慮類似 Passport.js 的東西。

如果你根本不想關(guān)心后端，以下三種解決方案可能適合你:

• Firebase
• Auth0
• AWS Cognito

如果您正在尋找身份驗(yàn)證 + 數(shù)據(jù)庫的一體化解決方案，請(qǐng)堅(jiān)持使用 Firebase 或 AWS。

建議:

• DIY: Custom Backend
• Get it off the shelf: Firebase

React 主機(jī)

您可以像其他 web 應(yīng)用程序一樣部署和托管 React 應(yīng)用程序。 如果你想擁有完全的控制權(quán)，選擇像Digital Ocean這樣的。 如果你希望有人來處理所有的事情，如果你已經(jīng)在使用第三方的身份驗(yàn)證/數(shù)據(jù)庫，Netlify 是一個(gè)很受歡迎的解決方案，比如 Firebase，你可以檢查他們是否也提供主機(jī)服務(wù)(比如 Firebase Hosting)。 您還可以使用 S3的靜態(tài)站點(diǎn)與 Cloudfront 一起托管。

React 測(cè)試

如果您想深入了解 React 中的測(cè)試，請(qǐng)閱讀以下內(nèi)容: How to test components in React。 要點(diǎn)如下: 測(cè)試 React 應(yīng)用程序的主干是 Jest。 它提供了測(cè)試運(yùn)行程序、斷言庫和監(jiān)視(spying)/模擬(mocking)/stubbing 功能， 一個(gè)全面的測(cè)試框架中需要的所有東西。

至少，您可以使用 React-test-renderer 在 Jest 測(cè)試中渲染 React 組件。 這已經(jīng)足以用 jest 來執(zhí)行所謂的快照測(cè)試了。 快照測(cè)試的工作方式如下: 運(yùn)行測(cè)試之后，將創(chuàng)建 React 組件中渲染的 DOM 元素的快照。 當(dāng)您在某個(gè)時(shí)間點(diǎn)再次運(yùn)行測(cè)試時(shí)，將創(chuàng)建另一個(gè)快照，用作前一個(gè)快照的差異。 如果 diff 不完全相同，則 Jest 將報(bào)錯(cuò)，您要么必須接受快照，要么必須更改組件的實(shí)現(xiàn)。

最終，您會(huì)發(fā)現(xiàn)自己在使用 Enzyme 或 React Testing Library (這兩個(gè)都在 Jest 測(cè)試環(huán)境中使用)來進(jìn)行更詳細(xì)的測(cè)試功能集。 這兩個(gè)庫使得在 HTML 元素上呈現(xiàn)組件和模擬事件成為可能。 然后，Jest 用于 DOM 節(jié)點(diǎn)上的斷言。

如果您正在為 React-to-end (E2E)測(cè)試尋找測(cè)試工具，Cypress 是最受歡迎的選擇。

建議:

• Unit/Integration/Snapshot Tests: Jest + React Testing Library
• E2E Tests: Cypress 2e test: Cypress

用于 React 的工具庫

Javascript 為處理數(shù)組、對(duì)象、數(shù)字、對(duì)象和字符串提供了大量?jī)?nèi)置功能。 React 中最常用的 JavaScript 內(nèi)置功能之一是內(nèi)置 map() 數(shù)組。 為什么？ 因?yàn)槟偸潜仨毘尸F(xiàn)組件中的列表。 由于 JSX 是 HTML 和 JavaScript 的混合物，所以您可以使用 JavaScript 在數(shù)組上進(jìn)行映射并返回 JSX。 使用 React 創(chuàng)建列表組件變得簡(jiǎn)單:

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

但是，您可能需要選擇一個(gè)實(shí)用程序庫來提供更詳細(xì)的功能。 您甚至可能希望在將這些實(shí)用函數(shù)鏈接起來時(shí)更加靈活，甚至可以將它們動(dòng)態(tài)地組合在一起。 這時(shí)，您將引入一個(gè)實(shí)用程序庫: Lodash 或 Ramda。 對(duì)于每一個(gè) JavaScript 開發(fā)者來說，Lodash 是一個(gè)更加實(shí)際的庫，而 Ramda 在函數(shù)式編程中有一個(gè)強(qiáng)大的核心。 請(qǐng)記住，現(xiàn)代 JavaScript 提供了很多開箱即用的特性，現(xiàn)在使用實(shí)用程序庫的必要性已經(jīng)降低了。

建議:

• JavaScript
• Lodash

react 和不可變的數(shù)據(jù)機(jī)構(gòu)

原生 JavaScript 提供了大量?jī)?nèi)置工具來處理數(shù)據(jù)結(jié)構(gòu)，就像它們是不可變的一樣。 但是，如果您和您的團(tuán)隊(duì)認(rèn)為有必要實(shí)施不可變的數(shù)據(jù)結(jié)構(gòu)，最流行的選擇之一是 Immer。 就我個(gè)人而言，我不使用它，但是任何時(shí)候有人問到 JS 中的不變性(immutability)，大家都會(huì)指出 Immer，并且這可以加上 redux 或 React hooks。

React 國(guó)際化

當(dāng)涉及到 React 應(yīng)用程序的國(guó)際化 時(shí)，您不僅需要考慮翻譯，還需要考慮多元化、日期和貨幣的格式化，以及其他一些事項(xiàng)。 以下是最受歡迎的處理該問題的庫:

• react-i18next
• react-intl
• LinguiJS
• FBT

建議:

• react-i18next

React 富文本編輯器

當(dāng)涉及到在 React 中的富文本編輯器時(shí)，我只能想到以下內(nèi)容，因?yàn)槲覜]有在 React 中使用任何其他內(nèi)容:

• Draft.js
• Slate

React 中的支付

和其他網(wǎng)絡(luò)應(yīng)用一樣，最常見的支付提供商是 Stripe 和 PayPal。 兩者都可以整齊地集成到 React 中。

• PayPal
• Stripe Elements 或 Stripe Checkout

React 中的時(shí)間

如果你的 React 應(yīng)用程序正在處理大量的日期和時(shí)區(qū)，你應(yīng)該引入一個(gè)庫來為你管理這些事情。 最受歡迎的庫是 moment.js。 更輕量級(jí)的替代品是 date-fns 和 Day.js。

Reac 桌面應(yīng)用

Electron 是跨平臺(tái)桌面應(yīng)用程序的首選框架。 不過，也有其他選擇，例如:

• NW.js
• Neutralino.js

React 的移動(dòng)開發(fā)

我想把 React 從網(wǎng)絡(luò)帶到移動(dòng)設(shè)備的首選解決方案仍然是 React Native。 如果您是 React Native 開發(fā)人員，想要?jiǎng)?chuàng)建一個(gè) Web 應(yīng)用程序，您應(yīng)該查看 React Native Web。

REACT VR/AR

實(shí)話說，我們很有可能用 React 深入虛擬現(xiàn)實(shí)或者增強(qiáng)現(xiàn)實(shí)中，我沒有使用過這些庫中的任何一個(gè)，但是它們是我在談到 React AR/VR 時(shí)從大腦閃過的就是：

• React 360
• react-viro
• react-native-arkit

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

如果您來自 UI/UX 背景，那么您可能希望使用一個(gè)工具為新的 React 組件、布局或 UI/UX 概念進(jìn)行快速原型設(shè)計(jì)。 我以前用過 Sketch，但最近轉(zhuǎn)到了 Figma。 盡管我兩者都喜歡，但我現(xiàn)在并不后悔使用 Figma。 另一個(gè)流行的工具是 Framer。

為 React 書寫文檔

如果你負(fù)責(zé)為你的軟件、 UI 庫或者其他東西編寫文檔，那么你可以使用一些簡(jiǎn)潔的 React 文檔工具。 我已經(jīng)廣泛地使用了 Storybook，我可以說他非常好用，但是我也聽說了其他解決方案的好處:

• Styleguidist
• docz
• Docusaurus

總結(jié)

所以最終，React 生態(tài)系統(tǒng)可以看作是一個(gè) React 的框架，但它保持靈活性。 它是一個(gè)靈活的框架，您可以自己決定選擇哪些庫。 您可以從小型開始，只添加庫來解決特定的問題。 當(dāng)應(yīng)用程序增長(zhǎng)時(shí)，您可以沿途擴(kuò)展構(gòu)建塊。 否則你可以通過使用普通的 React 來保持輕量級(jí)。 因此，這里再次列出了可以補(bǔ)充 React 作為應(yīng)用程序關(guān)于不同項(xiàng)目大小的核心的庫。 請(qǐng)記住，這個(gè)列表是我的個(gè)人看法，我也渴望得到你的反饋。

小型應(yīng)用程式

• 樣板: create-react-app
• 樣式庫: basic CSS and inline style
• 異步請(qǐng)求: fetch or axios
• 代碼風(fēng)格: 無
• 類型檢查: 無
• 狀態(tài)管理: React Hooks
• 路由: 無 or React Router
• 身份驗(yàn)證: Firebase
• 數(shù)據(jù)庫: Firebase
• UI 庫: none
• 表單庫: 無
• 測(cè)試庫: Jest
• 實(shí)用程序庫: JavaScript
• 國(guó)際化: react-i18next
• React 桌面: Electron

中型應(yīng)用

• 樣板文件: Next.js or Gatsby.js
• 樣式庫: CSS Modules or Styled Components
• 異步請(qǐng)求: fetch or axios
• 代碼風(fēng)格: Prettier，ESLint
• 類型檢查: 無 或 TypeScript
• 狀態(tài)管理: React Hooks and/or Apollo
• 路由: React Router
• 身份驗(yàn)證: Firebase
• 數(shù)據(jù)庫: Firebase
• Ui 庫: none 或 UI 組件庫
• 表單庫: none 或 Formik 或 React Hook Form
• 測(cè)試庫: Jest with React Testing Library
• 實(shí)用程序庫: JavaScript
• 國(guó)際化: react-i18next
• React 桌面: Electron

大型應(yīng)用程序

• 樣板文件: Next.js, Gatsby.js, custom setup
• 樣式庫: CSS Modules or Styled Components
• 異步請(qǐng)求: axios 或 Apollo Client
• 代碼風(fēng)格: Prettier，ESLint
• 類型檢查: TypeScript
• 狀態(tài)管理: React Hooks and/或者 Apollo/Redux/MobX
• 路由: React Router
• 認(rèn)證: Node.js 服務(wù) + Passport.js
• 數(shù)據(jù)庫: 自己用SQL/NoSQL DB 提供 Node.js 服務(wù)
• Ui 庫: UI 組件庫或者您自己的 UI 組件
• **表單庫:**none 或者 Formik 或者 React Hook Form
• 測(cè)試庫: Jest with React Testing Library and Cypress
• 實(shí)用程序庫: JavaScript 的 api，Lodash
• 國(guó)際化: react-i18next
• React 桌面: Electron

以前的建議是個(gè)人的。 您可以為理想的 React 應(yīng)用程序選擇自己的靈活框架。 每一個(gè)“理想”的 React 設(shè)置都是主觀的，取決于開發(fā)人員和項(xiàng)目的需求。 畢竟，沒有理想的 React 應(yīng)用程序設(shè)置。