[[328538]]

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

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

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

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

如何開始 React

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

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

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

如果你想選擇一個自定義樣板項目，試著縮小你的要求。樣板文件應(yīng)該是最小的，不要試圖解決所有問題。它應(yīng)該針對你的問題。例如，gatsby-Firebase-authentication 樣板文件只在 Gatsby.js 中為您提供了完整的 Firebase 身份驗證機制，但是其他所有內(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 的一個流行的狀態(tài)管理庫)。

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

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

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

推薦：

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

使用 React 路由

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

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

建議:

•  React Router

React 中的樣式庫

雖然關(guān)于 React 樣式處理有很多解決方法，但是作為一個 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 中動態(tài)地添加樣式，但是一個外部的 CSS 文件可以擁有 React 應(yīng)用程序的所有剩余樣式。一旦您的應(yīng)用程序增長，還有許多其他樣式方案選擇。

首先，我建議您研究一下 CSS Modules，將其作為 CSS-in-CSS 解決方案之一。CSS Modules 受到 create-react-app 的支持，并為您提供了將 CSS 封裝到模塊中的方法。這樣，它就不會意外地泄漏到其他人的樣式中。盡管應(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 解決方案之一。這個方法是由一個名為 styled-components 的庫提供的，它將樣式與 JavaScript 共享到 React 組件的旁邊: 

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

第三，我想推薦 Tailwind CSS 作為一個函數(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 來完成這項工作。所有這些都有一些基本的組件，比如按鈕，下拉菜單，對話框和列表。有很多 UI 庫可供 React 選擇:

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

React 動畫

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

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

建議:

•  React Transition Group

React 可視化和圖表庫

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

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

React 中的表單庫

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

建議:

•  Formik
•  React Hook Form

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

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

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 (  
    ...  
  );  
} 

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

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

建議:

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

React 類型檢查

幸運的是 React 有自己的類型檢查能力。使用 PropTypes，你可以為你的 React 組件定義傳入的 props。無論何時向組件傳遞了錯誤的類型，在運行應(yīng)用程序時都會收到錯誤消息。但是這種形式的類型檢查只應(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 為整個應(yīng)用程序增加了類型安全性，而不是使用 React PropTypes。當(dāng)使用這樣的類型檢查器時，您可以在開發(fā)期間獲得錯誤。您不必啟動應(yīng)用程序就可以找到本可以通過這種類型檢查防止的 bug。這樣一來，類型檢查器就可以提高您的開發(fā)人員體驗，避免首先引入 bug。

建議:

•  TypeScript

React 代碼風(fēng)格

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

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

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

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

建議:

•  ESLint
•  Prettier

React 認證

在較大的 React 應(yīng)用程序中，您可能希望引入具有注冊、登錄和退出功能的身份驗證。此外，密碼重置和密碼更改功能往往是需要的。這些特性遠遠超出了 React，因為后端應(yīng)用程序為您管理這些事情。

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

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

•  Firebase
•  Auth0
•  AWS Cognito

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

建議:

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

React 主機

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

React 測試

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

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

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

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

建議:

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

用于 React 的工具庫

Javascript 為處理數(shù)組、對象、數(shù)字、對象和字符串提供了大量內(nèi)置功能。React 中最常用的 JavaScript 內(nèi)置功能之一是內(nèi)置 map() 數(shù)組。為什么？因為您總是必須呈現(xiàn)組件中的列表。由于 JSX 是 HTML 和 JavaScript 的混合物，所以您可以使用 JavaScript 在數(shù)組上進行映射并返回 JSX。使用 React 創(chuàng)建列表組件變得簡單: 

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

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

建議:

•  JavaScript
•  Lodash

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

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

React 國際化

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

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

建議:

•  react-i18next

React 富文本編輯器

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

•  Draft.js
•  Slate

React 中的支付

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

•  PayPal
•  Stripe Elements  或 Stripe Checkout

React 中的時間

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

Reac 桌面應(yīng)用

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

•  NW.js
•  Neutralino.js

React 的移動開發(fā)

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

REACT VR/AR

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

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

為 React 設(shè)計原型

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

為 React 書寫文檔

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

•  Styleguidist
•  docz
•  Docusaurus

總結(jié)

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

小型應(yīng)用程式

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

中型應(yīng)用

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

大型應(yīng)用程序

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

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