今天要來學習元件，要探索的內容有：

• React component簡介
• 如何創建component
• 如何使用component
• 瀏覽器如何認知

React component是什麼？

Component是一塊塊可以重複使用的UI 元素。也就是將使用者介面切分為小的、可重用的元件，這些元件可以組合在一起以創建複雜的應用程式介面。譬如：profile、gallery、contact list 等等都可以是component。

Componet 也可以以巢狀的形式存在，例如：

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

從這邊的程式碼可見，<PageLayout>、<NavigationHeader>、<SearchBar>

這三個component 彼此的關係是階層式的巢狀關係。在此<PageLayout> 也可以說是<NavigationHeader>的父元件(parent component)，而<SearchBar>則是<NavigationHeader>的子元件。

如何創建component

創建可用的component有三個步驟：（1)匯出元件、(2)定義函式、(3) 添加標記。

例如，這是一個名為Profile 的component：

export default function Profile() {
  return (
    <img
      src="https://i.imgur.com/MK3eW3Am.jpg"
      alt="Katherine Johnson"
    />
  )
}

(程式碼出自react官方文件）

當中，我們可以看見它使用了export default來export，而這就構成了第一個步驟。這邊使用的是預設匯出的（Default）的export方法，也有另一種方法為具名匯出（named exports ），這部分會在之後的章節中再詳細介紹。

再來，我們使用了function Profile() {}來定義我component。這邊需要留意的是，我們必須使用來大寫的來定義讓React明白這是一個component，若沒有使用大寫，將無法順利運作。

至於第三步驟，追加mark up則有二種方法：

(1) 跟return寫在同一行

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

(2)若為多行，則一定要在return之後以（）包住你的內容。

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

順道一提，那我們應該將component放在哪呢？通常component都能放在「根元件檔案」 （root component file），但這也還能再拆分，詳細在後續的文章會提到。

如何使用component

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

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

從這個程式碼你可以看見它分別有二個component，Profile和Gallery，如同我們前面提到的，component可以是巢狀的關係。你也可以看見Profile使用了不只一次，也就是說定義過一次的component可以在各個角落中使用。

雖然component彼此之間可以以巢狀的關係存在，但要注意的是，務必不要將component的定義寫在巢狀結構當中。每一個component 的定義都必須是在最高層級（top level)。

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

// ✅ 在最高層級宣告
function Profile() {
  // ...
}

瀏覽器是如何認知的呢？

那麼我們製作的component，瀏覽器又是如何認知的呢？若是剛剛上面的例子，瀏覽器所見將會如同下方所示：

<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>

由於我們在原始的component當中，section使用了小寫，react能夠知道這是屬於HTML 標籤。那麼也就能順利地渲染出以上的結構了。

參考資料：

• React官方文件 - Your First Component
• The Joy of React by Josh W Comeau