[[315731]]

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

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

只有通過 React，您才能使用函數組件和 props 構建組件驅動的用戶界面。 它帶有一些內置的解決方案，例如，用于本地狀態和副作用的 React Hooks。

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

如何開始 React

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

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

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

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

建議：

• 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 狀態管理

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

所有 React 的內置 hooks 都非常適合本地狀態管理。 當涉及到遠程數據的狀態管理時，如果遠程數據帶有 GraphQL 端點，我建議使用 Apollo Client。Apollo Client 的替代方案是 urql 和 Relay。

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

如果你想了解更多細節，請訪問我的綜合狀態管理反應教程。

推薦：

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

使用 React 路由

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

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

建議:

• React Router

React 中的樣式庫

雖然關于 React 樣式處理有很多解決方法，但是作為一個 React 初學者，剛開始使用內聯樣式和基本 CSS 是很好的。

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

雖然內聯樣式可以用 JavaScript 在 React 中動態地添加樣式，但是一個外部的 CSS 文件可以擁有 React 應用程序的所有剩余樣式。 一旦您的應用程序增長，還有許多其他樣式方案選擇。

首先，我建議您研究一下 CSS Modules，將其作為 CSS-in-CSS 解決方案之一。 CSS Modules 受到 create-react-app 的支持，并為您提供了將 CSS 封裝到模塊中的方法。 這樣，它就不會意外地泄漏到其他人的樣式中。 盡管應用程序的某些部分仍然可以共享樣式，但其他部分不必訪問它。 在 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 作為一個函數式的 CSS 解決方案:

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

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

建議:

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

React UI 庫

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

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

React 動畫

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

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

建議:

• React Transition Group

React 可視化和圖表庫

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

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

React 中的表單庫

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

建議:

• Formik
• React Hook Form

React 中的數據獲取庫

很快，您就必須向遠程 API 發出請求，以便在 React 中獲取數據。 現代瀏覽器帶有本地獲取 API 來執行異步數據請求:

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

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

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

建議:

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

React 類型檢查

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

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 應用程序中，TypeScript 為整個應用程序增加了類型安全性，而不是使用 React PropTypes。 當使用這樣的類型檢查器時，您可以在開發期間獲得錯誤。 您不必啟動應用程序就可以找到本可以通過這種類型檢查防止的 bug。 這樣一來，類型檢查器就可以提高您的開發人員體驗，避免首先引入 bug。

建議:

• TypeScript

React 代碼風格

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

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

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

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

建議:

• ESLint
• Prettier

React 認證

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

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

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

• Firebase
• Auth0
• AWS Cognito

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

建議:

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

React 主機

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

React 測試

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

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

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

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

建議:

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

用于 React 的工具庫

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

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

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

建議:

• JavaScript
• Lodash

react 和不可變的數據機構

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

React 國際化

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

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

建議:

• react-i18next

React 富文本編輯器

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

• Draft.js
• Slate

React 中的支付

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

• PayPal
• Stripe Elements 或 Stripe Checkout

React 中的時間

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

Reac 桌面應用

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

• NW.js
• Neutralino.js

React 的移動開發

我想把 React 從網絡帶到移動設備的首選解決方案仍然是 React Native。 如果您是 React Native 開發人員，想要創建一個 Web 應用程序，您應該查看 React Native Web。

REACT VR/AR

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

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

為 React 設計原型

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

為 React 書寫文檔

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

• Styleguidist
• docz
• Docusaurus

總結

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

小型應用程式

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

中型應用

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

大型應用程序

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

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