『Day 2』理解 React 的匯入與匯出

前言

前一篇我們聊到了 React Component 的核心特性：

可重複使用性（Reusability）：建立好的元件可以在專案的不同地方重複使用，大幅提升開發效率
獨立性（Independence）：每個元件都能獨立管理自己的狀態和渲染邏輯，讓專案更容易維護
可組合性（Composability）：小型元件可以靈活組合成更複雜的大型元件，使程式架構更有條理
單向資料流（One-way Data Flow）：資料從父元件向下流向子元件，讓專案的資料流向更加清晰

這篇要來分享如何運用 Import 和 Export 的機制，讓元件能在專案中發揮重複使用的特性。

React Component 的導出與命名規範

在開始建立 Component 之前，先來了解一下 React 中的一些重要規範。

首先是關於導出（export）的選擇。在 JavaScript 中，我們有兩種主要的導出方式：

default exports（預設導出）
named exports（具名導出）

一個檔案只能有一個 default export，但可以有多個 named exports。根據官方建議：

如果檔案中只有一個要導出的 component，使用 default export
如果同一個檔案中有多個 components 要導出，則建議使用 named exports

不過實際使用時還是要依據團隊的程式碼規範來決定。

Component 命名規則

React component 雖然本質上就是 JavaScript 函式，但有一個重要規則：component 的名稱必須以大寫字母開頭，否則將無法正常運作！

以下是兩種常見的 component 導出寫法：

// 寫法一：直接導出函式
export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
    </section>
  );
}

// 寫法二：先宣告後導出
function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
    </section>
  );
}

export default Gallery;

補充: 在 React 中處理圖片資源

如果要在 React 中使用圖片，建議使用 import 的方式：

import logo from './logo.png';

function Header() {
  return <img src={logo} alt="Logo" />;
}

這樣做有幾個好處：

建構工具可以優化圖片
路徑變更時會自動更新引用
不用擔心開發環境和生產環境的路徑問題

總結

在這一章中，我們了解了 React 中的匯入與匯出機制。從 default exports 和 named exports 的選擇，到 Component 必須以大寫開頭的命名規則，這些都是建立良好 React 專案結構的基礎。這些規則不僅僅是約定俗成，更是為了發揮 React Component 的核心優勢：可重用性。

隨著專案規模成長，善用這些匯入匯出機制來組織 components 變得越來越重要。

我們透過將 components 適當地分散到不同檔案中，不僅能提升程式碼的可讀性和維護性，還能讓團隊協作更順暢。配合正確的資源匯入方式，我們還能讓建構工具幫助我們優化專案效能。

這些概念和實踐，都是為了讓我們能更好地運用 React 的組件化特性，建立起結構清晰、易於維護的應用程式。