## React 組件是什麼？ React 組件（Component）是用來描述畫面某一部分的可重用程式單位。組件通常會： - 接收資料（稱為 **props**） - 回傳要顯示的 UI - 使用 JSX 撰寫類似 HTML 的語法 - 在資料改變時重新渲染畫面 現代 React 最常使用**函式組件**。 ## 基本語法 ```jsx function 組件名稱() { return ( <元素> 內容 </元素> ); } ``` 注意： - 組件名稱通常使用大寫開頭，例如 `Welcome` - `return` 中的內容是 JSX - JSX 必須回傳一個根元素 - JSX 中使用 `className` 代替 HTML 的 `class` - JavaScript 表達式要放在大括號 `{}` 中 ## 簡單範例：單一、無互動組件 ```jsx function App() { const title = "React 入門"; const description = "React 可以用組件來建立使用者介面。"; return ( <main> <h1>{title}</h1> <p>{description}</p> </main> ); } export default App; ``` ### 說明 - `function App()`：宣告一個名為 `App` 的函式組件。 - `title` 和 `description`：一般 JavaScript 變數。 - `{title}`、`{description}`：把 JavaScript 變數插入 JSX。 - `<main>`、`<h1>`、`<p>`：JSX 元素，語法類似 HTML。 - `export default App`：將 `App` 匯出，讓其他檔案可以載入並使用。 - 此範例沒有按鈕、事件或狀態，因此是無互動的靜態畫面。