type
status
date
slug
summary
tags
category
icon
password
使用 React 己經有一段時間，以下是記錄在2024年中目前正在用及未來可能會使用的 React 套件。
React 框架
React官網建議使用以 React 為基礎的框架來取代
create—react-app. 那在 2024 年如何創建 React 專案呢? 客戶端
如果想要一個客戶端的 React 項目，最好的選擇是 Vite，它取代了已棄用的
create—react-app 工具。使用 Vite 創建 React 項目
1.安裝 Node.js 和 npm。
2.安裝 Vite：
npm install -g vite3.創建一個新的 React 專案：
vite init my-project4.切換到新創建的專案目錄：
cd my-project5.啟動開發服務器：
npm run dev6.瀏覽
http://localhost:3000 查看網頁。伺服器端
要構建伺服器端或全端的 React 專案，Next.js 是最完整和最流行的全端框架。
使用 Next.js 創建 React 項目
1.安裝 Node.js 和 npm。
2.安裝 Next.js：
npm install -g next3.創建一個新的 Next.js 專案：
npx create-next-app my-project4.切換到新創建的專案目錄：
cd my-project5.啟動開發伺服器：
npm run dev6.瀏覽
http://localhost:3000 查看網頁。其他選擇
- Remix：Remix 是另一個很棒的全端替代方案。
- Astro：Astro 允許 React 與其它框架（例如 Vue 和 Svelte）一起使用，並且會以最少量的 JS 程式碼送到客戶端 以實現快速的加載。
CSS 和 UI 庫
所有框架都包含基本的 CSS 支援。 可以使用純 CSS 進行開發或採用 CSS 模組來快開發，目前最流行的 CSS 模組是 Tailwind CSS。它允許直接在組件檔案中快速添加樣式。
ShadCN 是最近非常流行的 UI 庫，它結合了 Tailwind CSS 和 Radix UI 。 Radix UI 所標榜的最大特色之一就是他們的所有元件都遵守 WAI-ARIA 標準規範，且有通過跨瀏覽器及多種輔助科技的測試。ShadCN 的流行得益於它在 Tailwind CSS 的幫助下提供了更大的組件外觀控制權。
此外，Material UI 仍然很受歡迎。
數據請求
在 2024 年，React 從伺服器獲取資料的最佳方式仍然是 React Query，它現在改名為 Tanstack Query。Tanstack Query 允許您通過便捷的自訂 Hooks 細粒度控制資料獲取、何時獲取和重新獲取資料、快取，以及非常輕鬆地更改或修改資料。
Tanstack Query 的一些主要功能包括：
- 細粒度控制：您可以控制資料何時獲取、如何快取以及如何更新。
- 方便的自訂 Hooks：Tanstack Query 提供了一系列自訂 Hooks，可簡化資料獲取的邏輯。
- 強大的快取：Tanstack Query 內建了強大的快取機制，可提高性能並減少對伺服器的請求。
- 易於使用：Tanstack Query 易於學習和使用。
另一個可靠的替代方案是 SWR，它也提供了一個用於處理查詢和突變的自訂 Hook，但它提供的內容要簡單得多。SWR 的一些主要功能包括：
- 簡單易用：SWR 易於學習和使用。
- 性能最佳化：SWR 內建了快取機制，可提高性能。
- 可擴展性：SWR 可以擴展以滿足您的特定需求。
路由
框架中的路由
如果您使用的是 Next.js、Remix 或 Astro 等框架，您的路由功能已經內建。它們都提供內建的方式在您的項目中建立路由或頁面。
客戶端的路由
對於使用 Vite 或 Create React App 等工具建立的客戶端 React 應用程式，您需要選擇一個路由庫。React Router 仍然是最流行的選擇。它可以滿足您所有可能的路由需求，並且由於其具有 loader prop 的資料載入功能而非常強大。loader prop 允許您在不需要使用 React Query 等外部庫的情況下獲取特定路由的資料。
Tanstack Router 是一個新興的庫，似乎具有同樣優秀的功能。Tanstack Router 旨在完全類型安全，並提供與 React Router 6 版本一樣出色且默認的資料獲取功能。
雖然 Tanstack Router 較新，但無論您選擇哪個都錯不了，而且如果您已經在應用程式中使用 Tanstack Query 或 SWR，Tanstack Router 亦是一個完美的搭配。
帳號驗證管理
帳號驗證服務通常由後端處理，但了解哪些庫可以與 React 整合仍然很重要
常見的選擇
- Supabase：功能強大且易於集成的驗證解決方案。
- NextAuth：專為 Next.js 設計的驗證庫。
表單
在大多數情況下，如果只需建構簡單的表單，是不需要表單庫。但是，如果要建構更複雜的應用程式並且有很多表單，那麼 React Hook Form 是一個功能齊全的表單庫，它允許您使用最少的程式碼驗證表單輸入並顯示錯誤。
- 作者:fivewillow
- 連結:https://stream-notes.fivewillows.cc/article/2024-should-know-react-libs
- 著作權:本文採用 CC BY-NC-SA 4.0 許可協議，轉載請註明出處。