你的第一個元件

元件是 React 的核心概念之一。它們是你構建使用者介面 (UI) 的基礎，這使得它們成為開始 React 旅程的完美起點！

元件：UI 建構區塊

在網路上，HTML 讓我們能夠使用其內建的一組標籤（例如<h1> 和 <li>）來建立豐富的結構化文件：

此標記語言代表了這篇文章<article>、其標題 <h1>，以及一個（縮寫的）目錄作為有序列表<ol>。像這樣的標記語言，結合用於樣式的 CSS 和用於互動性的 JavaScript，構成了你在網路上看到的每個側邊欄、頭像、模態視窗、下拉選單——每一個 UI 片段背後的基礎。

React 讓你可以將標記語言、CSS 和 JavaScript 組合成自訂的「元件」，即應用程式中可重複使用的 UI 元素。你上面看到的目錄程式碼可以轉換成一個 <TableOfContents />元件，你可以在每個頁面上渲染它。在底層，它仍然使用相同的 HTML 標籤，例如<article>、<h1>等。

就像使用 HTML 標籤一樣，你可以組合、排序和嵌套元件來設計整個頁面。例如，你正在閱讀的這份文件頁面就是由 React 元件構成的：

隨著專案的增長，你會注意到許多設計可以透過重複使用你已經編寫的元件來組合，從而加速你的開發。我們上面的目錄可以透過 <TableOfContents />添加到任何畫面！你甚至可以使用 React 開源社群分享的數千個元件來快速啟動你的專案，例如Chakra UI 和 Material UI。

定義元件

傳統上，在建立網頁時，網頁開發人員會標記他們的內容，然後透過添加一些 JavaScript 來增加互動性。當互動性在網路上只是錦上添花時，這種方式運作得很好。現在，許多網站和所有應用程式都期望具備互動性。React 將互動性放在首位，同時仍然使用相同的技術：React 元件是一個 JavaScript 函數，你可以在其中嵌入標記語言。以下是它的樣子（你可以編輯下面的範例）：

以下是構建元件的方法：

步驟 1：匯出元件

前綴export default 是 標準的 JavaScript 語法（並非 React 特有）。它讓你可以標記檔案中的主要函數，以便稍後從其他檔案匯入它。（更多關於匯入的資訊請參閱匯入與匯出元件！）

步驟 2：定義函數

使用function Profile() { } 你可以定義一個名為 Profile的 JavaScript 函數。

步驟 3：添加標記語言

該元件返回一個帶有<img />屬性的src 和 alt 標籤。<img />寫得像 HTML，但實際上底層是 JavaScript！這種語法稱為JSX，它讓你可以將標記語言嵌入到 JavaScript 中。

返回語句可以全部寫在一行上，就像這個元件一樣：

但如果你的標記語言沒有全部與 return關鍵字放在同一行，你必須將其包裹在一對括號內：

使用元件

現在你已經定義了你的Profile元件，你可以將其嵌套在其他元件內部。例如，你可以匯出一個Gallery 元件，它使用多個 Profile 元件：

瀏覽器看到的內容

注意大小寫的區別：

• <section>是小寫，所以 React 知道我們指的是 HTML 標籤。
• <Profile /> 以大寫字母 P開頭，所以 React 知道我們想要使用名為Profile的元件。

而 Profile包含更多 HTML：<img />。最終，瀏覽器看到的是這樣的內容：

嵌套與組織元件

元件是普通的 JavaScript 函數，因此你可以將多個元件放在同一個檔案中。當元件相對較小或彼此緊密相關時，這很方便。如果這個檔案變得擁擠，你隨時可以將Profile 移到單獨的檔案中。你將在稍後的 關於匯入的頁面上學習如何做到這一點。

因為 Profile 元件是在 Gallery內部渲染的——甚至多次！——我們可以說Gallery是一個父元件， 將每個 Profile渲染為「子元件」。這就是 React 的魔力之一：你可以定義一個元件一次，然後在任意多的地方、任意多次地使用它。

總結

您剛剛初次體驗了 React！讓我們回顧一些關鍵點。

• React 讓您可以建立組件，這是您應用程式中可重複使用的 UI 元素。
• 在 React 應用程式中，每一塊 UI 都是一個組件。
• React 組件是普通的 JavaScript 函數，但有以下例外：
  1. 它們的名稱總是以大寫字母開頭。
  2. 它們返回 JSX 標記。