2022 年值得推薦的 76個 React 庫!

語言: CN / TW / HK

此文為譯文,原文出自:

原作者:Amitav Mishra 原文連結: React Libraries for 2022 [1]

譯者:LBJ

React 出現已經有一定的時間了。從那時起,圍繞元件驅動的庫發展了一個全面而強大的庫生態系統。來自其他程式語言或庫/框架的開發者通常很難弄清楚 使用 React 建立 Web 應用程式的所有庫。

從本質上講, React 使使用者能夠使用 函式元件 [2] 建立元件驅動的使用者介面。不過,它帶有幾個內建的解決方案,例如,用於本地狀態、副作用和效能優化的 React Hooks 。但畢竟,你在這裡只處理函式(元件和鉤子)來建立 UI

以下文章將會為你 如何選擇庫來構建 React 應用程式 提供指導。

目錄

本文目錄如下:

  • 如何建立 React 專案

  • React 狀態管理

  • React 資料獲取

  • 使用 React Router

  • React 中的 CSS 樣式

  • React UI 庫

  • React 動畫庫

  • React 中的視覺化和圖表庫

  • React 中的表單庫

  • React 型別檢查

  • React 程式碼結構:樣式和格式

  • React 驗證

  • React 託管

  • React 中的測試

  • React 和不可變資料結構

  • React 國際化

  • React中的富文字編輯器

  • React 中的支付

  • React 中的時間

  • React 桌面應用程式

  • 使用React進行手機開發

  • React VR/AR

  • React的原型設計

  • React 元件文件

如何建立 React 專案

對於每個React初學者來說,在加入React 時如何建立一個React專案都是未知的。有許多框架可供選擇。React社群的現狀是Facebook的 create-react-app (CRA) [3] 。它的配置為零,併為你提供了一個極簡的開箱即用的React應用程式。所有工具都對你隱藏,但你可以稍後更改工具(例如 eject 或 craco)。

繼續閱讀: 瞭解為什麼像React這樣的框架很重要 [4]

然而,現在CRA建立在過時的工具上——這導致了較慢的開發體驗。 Vite [5] 是時下最受歡迎的新產品之一,它的開發和生產 速度令人難以置信 [6] ,而且有很多模板可供選擇(如React、React + TypeScript)。

如果你已經熟悉 React,你可以選擇它最流行的(元)框架之一作為替代: Next.js [7]Gatsby.js [8] 。這兩個框架都建立在 React 之上,因此你應該已經熟悉 React 的基礎知識 [9] 。這個領域另一個流行但更新的框架是 Remix [10] ,它在 2022 年絕對值得一試。

繼續閱讀: 瞭解有關網站和 Web 應用程式的更多資訊 [11]

雖然Next.js最初用於伺服器端渲染(例如動態web應用程式),但Gatsby.js主要用於靜態站點(例如靜態網站,如部落格和登陸頁面)。但是,在過去幾年中,兩個框架之間的線路都有模糊,因為 Next.js 允許你選擇加入靜態站點,而 Gatsby 允許你選擇加入伺服器端渲染。在這個階段,我會說 Next.js 贏得了大多數用例的流行之戰。

繼續閱讀: 如何建立現代 JavaScript 專案 [12]

如果你只是想了解像create-react-app這樣的工具在底層是如何工作的,試著自己從頭開始 建立一個React專案 [13] 。你將從一個簡單的HTML JavaScript專案開始,自己新增React及其支援工具(如Webpack, Babel)。這不是你在日常工作中必須要處理的事情,但這是瞭解底層工具的一個很好的學習經驗。

建議:

  • Vite 用於客戶端 React 應用程式

    • CRA 備選

  • Next.js 主要用於伺服器端渲染的 React 應用程式

    • 前沿技術:Remix

    • Gatsby 用於靜態生成器 備選

  • 可選學習經驗:從頭開始建立 React 專案

React 狀態管理

React自帶兩個內建鉤子來管理本地狀態: useState [14]useReducer [15] 。如果狀態需要全域性管理,你可以選擇加入React內建的 useContext Hook [16] ,在不使用道具的情況下將道具從頂級元件傳遞到底層元件,從而避免了props drilling的問題。

繼續閱讀: 瞭解何時使用useState和useReducer [17]

這三個React鉤子都能讓開發者在React中實現強大的狀態管理,這些狀態管理可以通過React的useState/useReducer鉤子放在元件中,也可以通過與React的useContext鉤子結合在一起進行全域性管理。

繼續閱讀: 學習如何結合useState/useReducer和useContext [18]

如果你發現自己過於頻繁地使用React的Context來處理共享/全域性狀態,你一定要看看 Redux [19] ,它是最流行的狀態管理庫。它允許你管理應用程式的全域性狀態,任何連線到其全域性儲存的React元件都可以讀取和修改應用程式的全域性狀態。

繼續閱讀: 學習Redux [20]

如果你碰巧使用Redux,你一定也應該檢視 Redux Toolkit [21] 。它是Redux核心之上的一個很棒的API,極大地改善了開發者使用Redux的體驗。

作為替代方案,如果你喜歡全域性store的總體概念,但不喜歡 Redux 的處理方式,請檢視其他流行的本地狀態管理解決方案,例如 Zustand [22]Jotai [23]XState [24]Recoil [25]

建議:

  • useState/useReducer 用於共存或共享狀態

  • 選擇使用 useContext 來啟用

    一些

    全域性狀態

    • 可選學習經驗:學習如何結合useState/useReducer和useContext

  • Redux(或另一種選擇)用於許多全域性狀態

React 資料獲取

React的內建鉤子非常適合UI狀態,但當涉及到遠端資料的狀態管理(因此也包括資料獲取)時,我建議使用一個專門的資料獲取庫,比如 React Query [26] ,它自帶內建的狀態管理功能。雖然React Query本身並不被看作是一個狀態管理庫,因為它主要用於從api獲取你的遠端資料,但它會為你處理這些遠端資料的所有狀態管理(例如快取,樂觀更新)。

繼續閱讀: 瞭解React Query是如何工作的 [27]

React Query是為使用 REST api [28] 而設計的。然而,現在它也支援 GraphQL [29] 。但是如果你正在為你的React前端尋找一個專用的GraphQL庫,可以選擇 Apollo Client [30] (流行版)、 urql [31] (輕量級版)或 Relay [32] (Facebook版)。

繼續閱讀: React中關於本地和遠端資料狀態的所有內容 [33]

如果你已經在使用 Redux,並且想在 Redux 中新增具有整合狀態管理的資料獲取功能,而不是新增 React Query,你可能需要檢視 RTK Query [34] ,它將資料獲取巧妙地整合到 Redux 中。

建議:

  • React Query (REST APIs, GraphQL APIs)

    • 使用axios作為獲取庫

  • Apollo Client (GraphQL APIs)

  • 可選的學習經驗:學習React Query是如何工作的

使用 React Router

如果你使用的是像Next.js或Gatsby.js這樣的React框架,路由已經為你解決了。然而,如果你使用React時沒有框架,只用於客戶端渲染(如CRA),那麼最強大、最流行的路由庫是 React Router [35]

繼續閱讀: 學習使用React Router [36]

在你的React專案中引入路由器之前,當你正要學習React時,你可以先嚐試一下React的 條件渲染 [37] 。它不是路由的替代品,但在小型應用程式中,它經常以這種方式交換元件。

建議:

  • React Router

    • 可選學習經驗:學習使用React Router

React 中的 CSS 樣式

React中有很多關於樣式/CSS的選項,甚至更多的意見,所以把所有的東西放在一個部分是不夠的。如果你想更深入地瞭解這個主題,瞭解所有的選項,請檢視以下指南。

繼續閱讀: React CSS樣式 [38]

但是讓我們先從概述開始。作為一個React初學者,可以通過使用一個帶有所有CSS屬性的樣式物件作為HTML樣式屬性的鍵/值對來開始使用內聯樣式和基本的CSS。

const Headline = ({ title }) =>
<h1 style={{ color: 'blue' }}>
{title}
</h1>


內聯樣式可以在React中通過JavaScript動態和程式設計的方式新增樣式,而外部CSS檔案可以包含React應用的所有剩餘樣式:

import './Headline.css';

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


一旦你的應用程式增長,還有很多其他的樣式選擇。首先,我建議你將CSS模組作為眾多CSS中CSS解決方案之一來研究。CRA支援CSS模組,並提供了一種將CSS封裝到元件範圍內的模組的方法。這樣,它就不會意外地洩露到其他React元件的樣式中。儘管你的應用程式的某些部分仍然可以共享樣式,但其他部分不必訪問它。在React中,CSS模組通常是將CSS檔案放在React元件檔案中:

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

const Headline = ({ title }) =>
<h1 className={styles.headline}>
{title}
</h1>


其次,我想向你推薦所謂的風格元件,作為React的眾多CSS-in-JS解決方案之一。這種方法是通過一個名為 styles-components [39] (或其他選擇,如emotion或)的庫來實現的,它將樣式與JavaScript放在React元件的JavaScript檔案或共存檔案的旁邊:

import styled from 'styled-components';

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


第三,我想推薦 Tailwind CSS [40] 作為最流行的實用優先CSS解決方案。它提供了預定義的CSS類,你可以在React元件中使用它們,而不用自己定義它們。這讓你作為一個開發者更有效率,也讓你的React應用程式的設計系統更加一致,但同時也需要了解所有的類:

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


選擇 CSS-in-CSS、CSS-in-JS 還是函式式 CSS 取決於你。所有策略都適用於較大的React應用程式。最後一點提示:如果你想在React中有條件地應用一個className,請使用像clsx這樣的工具。

建議:

  • CSS-in-CSS 用 CSS Modules

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

    • 備選: Emotion 或 Stitches

  • 函式式的 CSS 用 Tailwind CSS

  • 可選: 有條件地應用一個className 選擇使用 clsx

React UI 庫

對於初學者來說,從零開始構建可重用的元件是一個很好的學習經驗,值得推薦。無論它是下拉選單、單選按鈕還是複選框,你最終都應該知道如何建立這些UI元件。

歡迎關注公眾號: 前端印象

然而,在某些時候,你想要使用一個UI庫,它可以讓你訪問許多共享相同設計系統的預構建元件。以下所有的UI庫都帶有基本元件,如按鈕、下拉選單、對話方塊和列表:

  • Material UI (MUI) [41] (最流行)

  • Mantine [42] (最推薦的)

  • Chakra UI [43] (最推薦的)

  • Ant Design [44]

  • Radix [45]

  • Primer [46]

  • NextUI [47]

  • Tailwind UI [48] (不是免費的)

  • Semantic UI [49]

  • React Bootstrap [50]

儘管所有這些UI庫都帶有許多內部元件,但它們不能使每個元件都像只關注一個UI元件的庫那樣強大。例如, React-table-library [51] 允許你在React中建立功能強大的表元件,同時也提供了主題(如Material UI),可以很好地融入流行的UI元件庫中。

React 動畫庫

web應用中的任何動畫都是從CSS開始的。最終你會發現CSS動畫不能滿足你的需求。通常開發者會選擇 React Transition Group [52] ,這樣他們就可以使用React元件來執行動畫了。React的其他知名動畫庫有:

  • Framer Motion [53] (最推薦的)

  • react-spring [54] (也經常推薦的)

  • react-motion [55]

  • react-move [56]

  • Animated [57] (React Native)

React 中的視覺化和圖表庫

如果你真的想要自己從頭開始建立圖表,那麼就沒有辦法繞過 D3 [58] 。這是一個低階的視覺化庫,可以為你提供建立令人驚歎的圖表所需的一切。然而,學習D3是一個完全不同的冒險,因此許多開發人員只是選擇一個React圖表庫,它可以為他們做所有的事情,以換取靈活性。以下是一些流行的解決方案:

  • Recharts [59]

  • react-chartjs [60]

  • visx [61]

  • Victory [62]

React 中的表單庫

React 中最受歡迎的表單庫是 React Hook Form。它提供了從驗證(最流行的整合是 yup 和 zod)到提交到表單狀態管理所需的一切。過去更流行的另一種選擇是Formik。兩者都是你的 React 應用程式的有效解決方案。這個領域的另一個選擇是 React Final Form。畢竟,如果你已經在使用 React UI 庫,你還可以檢視他們的內建表單解決方案。

建議:

  • React Hook Form

    • 使用yup或zod整合進行驗證

  • 如果使用UI庫,請檢查內建表單是否支援所有需求

React 型別檢查

React自帶一個內部的型別檢查,叫做 PropTypes [63] 。通過使用PropTypes,你可以為React元件定義prop。當一個錯誤型別的prop被傳遞給元件時,你會在執行應用程式時得到一個錯誤訊息:

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

然而,PropTypes不再包含在React核心庫中。在過去的幾年裡,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>

如果你真的想在React中擁抱型別, TypeScript [64] 是現在的最佳選擇。

建議:

  • 如果需要型別化的JavaScript,使用TypeScript

React 程式碼結構:樣式和格式

本質上,有兩種方法可以遵循程式碼結構的常識:

如果你想要一種統一的、通用的程式碼風格,在你的React專案中使用ESLint。像ESLint這樣的檢測程式在你的React專案中強制執行特定的程式碼風格。例如,你可以在ESLint中要求遵循一個流行的風格指南(如Airbnb風格指南)。之後,將ESLint與你的IDE/編輯器整合,它會指出你的每一個錯誤。

繼續閱讀: React檔案/資料夾結構 [65]

如果你想採用統一的程式碼格式,在React專案中使用Prettier。它是一個固執的程式碼格式化器,只有少量可選擇的配置。你可以將其整合到編輯器或IDE中,以便在每次儲存檔案時對程式碼進行格式化。雖然Prettier不能取代ESLint,但它可以很好地與ESLint整合。

建議:

  • ESLint + Prettier

React 驗證

在React應用程式中,你可能希望引入帶有註冊、登入和退出等功能的身份驗證。其他功能,如密碼重置和密碼更改功能通常也需要。這些特性遠遠超出了React的範疇,因為後臺應用程式會為你管理這些東西。

繼續閱讀: 如何準備React Router認證 [66]

最好的學習經驗是自己實現一個帶有身份驗證的後端應用程式(例如 GraphQL backend [67] )。然而,由於身份驗證有很多安全風險,而且並非每個人都知道細節,我建議使用現有的眾多身份驗證/後端即服務解決方案中的一種:

  • Firebase [68]

  • Auth0 [69]

  • AWS Cognito [70]

建議:

  • 選擇一個認證服務或BaaS(如Firebase)

  • 可選學習經驗:自定義後端

React 託管

你可以像部署其他web應用一樣部署和託管React應用。如果你想擁有完全的控制權,選擇像 Digital Ocean [71] 這樣的東西。如果你想找人來處理所有的事情, Cloudflare Workers [72]Netlify [73]Vercel [74] (特別是針對Next.js)是流行的解決方案。如果你已經在使用像Firebase這樣的第三方後臺服務,你可以檢查他們是否也提供託管服務(例如 Firebase hosting [75] )。

React 中的測試

如果你想深入瞭解React中的測試,請閱讀這篇文章:如何在React中測試元件。這裡有一個要點:測試一個React應用的主幹是Jest。它提供了測試執行器、斷言庫和監視/模仿/存根功能。一個全面的測試框架所需要的一切。

至少,你可以使用 React-test-renderer [76] 在Jest測試中呈現React元件。這已經足夠用Jest執行所謂的 Snapshot Tests [77] 了。Snapshot Tests的工作方式如下:一旦執行測試,就會建立React元件中呈現的DOM元素的快照。當你在某個時間點再次執行測試時,將建立另一個快照,該快照將用作前一個快照的差異。如果差異不相同,Jest將發出抱怨,你要麼必須接受快照,要麼更改元件的實現。

最終,你會發現自己正在使用流行的 React測試庫(RTL) [78] ——它是在Jest測試環境中使用的——來為React建立一個更復雜的測試庫。RTL使呈現元件和在HTML元素上模擬事件成為可能。之後,Jest用於DOM節點上的斷言。

如果你正在尋找React端到端(E2E)測試的測試工具, Cypress [79] 是最受歡迎的選擇。不過另一個越來越受歡迎的是 Playwright [80]

建議:

  • Unit/Integration: Jest + React Testing Library (最流行的)

  • Snapshot Tests: Jest

  • E2E Tests: Cypress

React 和不可變資料結構

Vanilla JavaScript 為你提供了大量的內建工具來處理資料結構,就好像它們是不可變的一樣。但是,如果你和你的團隊覺得需要執行不可變的資料結構,那麼最流行的選擇之一就是 Immer [81] 。我個人不使用它,因為JavaScript可以用於管理不可變的資料結構,但任何時候有人問起JS的不可變性,就會有人推薦它。

React 國際化

當涉及到React應用程式的國際化i18n時,你不僅需要考慮翻譯,還需要考慮多元化、日期和貨幣的格式,以及其他一些事情。以下是最常用的處理它的庫:

  • FormatJS [82]

  • react-i18next [83]

React中的富文字編輯器

說到React中的富文字編輯器,我只能想到以下這些,因為我還沒有在React中使用過其他的編輯器:

  • Draft.js [84]

  • Slate.js [85]

  • ReactQuill [86]

React 中的支付

和其他網路應用一樣,最常見的支付提供商是Stripe和PayPal。兩者都可以巧妙地整合到React中。這是一個與React整合的Stripe Checkout。

  • PayPal [87]

  • React Stripe Elements [88] or Stripe Checkout [89]

React 中的時間

JavaScript本身在最近幾年的日期和時間處理上做得非常棒。因此,實際上不需要使用庫來處理它們。然而,如果你的React應用需要處理大量的日期、時間和時區,你可以引入一個庫來為你管理這些東西。以下是你的選擇:

  • date-fns [90]

  • Day.js [91]

  • Luxon [92]

React 桌面應用程式

Electron [93] 是跨平臺桌面應用程式的框架。然而,也有其他選擇,例如:

  • Tauri [94] (fairly new)

  • NW.js [95]

  • Neutralino.js [96]

使用React進行手機開發

想將React從網頁帶到手機平臺的解決方案仍然是React Native。如果你想幫助一個框架建立React Native應用程式,請檢視 Expo [97]

繼續閱讀: 學習React Native [98]

React VR/AR

通過React,我們可以深入研究虛擬現實或增強現實。老實說,我沒有使用過這些庫中的任何一個,但它們是我在React中所熟悉的AR/VR庫:

  • react-three-fiber [99] (流行的 3d 庫, 我也看到過VR的例子)

  • react-360 [100]

  • aframe-react [101]

React的原型設計

如果你有UI/UX背景,你可能想要使用一個工具來快速建立React元件、佈局或UI/UX概念的原型。我過去使用 Sketch [102] ,但後來改用 Figma [103] 。雖然我兩個都喜歡,但我現在不後悔使用Figma。 Zeplin [104] 是另一種選擇。對於粗糙而輕量級的草圖,我喜歡使用E xcalidraw [105] 。如果你正在尋找互動式UI/UX設計,請檢視 InVision [106]

React 元件文件

如果你負責為元件編寫文件,有各種各樣的React文件工具。我已經在許多專案中使用了Storybook,我只能推薦它,但我也聽說過其他解決方案的好處:

  • Docusaurus [107]

  • Docz [108]

  • Styleguidist [109]

畢竟,React生態系統可以被看作是React的一個框架,但它的核心仍然是React的靈活性。它是一個靈活的框架,你可以根據自己的瞭解做出想要選擇加入哪些庫的決定。你可以從小處開始,只新增庫來解決特定的問題。相反,如果你只需要React,你可以只使用這個庫來保持輕量級。

結語

好了以上就是本文的所有內容,如有問題,歡迎指正 :rose:

作者:LBJ

連結:https://juejin.cn/post/7085558184252801061

參考資料

[1]

React Libraries for 2022: https%3A%2F%2Fwww.robinwieruch.de%2Freact-libraries%2F

[2]

函式元件: https%3A%2F%2Fwww.robinwieruch.de%2Freact-function-component%2F

[3]

create-react-app (CRA): https%3A%2F%2Fgithub.com%2Ffacebookincubator%2Fcreate-react-app

[4]

瞭解為什麼像React這樣的框架很重要: https%3A%2F%2Fwww.robinwieruch.de%2Fwhy-frameworks-matter%2F

[5]

Vite: https%3A%2F%2Fvitejs.dev%2F

[6]

速度令人難以置信: https%3A%2F%2Ftwitter.com%2Frwieruch%2Fstatus%2F1491093471490412547

[7]

Next.js: https%3A%2F%2Fnextjs.org%2F

[8]

Gatsby.js: https%3A%2F%2Fwww.gatsbyjs.org%2F

[9]

React 的基礎知識: https%3A%2F%2Fwww.roadtoreact.com%2F

[10]

Remix: https%3A%2F%2Fremix.run%2F

[11]

瞭解有關網站和 Web 應用程式的更多資訊: https%3A%2F%2Fwww.robinwieruch.de%2Fweb-applications%2F

[12]

如何建立現代 JavaScript 專案: https%3A%2F%2Fwww.robinwieruch.de%2Fjavascript-project-setup-tutorial%2F

[13]

建立一個React專案: https%3A%2F%2Fwww.robinwieruch.de%2Fminimal-react-webpack-babel-setup%2F

[14]

useState: https%3A%2F%2Fwww.robinwieruch.de%2Freact-usestate-hook

[15]

useReducer: https%3A%2F%2Fwww.robinwieruch.de%2Freact-usereducer-hook%2F

[16]

useContext Hook: https%3A%2F%2Fwww.robinwieruch.de%2Freact-usecontext-hook%2F

[17]

瞭解何時使用useState和useReducer: https%3A%2F%2Fwww.robinwieruch.de%2Freact-usereducer-vs-usestate%2F

[18]

學習如何結合useState/useReducer和useContext: https%3A%2F%2Fwww.robinwieruch.de%2Freact-state-usereducer-usestate-usecontext%2F

[19]

Redux: https%3A%2F%2Fredux.js.org%2F

[20]

學習Redux: https%3A%2F%2Fwww.robinwieruch.de%2Freact-redux-tutorial%2F

[21]

Redux Toolkit: https%3A%2F%2Fredux-toolkit.js.org%2F

[22]

Zustand: https%3A%2F%2Fgithub.com%2Fpmndrs%2Fzustand

[23]

Jotai: https%3A%2F%2Fgithub.com%2Fpmndrs%2Fjotai

[24]

XState: https%3A%2F%2Fgithub.com%2Fstatelyai%2Fxstate

[25]

Recoil: https%3A%2F%2Fgithub.com%2Ffacebookexperimental%2FRecoil

[26]

React Query: https%3A%2F%2Freact-query.tanstack.com%2F

[27]

瞭解React Query是如何工作的: https%3A%2F%2Fwww.robinwieruch.de%2Freact-hooks-fetch-data%2F

[28]

REST api: https%3A%2F%2Fwww.robinwieruch.de%2Fnode-express-server-rest-api%2F

[29]

GraphQL: https%3A%2F%2Fwww.roadtographql.com%2F

[30]

Apollo Client: https%3A%2F%2Fwww.apollographql.com%2Fdocs%2Freact%2F

[31]

urql: https%3A%2F%2Fformidable.com%2Fopen-source%2Furql%2F

[32]

Relay: https%3A%2F%2Fgithub.com%2Ffacebook%2Frelay

[33]

React中關於本地和遠端資料狀態的所有內容: https%3A%2F%2Fwww.robinwieruch.de%2Freact-state%2F

[34]

RTK Query: https%3A%2F%2Fredux-toolkit.js.org%2Frtk-query%2Foverview

[35]

React Router: https%3A%2F%2Freactrouter.com%2F

[36]

學習使用React Router: https%3A%2F%2Fwww.robinwieruch.de%2Freact-router%2F

[37]

條件渲染: https%3A%2F%2Fwww.robinwieruch.de%2Fconditional-rendering-react%2F

[38]

React CSS樣式: https%3A%2F%2Fwww.robinwieruch.de%2Freact-css-styling%2F

[39]

styles-components: https%3A%2F%2Fwww.robinwieruch.de%2Freact-styled-components%2F

[40]

Tailwind CSS: https%3A%2F%2Ftailwindcss.com%2F

[41]

Material UI (MUI): https%3A%2F%2Fmaterial-ui.com%2F

[42]

Mantine: https%3A%2F%2Fmantine.dev%2F

[43]

Chakra UI: https%3A%2F%2Fchakra-ui.com%2F

[44]

Ant Design: https%3A%2F%2Fant.design%2F

[45]

Radix: https%3A%2F%2Fwww.radix-ui.com%2F

[46]

Primer: https%3A%2F%2Fprimer.style%2Freact%2F

[47]

NextUI: https%3A%2F%2Fnextui.org%2F

[48]

Tailwind UI: https%3A%2F%2Fwww.tailwindui.com%2F

[49]

Semantic UI: https%3A%2F%2Fwww.robinwieruch.de%2Freact-semantic-ui-tutorial

[50]

React Bootstrap: https%3A%2F%2Freact-bootstrap.github.io%2F

[51]

React-table-library: https%3A%2F%2Freact-table-library.com%2F

[52]

React Transition Group: https%3A%2F%2Freactcommunity.org%2Freact-transition-group%2F

[53]

Framer Motion: https%3A%2F%2Fwww.framer.com%2Fmotion%2F

[54]

react-spring: https%3A%2F%2Fgithub.com%2Freact-spring%2Freact-spring

[55]

react-motion: https%3A%2F%2Fgithub.com%2Fchenglou%2Freact-motion

[56]

react-move: https%3A%2F%2Fgithub.com%2Fsghall%2Freact-move

[57]

Animated: https%3A%2F%2Ffacebook.github.io%2Freact-native%2Fdocs%2Fanimated

[58]

D3: https%3A%2F%2Fd3js.org%2F

[59]

Recharts: http%3A%2F%2Frecharts.org%2F

[60]

react-chartjs: https%3A%2F%2Fgithub.com%2Freactchartjs%2Freact-chartjs-2

[61]

visx: https%3A%2F%2Fgithub.com%2Fairbnb%2Fvisx

[62]

Victory: https%3A%2F%2Fformidable.com%2Fopen-source%2Fvictory%2F

[63]

PropTypes: https%3A%2F%2Ffacebook.github.io%2Freact%2Fdocs%2Ftypechecking-with-proptypes.html

[64]

TypeScript: https%3A%2F%2Fwww.typescriptlang.org%2F

[65]

React檔案/資料夾結構: https%3A%2F%2Fwww.robinwieruch.de%2Freact-folder-structure%2F

[66]

如何準備React Router認證: https%3A%2F%2Fwww.robinwieruch.de%2Freact-router-authentication%2F

[67]

GraphQL backend: https%3A%2F%2Fwww.robinwieruch.de%2Fgraphql-apollo-server-tutorial%2F

[68]

Firebase: https%3A%2F%2Fwww.robinwieruch.de%2Fcomplete-firebase-authentication-react-tutorial%2F

[69]

Auth0: https%3A%2F%2Fauth0.com%2F

[70]

AWS Cognito: https%3A%2F%2Faws.amazon.com%2Fcognito%2F

[71]

Digital Ocean: https%3A%2F%2Fm.do.co%2Fc%2Ffb27c90322f3

[72]

Cloudflare Workers: https%3A%2F%2Fworkers.cloudflare.com%2F

[73]

Netlify: https%3A%2F%2Fwww.netlify.com%2F

[74]

Vercel: https%3A%2F%2Fvercel.com%2F

[75]

Firebase hosting: https%3A%2F%2Ffirebase.google.com%2Fdocs%2Fhosting

[76]

React-test-renderer: https%3A%2F%2Freactjs.org%2Fdocs%2Ftest-renderer.html

[77]

Snapshot Tests: https%3A%2F%2Fwww.robinwieruch.de%2Freact-testing-jest%2F

[78]

React測試庫(RTL): https%3A%2F%2Fwww.robinwieruch.de%2Freact-testing-library%2F

[79]

Cypress: https%3A%2F%2Fwww.robinwieruch.de%2Freact-testing-cypress%2F

[80]

Playwright: https%3A%2F%2Fplaywright.dev%2F

[81]

Immer: https%3A%2F%2Fgithub.com%2Fimmerjs%2Fimmer

[82]

FormatJS: https%3A%2F%2Fgithub.com%2Fformatjs%2Fformatjs

[83]

react-i18next: https%3A%2F%2Fgithub.com%2Fi18next%2Freact-i18next

[84]

Draft.js: https%3A%2F%2Fdraftjs.org%2F

[85]

Slate.js: https%3A%2F%2Fwww.slatejs.org%2F

[86]

ReactQuill: https%3A%2F%2Fgithub.com%2Fzenoamaro%2Freact-quill

[87]

PayPal: https%3A%2F%2Fdeveloper.paypal.com%2Fdocs%2Fcheckout%2F

[88]

React Stripe Elements: https%3A%2F%2Fgithub.com%2Fstripe%2Freact-stripe-js

[89]

Stripe Checkout: https%3A%2F%2Fstripe.com%2Fdocs%2Fpayments%2Fcheckout

[90]

date-fns: https%3A%2F%2Fgithub.com%2Fdate-fns%2Fdate-fns

[91]

Day.js: https%3A%2F%2Fgithub.com%2Fiamkun%2Fdayjs

[92]

Luxon: https%3A%2F%2Fgithub.com%2Fmoment%2Fluxon%2F

[93]

Electron: https%3A%2F%2Fwww.electronjs.org%2F

[94]

Tauri: https%3A%2F%2Fgithub.com%2Ftauri-apps%2Ftauri

[95]

NW.js: https%3A%2F%2Fnwjs.io%2F

[96]

Neutralino.js: https%3A%2F%2Fgithub.com%2Fneutralinojs%2Fneutralinojs

[97]

Expo: https%3A%2F%2Fwww.robinwieruch.de%2Freact-native-expo%2F

[98]

學習React Native: https%3A%2F%2Fwww.robinwieruch.de%2Freact-native-navigation%2F

[99]

react-three-fiber: https%3A%2F%2Fgithub.com%2Fpmndrs%2Freact-three-fiber

[100]

react-360: https%3A%2F%2Ffacebook.github.io%2Freact-360%2F

[101]

aframe-react: https%3A%2F%2Fgithub.com%2Fsupermedium%2Faframe-react

[102]

Sketch: https%3A%2F%2Fwww.sketch.com%2F

[103]

Figma: https%3A%2F%2Fwww.figma.com%2F

[104]

Zeplin: https%3A%2F%2Fzeplin.io%2F

[105]

xcalidraw: https%3A%2F%2Fexcalidraw.com%2F

[106]

InVision: https%3A%2F%2Fwww.invisionapp.com%2F

[107]

Docusaurus: https%3A%2F%2Fgithub.com%2Ffacebook%2Fdocusaurus

[108]

Docz: https%3A%2F%2Fgithub.com%2Fdoczjs%2Fdocz

[109]

Styleguidist: https%3A%2F%2Fgithub.com%2Fstyleguidist%2Freact-styleguidist

創作不易, 加個 點贊、在看   支援一下哦!