什麼是 Component ？
Component 中文翻譯為元件、組件，為 React 的核心概念，指的是我們可以將一個完整的物件拆分為一個又一個的組件，最後拼回我們要物件。舉例而言，你會發現 Facebook 的使用者介面在瀏覽時沒有太大的更動，許多組件是一樣的，就可以透過這個方式重複使用相同的組件，避免重寫造成可能的 Bug 產生。
Component 的創建可以分為兩種，過去常使用 Class 的方式，目前則被 Function 取代。
為什麼可以在 JS 中寫入 HTML 呢？
其實這部分看似 JS 的語法稱為 JSX（JavaScript XML）（理解成是 JS 就好），JS 的語法在 JSX 上是完全適用的，只是 JSX 多了可以在裡面寫入 HTML 的功能。而為什麼在 JSX 內寫入 HTML 可以被顯示在網頁上呢？背後其實的邏輯是 JSX 透過 Vite 裡的編譯將內文轉換成 JS，最後 React 會將 JS 轉換成真正的 HTML 並顯示在網頁上。
React 運作的原理（參考 React 學習筆記的第一課）
各式的組件
- 根組件（Root component）
- 父組件（Parent component）
- 子組件（Child component）
重點整理
- Component 組件的開頭都會以大寫表示，HTML 標籤則為小寫表示。
- Component 組件內可以透過大括號 {} 加入 JS 的代碼。
- 組件可以<組件名稱/>或<組件名稱></組件名稱>兩種方式表示。（附圖一）
- 建議將一個組件新增為一個獨立的 JSX 資料（）通常習慣組件與檔案為同一命名，較便於管理。
- 每個組件同時只能回傳一個元素，如果在 return（）內出現超過一個元素，將出現錯誤。（附圖二）
小結
如同React 學習筆記的第一課所說，一般 MPA 網頁是瀏覽器端直接與資料庫請求資料，較有利於 SEO 的使用，但相對的因為每次請求資料都需要再重新將所有資料重新跑一次，導致網頁在讀取時需要花費要較多時間。相反的，使用 React 的 SPA 網頁，僅在第一次跟資料庫取的資料時跟一般 MPA相同，後續資料的請求則由 React 回應，優點是網頁更新時間變得較快，但不利於 SEO 的使用。
此章節所介紹的 Component 即為在第一次跟資料庫請求時獲得的 HTML 資料，後續我們所學習的一切有關 React 的事情，都是在這個檔案內所進行，是以整個 Program 內就只有 index 這個 HTML檔案。