撰寫第一個 React 元件：函式型元件入門

By徐培鈞
LinkedIn

更新日期： 2025 年 4 月 14 日

《React 元件基礎介紹》：

  1. React 的開發邏輯：為什麼現代前端要用元件？
  2. React 元件是什麼？畫面積木的基本單位
  3. 什麼是元件樹？理解元件的父子與巢狀結構
  4. 撰寫第一個 React 元件：函式型元件入門
  5. 如何規劃與拆分元件？從 UI 切割建立模組思維
  6. 元件之間如何傳資料？Props 教學入門
  7. 初學者也能懂！React children 全解析與實戰教學
  8. React 元件可以有自己的資料？state 基礎觀念與使用
  9. 什麼是 prop drilling？當資料傳遞變成麻煩
  10. Context API 是什麼？解決 prop drilling 的痛點
  11. 比 Context 更好用的選擇？認識第三方狀態管理工具

在閱讀本文前，建議先閱讀《JSX 基礎介紹》

在剛開始學 React 的時候，很多初學者會問：「我要怎麼開始寫 React 元件？」

本篇文章就是你的第一步。

React 中的畫面，是由一個個元件（Component）組成的。

你可以把元件想成是畫面的積木，而「函式型元件」（Function Component）是現在最主流、最推薦使用的方式。

這種元件簡潔、直覺，配合 React 的 Hooks 機制，更是現代 React 開發的核心。

如果你能掌握函式型元件的基本寫法與結構，就等於打好了 React 的地基。

本篇將一步步帶你完成第一個自己的 React 元件，從理解結構到實作練習，完整上手！

什麼是 React 元件？

在 React 中，「元件（Component）」是構成畫面的基本單位。你可以把它想成是一個個可以重複使用的 UI 小模組，像是積木一樣，拼接起來就能打造出整個網站或應用程式的界面。

元件的特性包括：

  • ✅ 可重複使用：一旦寫好一個元件，就可以在不同地方重複使用，不需要每次都重寫。
  • ✅ 獨立性強：每個元件都是一個獨立的小單元，可以專注處理自己的功能與畫面。
  • ✅ 容易維護與擴充：元件化的設計讓開發大型專案時能更容易拆分任務、除錯與重構。

常見的元件例子包括：

  • 導覽列（Navbar）：包含 logo、選單、登入按鈕等。
  • 文章卡片（ArticleCard）：顯示一篇文章的標題、簡介與圖片。
  • 按鈕（Button）：一個樣式一致的操作按鈕，可以用在提交表單、切換頁面等地方。

元件可以「組合」、「巢狀」、「傳遞資料」

React 的強大之處在於，元件之間可以巢狀組合，也就是說你可以在一個元件裡面放入其他元件。舉例來說，一個 HomePage 元件可能會包含：

  • 一個 Navbar 元件
  • 一個 HeroBanner 元件
  • 多個 ArticleCard 元件
  • 一個 Footer 元件

這就像是樂高積木，每個小元件各自處理一塊畫面，但最後可以拼成一整頁。這種模組化、可組合的設計，是現代前端開發的重要趨勢。

函式型元件是什麼？

React 提供兩種撰寫元件的方式：函式型元件（Function Component） 和 類別型元件（Class Component）。不過現在主流與官方推薦的寫法，是使用 函式型元件。

函式型元件的本質

函式型元件的本質非常單純：它就是一個「回傳 JSX 的 JavaScript 函式」。

舉個最簡單的例子：

function Hello() {
  return <h1>Hello, React!</h1>;
}

這段程式碼定義了一個名為 Hello 的元件，它會在畫面上顯示一段文字：「Hello, React!」。

只要你在 JSX 中這樣使用它：

<Hello />

React 就會自動呼叫這個函式，取得它回傳的 JSX，並渲染成真正的 HTML 畫面。

命名規則很重要！

React 有一個很重要的規定：元件的名稱必須以大寫開頭。這是因為：

  • 如果元件名稱是小寫開頭，例如 hello，React 會以為你是要用內建的 HTML 標籤 <hello>，而不是一個自定義的元件。
  • 所以像 <Hello /> 是合法的，但 <hello /> 就會出錯或沒有反應。

✅ 好習慣： 元件一律使用大駝峰命名（PascalCase），例如 MyButton, UserCard, AppHeader。

函式型元件有什麼好處？

相比類別型元件，函式型元件具有：

  • 更簡潔的語法，不需要 class、this、繫結函式等繁雜語法。
  • 可以使用 React Hooks（例如 useState、useEffect 等）來管理元件的行為與資料。
  • 更容易閱讀、測試與維護。

因此，如果你現在才開始學 React，從函式型元件開始，是最自然也最推薦的路徑！

從零開始寫一個 React 元件

接下來，我們將動手實作你人生中第一個 React 元件！不需要太複雜，重點是先熟悉「元件的結構」、「檔案的擺放方式」以及「如何讓元件出現在畫面上」。

這個章節分為三個步驟，從建立元件到實際渲染在畫面上，一步一步帶你上手。

步驟 1：建立 React 專案（推薦使用 Vite）

如果你還沒建立 React 專案，這裡以 Vite 為例，快速教你怎麼建立一個新專案。Vite 的啟動速度非常快，非常適合學習與開發。

在終端機輸入以下指令：

npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run dev

這樣你就會看到瀏覽器打開 http://localhost:5173，並顯示 Vite + React 的歡迎畫面，表示你已經成功啟動一個 React 專案！

若你使用的是 Create React App，也可以照原本流程 npx create-react-app my-app 建立，教學流程相同。

步驟 2：撰寫你的第一個元件

現在我們來寫一個屬於你自己的元件。在 src/ 資料夾底下，新增一個檔案 MyFirstComponent.jsx，內容如下：

// MyFirstComponent.jsx

function MyFirstComponent() {
  return (
    <div>
      <h2>這是我的第一個元件</h2>
      <p>React 開發就從這裡開始！</p>
    </div>
  );
}

export default MyFirstComponent;

這個元件就是一個函式，它的名字叫做 MyFirstComponent，裡面透過 return 回傳一段 JSX。當這個元件被渲染時，就會在畫面上看到：

這是我的第一個元件
React 開發就從這裡開始！

元件命名說明

  • MyFirstComponent 是這個元件的名稱。
  • 名稱需大寫開頭，否則 React 會把它當成 HTML 元素而非自定義元件。
  • 使用 export default 可以讓其他檔案引入這個元件。

步驟 3：在 App 中引入並使用這個元件

接下來，我們要把這個元件放進主畫面中。打開 src/App.jsx，進行以下修改：

// App.jsx

import MyFirstComponent from './MyFirstComponent';

function App() {
  return (
    <div>
      <h1>我的 React App</h1>
      <MyFirstComponent />
    </div>
  );
}

export default App;

解釋這段程式碼：

  • import MyFirstComponent from './MyFirstComponent';：這行是引入你剛剛寫好的元件。
  • <MyFirstComponent />：這就是 JSX 的使用方式，你可以像 HTML 標籤一樣「使用」這個元件。
  • App 是整個應用程式的主要元件，瀏覽器畫面就是由它負責顯示的內容。

最終畫面會顯示：

我的 React App
這是我的第一個元件
React 開發就從這裡開始！

🎉 恭喜你！你已經成功完成了人生第一個 React 元件！

這個過程聽起來雖然簡單，但背後你已經學會了好幾個重要觀念：

  • 怎麼定義一個 React 函式型元件
  • 怎麼把元件分開到獨立檔案
  • 怎麼匯入並使用自定義元件
  • JSX 的使用方式

這是每一個 React 開發者都經歷過的第一步。

理解元件的回傳值：JSX 是關鍵

React 元件的核心：就是「回傳畫面」

在 React 裡，一個元件的最重要任務就是回傳畫面長什麼樣子。

而這個畫面的描述，就是透過 JSX 來完成的。

只要你定義了一個函式型元件，它的 return 所回傳的內容（JSX）就會被 React 渲染到畫面上。

這也是為什麼我們常說「JSX 是 React 的靈魂」。

JSX 是什麼？它和 HTML 長得很像，但不是 HTML

return <h1>Hello, JSX!</h1>;

這一行看起來像 HTML，但實際上是 JavaScript 的語法糖（syntactic sugar），稱為 JSX（JavaScript XML）。

它不是原生 JavaScript，也不是純粹的 HTML，而是一種可以讓你「用 HTML 的樣子寫 JavaScript」的語法。

JSX 的真實樣貌：會被轉譯成 JavaScript 物件

每一段 JSX 會在編譯時，被 Babel 轉換成 React.createElement() 的寫法，例如：

const element = <h1>Hello</h1>;

會被轉成：

const element = React.createElement('h1', null, 'Hello');

這也說明了：JSX 最終仍然是 JavaScript，所以你可以在其中使用變數、邏輯表達式，甚至條件判斷。

小提醒：JSX 的 return 只能有一個根元素

這是許多初學者常遇到的錯誤。

以下是不合法的 JSX：

// 錯誤示範 ❌：有兩個根元素
return (
  <h1>Hello</h1>
  <p>World</p>
);

React 不允許這樣寫，因為每個元件只能回傳一個根節點（root element）。

解法有兩種：

✅ 使用 <div> 包起來：

return (
  <div>
    <h1>Hello</h1>
    <p>World</p>
  </div>
);

✅ 使用 <React.Fragment> 或簡寫 <> </>：

return (
  <>
    <h1>Hello</h1>
    <p>World</p>
  </>
);

使用 Fragment 是比較推薦的寫法，當你不想多包一層不必要的 <div> 時，這是一個更乾淨的方式。

函式型元件的優點：現代 React 的首選

你可能會好奇，React 還有另一種寫法叫做「類別型元件（Class Component）」，為什麼現在大家幾乎都只用函式型元件？

原因是：函式型元件有以下這些明顯優勢：

語法簡潔、易讀性高

函式型元件基本上只是一個 function，不需要 class、constructor、this.state 等複雜語法，對初學者來說更好上手：

// 函式型元件
function Hello() {
  return <h1>Hello</h1>;
}

可以使用 Hooks，功能完整

React 16.8 推出的 Hooks（例如 useState, useEffect），讓函式型元件也能擁有過去只有類別元件才有的功能，像是：

  • 控制狀態（state）
  • 處理副作用（effect）
  • 回應生命週期事件（如元件載入、卸載）

這使得函式型元件變得既簡單又強大。

更容易測試與重構

函式型元件就像普通函式一樣，沒有 this 綁定的複雜性。

它們的輸入（props）與輸出（JSX）單純明確，邏輯容易拆分，也容易進行單元測試。

現代 React 生態圈全面支援

React 官方與絕大多數的開源元件庫（例如 React Router、React Hook Form 等）都優先支援函式型元件，幾乎所有範例、教學與工具也都以它為主。

如果你要學習 React，使用函式型元件將能讓你無縫銜接社群資源與業界開發實務。

結語：React 世界的第一步，你踏出來了！

恭喜你！只要你完成了本文的練習，你已經成功寫出人生第一個 React 元件。這是進入現代前端世界的重要一步。接下來你會學到：

  • 如何讓元件之間互相傳資料（props）
  • 如何讓元件「記住」自己的狀態（state）
  • 如何拆分畫面結構，打造大型應用

這些，都會在接下來的章節中慢慢帶你建立起來。如果你還沒寫過 React 元件，請務必動手打一次這篇的程式碼，會有很不一樣的感受！

Similar Posts

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *