你的第一個元件

元件：UI 構建塊

在網頁上，HTML 允許我們使用其內建的標籤集（例如 <h1> 和 <li>）來建立豐富的結構化文件。

<article>
  <h1>My First Component</h1>
  <ol>
    <li>Components: UI Building Blocks</li>
    <li>Defining a Component</li>
    <li>Using a Component</li>
  </ol>
</article>

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

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

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

<PageLayout>
  <NavigationHeader>
    <SearchBar />
    <Link to="/docs">Docs</Link>
  </NavigationHeader>
  <Sidebar />
  <PageContent>
    <TableOfContents />
    <DocumentationText />
  </PageContent>
</PageLayout>

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

定義元件

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

以下是構建元件的方法

步驟 1：匯出元件

前綴詞 export default 是 標準的 JavaScript 語法（並非 React 特有的）。它允許您標記檔案中的主要函式，以便之後可以從其他檔案匯入它。（更多關於匯入的內容，請參閱匯入和匯出元件！）

步驟 2：定義函式

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

步驟 3：新增標記

該元件會傳回一個帶有 src 和 alt 屬性的 <img /> 標籤。<img /> 看起來像 HTML，但實際上它底層是 JavaScript！這種語法稱為 JSX，它允許您在 JavaScript 中嵌入標記。

Return 陳述式可以寫在同一行，就像此元件一樣

return <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />;

但如果您的標記與 return 關鍵字不在同一行，則必須將其用一對括號括起來

return (
  <div>
    <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  </div>
);

使用元件

現在您已經定義了 Profile 元件，您可以將它巢狀在其他元件中。例如，您可以匯出一個使用多個 Profile 元件的 Gallery 元件

瀏覽器看到的內容

注意大小寫的區別

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

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

<section>
  <h1>Amazing scientists</h1>
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
</section>

巢狀和組織元件

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

因為 Profile 元件是在 Gallery 內部渲染的——即使是多次！——我們可以說 Gallery 是一個父元件，它將每個 Profile 渲染為「子元件」。這是 React 的神奇之處：您可以定義一次元件，然後在任意多個地方和任意多次使用它。

export default function Gallery() {
  // 🔴 Never define a component inside another component!
  function Profile() {
    // ...
  }
  // ...
}

export default function Gallery() {
  // ...
}

// ✅ Declare components at the top level
function Profile() {
  // ...
}