『Day 1』認識 React Component

前言

在開始這趟學習旅程之前，想先和大家說明這系列文章的規劃。我會以 React 官方文件的架構為基礎來撰寫，但會略過一些環境設定和基礎 JavaScript 觀念。

選擇跳過這些內容是因為網路上已經有許多優質的學習資源。不過還是要提醒大家，要真正掌握 React，需要對以下 JavaScript 概念有一定的理解：

Closure（閉包）和 Scope（作用域）- 這對於理解 React Hooks 非常重要
ES6+ 的重要特性：
- Arrow Functions 和 this 的綁定
- Destructuring（解構賦值）
- Spread/Rest 運算符
非同步處理：Promise 和 async/await
Event Loop 和 JavaScript 的執行機制

如果對這些概念還不太熟悉的話，建議先花一些時間打好基礎。相信這樣不只能更好地理解 React 的運作原理，也能寫出更好的程式碼。

React 的開發理念

在深入 React 之前，我們先來聊聊它的核心開發理念，這和傳統的網頁開發方式有著根本的差異。

傳統的網頁開發流程是這樣的：

我們會先寫好 HTML 和 CSS，例如先把一個按鈕和表單放在頁面上，然後再透過 JavaScript 來「加工」這些元素。像是：「啊，這個按鈕按下去要做什麼」、「這個表單要怎麼驗證」。JavaScript 就像是事後才加上去的功能層，有點像是在完工的房子上再加裝設備的感覺。

React 則是採取了完全不同的思維方式，它讓我們在寫程式時，就把「外觀」和「功能」一起思考。當我們要做一個按鈕時，我們不是先放個按鈕在那邊，之後再想要做什麼，而是一開始就規劃：「這個按鈕要顯示什麼文字」、「按下去要做什麼事」、「什麼時候要禁用它」。

這種方式讓我們的程式碼更好組織，也更容易掌握整個應用程式的邏輯。

這個概念轉變可能一開始會讓人不太習慣，但當你開始寫 React 時，你會發現這種思維方式其實更直覺也更有條理。

簡單的小整理:

傳統：HTML/CSS 結構 -> JavaScript 添加互動
React：將互動性置於核心，JavaScript 和 UI 緊密結合

在深入了解 Component 之前，有一個重要的概念需要先提一下：嚴格來說，React 的最小單位其實是 React element，而不是 Component。
React element 是構建 React 應用的最基本單位，它描述了你想要在螢幕上看到的內容。而 Component 則是由這些 React element 組合而成的。
我們可以把React element 想像成是積木，而Component 則是使用積木搭建而成的結構。

什麼是 React Component

在 React 中，Component 本質上是 JavaScript 函數，開發者可以在其中巧妙地融入 HTML 標記。這種方法就是我們剛剛提到的開發理念：JavaScript 和 UI 的緊密結合。

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

怎麼創建 React Component

Step 1: Export the component

我們會使用JavaScript語法裡的 export default，來宣告這個component，方便其他地方導入

Step 2: Define the function

這邊就會像我們在寫一般function一樣，只是component 的function名稱第一個字必須是大寫

Step 3: Add markup

這裡我們寫的並不是html，而是名叫JSX的語法，他寫在return 之後

以下為範例:

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

使用 React Component

React 組件本質上是普通的 JavaScript 函數，因此你可以在同一個文件中定義多個元件。不過，當文件變得過於繁雜時，你隨時可以將 Profile 組件移至單獨的文件中，以提高代碼的可讀性和可維護性。

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>
  );
}

注意到 Profile 組件是在 Gallery 元件內部被渲染的——而且可能被多次使用。

在這種情況下，我們稱 Gallery 為「父元件」，而每個 Profile 則是它的「子元件」。這正是 React 的魔力所在：你只需定義一次元件，就可以在應用的任何地方、任意次數地使用它。

這種元件的可重用性和組合性是 React 的核心優勢之一。它不僅提高了開發效率，還使得代碼結構更加清晰和模塊化。通過將 UI 拆分成小的、獨立的元件，你可以更容易地管理複雜的用戶界面，同時也為團隊協作和代碼維護提供了便利。

雖然可以在一個文件中包含多個元件，但在大型項目中，通常建議將每個主要組件放在其own文件中。這樣可以更好地組織代碼，並使得組件的重用和測試變得更加簡單。

總結

在 React 中，元件是構建用戶界面的基本單位。它們是自包含的、可重用的代碼片段，可以將 UI 分割成獨立的、可重用的部分。

元件可以被視為 React 應用的構建塊。它們可以是簡單的按鈕、輸入框，也可以是複雜的頁面佈局或整個應用程序。

元件的核心特性包括：

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