阿川私房教材：學程式，拿 offer！

63 個專案實戰，直接上手！
無需補習，按步驟打造你的面試作品。

立即解鎖你的轉職秘笈
小編精選 - 技術文章翻譯  ·  10月24日

使用 React 建置時您應該了解的程式庫

使用 React 建置時您應該了解的程式庫

在本文中，我將討論可以在React專案中使用的程式庫。

如果你喜歡我的文章，可以請我喝杯咖啡:)

給我買咖啡

  1. 樣式元件

它是一個使 CSS 在 React 應用程式中基於元件編寫的庫。由於它具有基於元件的結構，因此它允許您以模組化的方式單獨設定每個元件的樣式。它還提供動態樣式和主題之間切換等功能。

安裝

  • npm i 樣式元件

  • 紗線加入樣式元件

2.福米克——是的

Formik在表單驗證、表單提交操作和formik狀態管理等方面提供了極大的便利。它簡化了錯誤管理和驗證流程，特別是在處理大型複雜表單時。

安裝

  • npm 和 formik

  • 紗線加入福米克

  1. TanStack查詢

它會自動管理和更新資料變更。它會快取資料並使其可重複使用。它透過快取提高效能並減少不必要的網路請求。該應用程式可以在背景自動更新資料。它在用戶介面中提供最新資料。它提供動態和最新的資料以增強用戶體驗。透過動態 URL 或參數檢索資料。透過有針對性的資料檢索，可以確保只捕獲必要的資料。它提供了強大的功能來檢查和模擬資料狀態。它提供了有用的機制來管理錯誤並向使用者顯示有意義的錯誤訊息。它在錯誤情況下提供重試選項。

安裝

  • npm 我@tanstack/react-query

  • 紗線加入@tanstack/react-query

  1. 永遠

Immutable是一個促進狀態更新的函式庫。它允許您在功能上輕鬆地更改狀態更新，而無需進行突變。當與Redux 等狀態管理工具一起使用時，它允許您對不可變的狀態結構進行更清晰、更易於理解的更新。

安裝

  • npm 我總是

  • 紗線總是加入

  1. 反應彈簧

它是一個用於在應用程式中建立動畫和過渡的庫。它特別廣泛地應用於想要加入動畫和動態互動的專案中。

安裝

  • npm 我反應彈簧

  • 紗線加入@react-spring/web

6.React虛擬化

它允許處理大型資料集而不會遇到效能問題。它透過僅渲染可見元素來避免不必要的渲染操作。

安裝

  • npm i 反應虛擬化

  • 紗線加入反應虛擬化

  1. 反應DnD

它是一個功能強大的庫，用於向使用者介面加入動態互動（例如拖放） 。即使是複雜的拖放操作也可以輕鬆實現。

安裝

  • npm 我反應-dnd

  • 紗線加入反應拖放

8.成幀器運動

Framer Motion是一個可用於建立動畫的現代庫。您可以輕鬆新增和管理與 React 相容的動畫。您可以輕鬆套用從簡單的運動效果到複雜的動畫的所有內容。

安裝

  • npm i 框架運動

  • 紗線加入成幀器運動

  1. 是的

Jest 為 JavaScript 和 React 專案提供測試工具。

安裝

  • npm install--save-dev 反應測試渲染器

  • 紗線加入--dev反應測試渲染器

  1. 故事書

它是一個在隔離環境中測試 React 元件的工具。它使元件開發和測試過程更加有效率。您可以使用它來測試不同的使用者介面狀態並視覺化元件的功能。

安裝

  • npm 我@storybook/react

  • 紗線加入@storybook/react

  1. 反應 i18next

它用於在 React 專案中開發多語言應用程式。它與 i18next 整合工作並促進語言變更操作。可以輕鬆完成動態語言變更操作。

安裝

  • npm 我反應-i18next

  • 紗線加入 i18next-react

12.Redux 工具包

Redux Toolkit是一個讓React 專案中的全域狀態管理變得更簡單、更有效率的工具。它透過簡化Redux的複雜結構來幫助您管理應用程式內的資料流。即使在大型複雜專案中，它也為資料管理和資料更新提供了清晰的結構。它還與Redux DevTools一起使用，後者提供高級除錯和時間旅行除錯功能。

安裝

  • npm 安裝@reduxjs/工具包

  • 紗線加入@reduxjs/工具包

第13州

Zustand是一個工具，可以讓React 專案中的全域狀態管理變得更容易、更有效率。即使在大型複雜專案中，它也為資料管理和資料更新提供了清晰的結構。

安裝

  • npm 我聲明

  • 紗線加入狀態

  1. 軸

它管理 React 應用程式中向外部資源（API、後端等）發送和接收資料的過程。它基於 Promise 的 ** 結構可以輕鬆地與 **async/await 和 then/catch 結構一起使用。它還提供請求逾時、自動轉換和全域配置等功能。

安裝

  • npm 我 axios

  • 紗線加入 axios

15.維泰斯特

Vitest是一個為基於Vite的應用程式量身定制的快速單元測試框架。它與 Jest 類似，但針對Vite進行了優化，提供熱模組更換（HMR）和快速測試執行。透過整合到 Vite，它還支援 TypeScript、JSX 和其他開箱即用的現代 JavaScript 功能。 Vitest 非常適合在 React、Vue 和其他框架中測試元件、實用程式和大型應用程式，提供模擬、快照和覆蓋率報告等功能。

安裝

  • npm 安裝 -D geart

  • 紗線加入-D Geart

結論

在本文中，我們研究了重要的反應庫。您可以透過將程式庫包含在 React 專案中來增加應用程式的功能。

原文出處：https://dev.to/sonaykara/libraries-you-should-know-when-building-with-react-2c2g

0個讚   0留言 54瀏覽
共有 0 則留言
登入之後發表留言
小編精選 - 技術文章翻譯
精選技術文章翻譯，幫助開發者持續吸收新知。

阿川私房教材：學程式，拿 offer！

63 個專案實戰，直接上手！
無需補習，按步驟打造你的面試作品。

立即解鎖你的轉職秘笈
熱門文章
🔥 25 個開源 AI 工具可將您的開發時間縮短一半
🔥 1T 數據到底有多大？
🔥 非工程師，也能對 shopify 的頁面簡單修改圖片、文字嗎？
🔥 利用 shopify 內建 tags 功能做到 coming soon 產品效果
🔥 台灣很少公司在用 shopify 的原因
最新出爐作業包
⭐ 邁向資深之路：非同步 JS 訓練（二）—— 各種寫法的錯誤處理、收尾處理
⭐ 邁向資深之路：非同步 JS 訓練（一）—— 從 Callback Hell 到 Promise 介面
⭐ Github Desktop 新手入門教學 —— 用漂亮的 GUI 介面來學習 Git 基本觀念
⭐ 邁向資深之路：後端 JS 訓練（二）—— 玩玩看 Express，用純後端做做看部落格
⭐ 邁向資深之路：後端 JS 訓練（一）—— 玩玩看 Node，做做看老派 CLI 應用程式
熱門搜尋： 使用 ui 開發 ar css Ml id COM Git 工作 分享 網站 第一 git Js 專案 搜尋 ul Java html 語言 JavaScript 公司 課程 ＣＳＳ 前端 基礎 for 學習 結構 javascript 作為 console 技術 資料庫 開源 架構 github go 作業 網頁 api 系列 Can Javas with Css 工程師 js 框架 java 研究 GIT 後端 jav AWS ci app 測試 編輯 node 伺服器 主題 %' 演算法 Node react 乾淨 user 部落格 清單 套件 練習 部署 登入 javasc 遊戲 json Html bi 查詢 JAVA aws title 改善 HTML docke CSS this url REACT Python VUE 分析 JS 效率 Github component create 媒體
🛡️ 隱私及網站安全：本站註冊過程「不須提供任何個資」，只要 E-Mail 與帳密即可註冊，請安心註冊！線上付款過程使用「綠界科技 ECPay 」第三方專業金流廠商，全程在「綠界科技 ECPay 」網站進行付款程序，本站「不會紀錄任何信用卡資訊」，請放心付款、解鎖課程！您隨時可以透過 FB 粉專或者 Email 聯絡站長，請求刪除網站上的個人資料。