『新手學習React』- React Basics_Component

昨天學習完了JSX，接下來來認識React的核心概念之一的Component，它是建立用戶介面(UI)的基礎。

Defining a component

在學習ＡＣ的React課程時看到Exit ticket有這麼一個問題：「在 React 中，一切都是元件」代表著什麼？
這在當時只看完官方文件第一小節的我滿腦子問號，怎麼辦官方文件上沒說啊，只好到網路上找尋答案。那現在學習完晚整學期三的我答的出來嗎？老實說我自己也不確定，我只能依我自己的理解來做回答：

『React 元件的概念是 React 的核心，每個 React 元件都是獨立的、可重複使用的。
它可以被獨立渲染並且接收輸入的資料，也可以將資料傳遞到其他元件。
它可以幫助開發者更好地組織程式碼，使應用更具可讀性、可維護性和可擴展性。』

那要怎麼定義 Component呢？官方文件給出了3個步驟：

Step 1: Export the component
Step 2: Define the function
Step 3: Add markup

我們就以下方的code來簡單說明：

// function 宣告
function Button () {
  return (
    <button>確定</button>
  );
};

export default Button;

// 箭頭函式
const Button = () => {
  return (
    <button>確定</button>
  );
};

export default Button;

2種宣告方式都可以，看個人喜歡什麼（個人偏愛箭頭函式）。

首先我們要先導出 component，這時候我們要用到JavaScript的語法export了。

導出我們有分兩種：default vs named。

一個文件只能有一個default exports，但它可以有任意多個 named exports。在導出時其實兩者個差別就只是有沒default而已，但在導入時就有差別了：

//default export
//在默認導出時你可以任意命名
import Any from './路徑'

//named export
//在命名導出時你必須打上導出的名稱，如果導出的名稱為Button
import { Button } from './路徑'

export 跟 import 必須是相對應的，否則就會出現錯誤。

至於在 Add markup 時，return 後面的語句可以全部寫在一行中，例如：

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

但如果 markup 與 return 不在同一行，則必須將其括在一對括號中，例如：

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

為什麼Component 命名中的首字母必須為大寫

這是在參加讀書會時，Zet助教提出的一個問題，詳細的說明大家可以看這篇。

助教在文章裡面有提到React element 的建立，之所以提到這個是因為：
React中，建構UI畫面的最小單位是React element一段封閉式節點，因此才會在這題中提到。

在看到這篇之前我自己的理解是：

React的元件命名中首字母必須大寫的原因是因為在JSX語法中，小寫字母開頭的元素被視為HTML標籤，而大寫字母開頭的元素則被視為React元件。因此，為了區分React元件和HTML標籤，React的元件命名中必須使用大寫字母開頭。