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/advancedGatsby.js for static websites in ReactNext.js for server-side rendered Reactcustom React project to understand the underlying toolsReact 狀態管理

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 RouterReact 中的樣式庫

雖然關於 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 ModulesCSS-in-JS with Styled ComponentsFunctional CSS with Tailwind CSSReact UI 庫

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

Ant DesignChakra UITailwind UISemantic UIMaterial UIReact Bootstrap 1. React BootstrapReact 動畫

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

react-motionreact-springFramer MotionAnimated (React Native)

建議:

React Transition GroupReact 視覺化和圖表庫

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

nivoVictoryreact-visRechartsChart PartsReact 中的表單庫

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

建議:

FormikReact Hook FormReact 中的資料獲取庫

很快，您就必須向遠端 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 APIaxiosApollo ClientReact 型別檢查

幸運的是 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。

建議:

TypeScriptReact 程式碼風格

對於程式碼風格，基本上有三個選項可以用的。

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

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

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

建議:

ESLintPrettierReact 認證

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

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

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

FirebaseAuth0AWS Cognito

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

建議:

DIY: Custom BackendGet it off the shelf: FirebaseReact 主機

您可以像其他 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 節點上的斷言。

建議:

Unit/Integration/Snapshot Tests: Jest + React Testing LibraryE2E 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 提供了很多開箱即用的特性，現在使用實用程式庫的必要性已經降低了。

建議:

JavaScriptLodashreact 和不可變的資料機構

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

React 國際化

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

react-i18nextreact-intlLinguiJSFBT

建議:

react-i18nextReact 富文字編輯器

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

Draft.jsSlateReact 中的支付

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

PayPalStripe Elements 或 Stripe CheckoutReact 中的時間

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

Reac 桌面應用

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

NW.jsNeutralino.jsReact 的移動開發

我想把 React 從網路帶到移動裝置的首選解決方案仍然是 React Native。 如果您是 React Native 開發人員，想要建立一個 Web 應用程式，您應該檢視 React Native Web。

REACT VR/AR

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

React 360react-viroreact-native-arkit為 React 設計原型

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

為 React 書寫文件

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

StyleguidistdoczDocusaurus總結

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

小型應用程式樣板: create-react-app樣式庫: basic CSS and inline style非同步請求: fetch or axios程式碼風格: 無型別檢查: 無狀態管理: React Hooks路由: 無 or React Router身份驗證: Firebase資料庫: FirebaseUI 庫: none表單庫: 無測試庫: Jest實用程式庫: JavaScript國際化: react-i18nextReact 桌面: 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資料庫: FirebaseUi 庫: none 或 UI 元件庫表單庫: none 或 Formik 或 React Hook Form測試庫: Jest with React Testing Library實用程式庫: JavaScript國際化: react-i18nextReact 桌面: 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-i18nextReact 桌面: Electron

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