Q1. React 中的元件 (Component) 是什麼？Components: UI building blocks

A: React使用 markup標記，結合CSS樣式和JS互動，形成客製化的元件。
在APP中，元件可重複使用。
markup標記內部仍是HTML tags，使用上和HTML tags 一樣，可組合、排序和嵌套(巢狀結構)，來設計整個頁面。
React open source community like Chakra UI and Material UI.

Q2: 如何定義元件、如何建構元件？

A: 現今的網頁和應用程式，互動式必要的。
REACT 把互動放首位，REACT元件是JS函式，可以在其中添加markup標記。
export default function Profile() {

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

step 1: 輸出元件
export default
=> 前綴是JavaScript語法，標記檔案中主要的函式，之後就可以從別的檔案中 import引入 此元件。

step 2: 定義函式
函式名稱即元件名稱，字首大寫"P"rofile，否則 won't work!

function Profile () {
//..
}

step 3: 添加標記 markup

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

此元件 return 帶有src和alt屬性，編寫像HTML，但實際上是JavaScript! => 語法稱為JSX，允許在JS中嵌入(embed) markup。

• return 後面的內容可寫同一行。
  return <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />;

• 若markup標記 (ex:<img />) 沒有和 return同一行，必須用一對parentheses圓括號把markup標記 (ex: <img />) 包起來。
  => 圓括號內不能有 分號 ;
  => 否則，return會忽視 return後面的markup標記。

  // 一對parentheses圓括號**把markup標記 包起來
  return (
  <div>
    <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  </div>
  );
  

使用元件

已定義好Prfile元件，接下來在Gallery元件中使用，

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

輸出Gallery元件 return section結構，包含h1標題和 3 個 Profile元件。
注意大小寫的區別：

• section 和 h1 字首小寫 => React 知道使用HTML tag。
• Profile 字首大寫 => 為React元件

Nesting 嵌套和組織元件

檔案中的元件

• 元件是regular JS函式，所以在檔案中可以有多個元件。
• 若多個元件較小或相關性高，放在同個檔案會很方便。
• 若檔案有太多元件太擁擠，可將某元件移到單獨的檔案中。

元件的嵌套關係

• Profile元件在Gallery元件內被渲染，
  稱Gallery元件為父元件，多個 Profile元件 都是其子元件。

• REACT-元件定義一次，可在任何地方，不限次使用。

// ###　父元件內部可渲染子元件，但內部不能定義元件
export default function Gallery() {
  // 🔴 Never define a component inside another component!
  function Profile() {
    // ...
  }
  // ...
}

這樣程式碼片段非常緩慢且容易產生錯誤。
應該將每個元件定義在頂部。

父元件傳 props (資料) 給子元件，而不是嵌套定義

DEEP DIVE - "Components all the way down"

thx chatGTP
「從頂層元件到最底層元件」是 React 框架的核心概念之一。

• 在 React 中，每個元件都可以是另一個元件的父元件，也可以是另一個元件的子元件，透過這樣的組合方式可以建立出複雜的 UI 介面。
• 而這些元件的嵌套結構，就像是樹狀結構一般，每個元件都有一個「父節點」和多個「子節點」，最終構成整個 UI 介面的結構。
• React 元件不僅可以嵌套在應用程式中，也可以嵌套在其他元件中，所以在使用 React 時，可以將整個應用程式看作一個巨大的元件，由許多小的子元件組成。透過這樣的設計，可以將應用程式的邏輯拆分成多個獨立的部分，方便進行測試、維護和升級。
• 因此，React 的開發方式是以元件為基礎的，透過定義元件、組合元件和傳遞資料，構建出整個應用程式的介面。這種方式讓應用程式的開發更加模組化和可維護，同時也提高了開發效率和code重復使用性。

以不同方式開始新專案，根元件被定義在不同地方

React 應用程式始於一個「根」元件。建立一個新專案時，它會自動創建根元件。
例如:

• 使用 CodeSandbox 或 Create React App (終端機 指令操作)，根元件定義在 src/App.js 中。
• 使用框架 Next.js，根元件定義在 pages/index.js 中。

元件

• 大多數 React 應用程式從頭到尾都使用元件（components）。
• 不僅會在可重複使用的元素上使用元件，例如按鈕，還會在較大的元素上使用，例如側邊欄、列表，甚至是完整頁面！
• 即使其中一些元件只使用一次，元件也是組織 UI 代碼和標記的方便handy方式。

以React為基礎的框架 好處:

不僅使用空的 HTML 文件，讓 React 透過 JavaScript 接管頁面管理，還從 React 元件自動生成 HTML。
=> 這使App可以 在 JavaScript code 載入之前， 顯示一些內容。

• 儘管如此，許多網站在現有 HTML 頁面中，只使用 React 添加互動性。
• 它們有許多根元件，而不是 a single one for the entire page。
• 可以根據需要使用更多或更少的 React。

RECAP:

• React 允許創建元件，這是應用程式中可重複使用的 UI 元素。
• 在 React 應用程式中，每個 UI 元素都是一個元件。
• 元件對於 React 重要的原因在於：元件可以在不同的頁面中重複使用、自由重組，大幅提高了開發效率。
• 當在一個專案中有越來越多元件被建立，這時你會使用不同的檔案來管理不同類型的元件。
• React 元件是regular JavaScript 函式，除了以下幾點：
  • 它們的名稱 字首為大寫字母。
  • 它們return JSX markup標記。