快速入門

歡迎來到 React 文件！本頁將為您介紹您日常工作中會用到的 80% 的 React 概念。

建立與巢狀化元件

React 應用程式是由元件組成的。元件是使用者介面（UI）的一部分，擁有自己的邏輯和外觀。元件可以小到一個按鈕，也可以大到整個頁面。

React 元件是會回傳標記的 JavaScript 函式：

現在您已經宣告了MyButton，您可以將它巢狀化到另一個元件中：

請注意<MyButton />以大寫字母開頭。這就是您辨識它為 React 元件的方式。React 元件名稱必須以大寫字母開頭，而 HTML 標籤則必須是小寫。

看看結果：

關鍵字export default指定了檔案中的主要元件。如果您對某些 JavaScript 語法不熟悉，MDN和javascript.info有很好的參考資料。

使用 JSX 撰寫標記

您在上面看到的標記語法稱為JSX。它是可選的，但大多數 React 專案因其便利性而使用 JSX。所有我們推薦用於本地開發的工具都預設支援 JSX。

JSX 比 HTML 更嚴格。您必須關閉像<br />這樣的標籤。您的元件也不能回傳多個 JSX 標籤。您必須將它們包裝在一個共享的父層中，例如<div>...</div>或一個空的<>...</>包裝器：

如果您有大量 HTML 需要轉換為 JSX，可以使用線上轉換器。

加入樣式

在 React 中，您使用className來指定 CSS 類別。它的運作方式與 HTML 的class屬性相同：

然後您在單獨的 CSS 檔案中為它編寫 CSS 規則：

React 並未規定您如何加入 CSS 檔案。在最簡單的情況下，您會在 HTML 中加入一個<link>標籤。如果您使用建置工具或框架，請查閱其文件以了解如何將 CSS 檔案加入您的專案。

顯示資料

JSX 讓您可以將標記放入 JavaScript 中。大括號讓您可以「跳回」JavaScript，以便嵌入程式碼中的某些變數並將其顯示給使用者。例如，這將顯示user.name：

您也可以從 JSX 屬性中「跳入 JavaScript」，但您必須使用大括號而非引號。例如，className="avatar"將字串"avatar"作為 CSS 類別傳遞，但src={user.imageUrl}讀取 JavaScript 變數user.imageUrl的值，然後將該值作為src屬性傳遞：

你也可以在 JSX 大括號內放入更複雜的表達式，例如，字串串接：

在上面的例子中，style={{}}不是特殊語法，而是一個普通的{} 物件，放在 style={ }JSX 大括號內。當你的樣式依賴於 JavaScript 變數時，可以使用style 屬性。

條件式渲染

在 React 中，沒有專門用於編寫條件的特殊語法。相反，你會使用與編寫常規 JavaScript 程式碼時相同的技巧。例如，你可以使用if陳述式來有條件地包含 JSX：

如果你偏好更簡潔的程式碼，可以使用條件運算子 ?。 與 if不同，它可以在 JSX 內部使用：

當你不需要 else分支時，也可以使用更簡短的邏輯 && 語法：

所有這些方法也適用於有條件地指定屬性。如果你對其中一些 JavaScript 語法不熟悉，可以先從總是使用if...else開始。

渲染清單

你將依賴 JavaScript 功能，例如for 迴圈 和 陣列 map() 函式 來渲染元件清單。

例如，假設你有一個產品陣列：

在你的元件內部，使用map() 函式將產品陣列轉換為 <li>項目陣列：

請注意 <li>有一個key屬性。對於清單中的每個項目，你應該傳遞一個字串或數字，該字串或數字在其同層級項目中唯一標識該項目。通常，key 應該來自你的資料，例如資料庫 ID。React 使用你的 key 來了解如果你稍後插入、刪除或重新排序項目時發生了什麼。

響應事件

你可以透過在元件內宣告事件處理器函式來響應事件：

請注意 onClick={handleClick} 末尾沒有括號！不要呼叫事件處理器函式：你只需要傳遞它。當使用者點擊按鈕時，React 會呼叫你的事件處理器。

更新畫面

通常，你會希望你的元件「記住」一些資訊並顯示它。例如，你可能想計算按鈕被點擊的次數。為此，請將狀態加入你的元件。

從 React 匯入useState

現在你可以在你的元件內部宣告一個狀態變數：

你可以從useState得到兩樣東西：當前的狀態（count），以及用來更新它的函式（setCount）。你可以為它們取任何名稱，但慣例是寫成[something, setSomething]。

按鈕第一次顯示時，count會是0，因為你傳遞了0給useState()。當你想要改變狀態時，呼叫setCount()並將新值傳遞給它。點擊此按鈕將會增加計數器：

React 會再次呼叫你的元件函式。這次，count會是1。接著會是2。依此類推。

如果你多次渲染同一個元件，每個元件都會擁有自己的狀態。分別點擊每個按鈕：

請注意每個按鈕如何「記住」自己的count狀態，且不影響其他按鈕。

使用 Hook

以use開頭的函式稱為Hook。useState是 React 提供的內建 Hook。你可以在API 參考中找到其他內建 Hook。你也可以透過組合現有的 Hook 來撰寫自己的 Hook。

Hook 比其他函式有更多限制。你只能在元件（或其他 Hook）的頂層呼叫 Hook。如果你想在條件式或迴圈中使用useState，請提取一個新的元件並將其放在那裡。

在元件之間共享資料

在前面的例子中，每個MyButton都有自己獨立的count，且當每個按鈕被點擊時，只有被點擊按鈕的count會改變：

最初，每個MyButton的count狀態都是0

第一個MyButton將其count更新為1

然而，通常你會需要元件共享資料並始終一起更新。

為了讓兩個MyButton元件顯示相同的count並一起更新，你需要將狀態從各個按鈕「向上」移動到包含它們所有的最接近的元件。

在這個例子中，就是MyApp：

最初，MyApp的count狀態為0，並傳遞給兩個子元件

點擊時，MyApp 將其 count狀態更新為1 並傳遞給兩個子元件

現在當你點擊任一按鈕時，MyApp中的count 將會改變，這將改變 MyButton中的兩個計數值。以下是如何用程式碼表達這一點。

首先，將狀態向上移動，從MyButton移到MyApp：

然後，將狀態向下傳遞，從MyApp傳給每個MyButton，連同共享的點擊處理器。你可以使用 JSX 大括號將資訊傳遞給MyButton，就像你之前對內建標籤如 <img>所做的那樣：

像這樣向下傳遞的資訊稱為 props。現在MyApp 元件包含 count 狀態和 handleClick事件處理器，並將兩者都作為 props 向下傳遞 給每個按鈕。

最後，修改MyButton，使其讀取從其父元件傳遞下來的 props：

當你點擊按鈕時，onClick處理器會被觸發。每個按鈕的onClickprop 被設定為MyApp 內部的 handleClick函數，因此其中的程式碼會執行。該程式碼呼叫setCount(count + 1)，遞增 count 狀態變數。新的 count值作為 prop 傳遞給每個按鈕，因此它們都顯示新值。這稱為「狀態提升」。通過將狀態向上移動，你已在元件之間共享了它。

下一步

到目前為止，你已經瞭解了編寫 React 程式碼的基礎知識！

查看 教學，將它們付諸實踐，並用 React 構建你的第一個迷你應用程式。