React 資源

雖然我們在教程中將所有 CSS 保留在一個 index.css 檔案中，但 React 應用程式通常會為每個元件定義樣式表。在由 Vite 提供支援的應用程式中，可以透過建立 CSS 檔案並將其匯入到相應的元件模組來完成此操作。

例如：我們可以編寫一個專門的 Form.css 檔案來存放與 <Form /> 元件相關的 CSS，然後將樣式匯入到 Form.jsx 中，如下所示

import Form from "./Form";
import "./Form.css";

這種方法使您可以輕鬆識別和管理屬於特定元件的 CSS，並將其與應用程式範圍的樣式區分開來。但是，它也會將您的樣式表分散到您的程式碼庫中，這種分散可能不值得。對於具有數百個獨特檢視和大量移動部件的較大應用程式來說，使用元件級樣式是有意義的，從而限制了在任何給定時間傳送給使用者的無關程式碼量。

您可以在 Smashing Magazine 文章 在 React 中為元件設定樣式 中閱讀有關此方法和其他 React 元件樣式設定方法的更多資訊。

在本教程中，我們使用 console.log() 來檢查應用程式的狀態和道具，您還將在 CLI 和瀏覽器的 JavaScript 控制檯中看到一些有用的警告和錯誤訊息。但我們可以做更多的事情。

React DevTools 實用程式允許您直接在瀏覽器中檢查 React 應用程式的內部結構。它會在瀏覽器的開發者工具中新增一個新的面板，允許您檢查各種元件的狀態和道具，甚至編輯狀態和道具，對您的應用程式進行即時更改。

此螢幕截圖顯示了我們完成的應用程式在 React DevTools 中的樣子

在左側，我們看到了構成應用程式的所有元件，包括從陣列渲染的專案的唯一鍵。在右側，我們看到了 App 元件使用的道具和鉤子。還要注意，Form、FilterButton 和 Todo 元件向右縮排，這表示 App 是它們的父元件。這種檢視非常適合一目瞭然地瞭解父子關係，對於瞭解更復雜的應用程式至關重要。

React DevTools 有多種形式

• 一個 Chrome 瀏覽器擴充套件程式。
• 一個 Firefox 瀏覽器擴充套件程式。
• 一個 Microsoft Edge 瀏覽器擴充套件程式。
• 一個 可以使用 npm 或 Yarn 安裝的獨立應用程式。

嘗試安裝其中一個，然後使用它來檢查您剛構建的應用程式！

您可以在 React 文件中閱讀有關 React DevTools 的更多資訊。

在本教程中，我們使用 useState() 鉤子來管理一小部分事件處理程式函式中的狀態。這對於學習目的來說很好，但它將我們的狀態管理邏輯繫結到元件的事件處理程式中，尤其是 <Todo /> 元件的事件處理程式。

useReducer() 鉤子為開發人員提供了一種將不同的但相關的狀態管理邏輯合併到一個函式中的方法。它比 useState() 更復雜，但它是一個非常有用的工具。您可以在 React 文件中閱讀有關 useReducer() 的更多資訊。

我們在本教程中構建的應用程式利用元件道具將資料從其 App 元件傳遞給需要它的子元件。大多數情況下，道具是共享資料的合適方法；但是，對於複雜的、深度巢狀的應用程式來說，它們並不總是最佳選擇。

React 提供了 Context API，作為一種將資料提供給需要它的元件而不透過元件樹向下傳遞道具的方法。還有一種 useContext 鉤子 可以促進這一過程。

如果您想親自嘗試使用此 API，Smashing Magazine 已經編寫了一篇關於 React 上下文的 入門文章。

雖然本教程沒有提到，但可以使用 JavaScript 類 構建 React 元件，這些元件稱為類元件。在鉤子出現之前，類是將狀態引入元件或管理渲染副作用的唯一方法。它們仍然是處理某些邊緣情況的唯一方法，並且在傳統的 React 專案中很常見。官方的 React 文件維護著 Component 基類的參考，但建議使用鉤子來管理 狀態 和 副作用。

諸如 React Testing Library 之類的庫使編寫 React 元件的單元測試成為可能。有很多方法可以執行這些測試。測試框架 Vitest 構建在 Vite 之上，是您基於 Vite 的 React 應用程式的絕佳伴侶。 Jest 是另一個可以與 React 一起使用的流行測試框架。

雖然路由傳統上由伺服器而不是使用者計算機上的應用程式處理，但可以配置 Web 應用程式以讀取和更新瀏覽器的地址，並呈現某些使用者介面。這稱為客戶端路由。您可以為應用程式建立許多獨特的路由（例如 /home、/dashboard 或 /login）。

React Router 是 React 最流行、最強大的客戶端路由庫。它允許開發人員定義應用程式的路由，並將元件與這些路由關聯起來。它還提供許多有用的鉤子和元件來管理瀏覽器的地址和歷史記錄。

• 上一篇
• 概述：瞭解客戶端 JavaScript 框架
• 下一篇