DAY2(2025/06/15)

[TOC]

# DAY2(2025/06/15)React

## 進度日誌
- 學會 useState，實作互動式元件 HelloWorldButton

## 筆記區📘 React

### 🧑‍💻 互動式元件與 useState

**目標：**
- 學會用 useState 增加互動行為
- 實作按鈕顯示「Hello world」的效果

---

#### 1️⃣ 概念流程
- 宣告一個 state（狀態），初始值為「隱藏 Hello world」。
- 按下按鈕時，把狀態改為「顯示 Hello world」。
- 依據 state 決定畫面上要不要顯示那句話。
---

#### 2️⃣ 元件程式碼：HelloWorldButton.tsx ( 在 src/components/HelloWorldButton.tsx )

import React, { useState } from 'react';

const HelloWorldButton: React.FC = () => {
  // 宣告 state，控制是否顯示 Hello world
  // 預設為False，
  const [showHello, setShowHello] = useState<boolean>(false);

  // 處理按鈕點擊
  const handleClick = () => {
    setShowHello(!showHello); //  每次按下就切換 true/false
  };

  return (
    <div>
      <button onClick={handleClick}>
        {showHello ? '隱藏 Hello world' : '顯示 Hello world'}
      </button>
      {showHello && <p>Hello,world!!</p>}
    </div>
  );
};

export default HelloWorldButton;

##### 說明useState：`const [showHello, setShowHello] = useState<boolean>(false);`
1. `useState<boolean>(false)`

- 這是在「宣告一個狀態（state）」
- boolean 是這個狀態的型別（只允許 true 或 false）
- 初始值是 false，也就是一開始「不顯示 Hello world」
2. `[showHello, setShowHello]`
- React 會回傳「一組陣列」：
-- 第一個（showHello）是目前的狀態值
👉 可以想像成「開關目前是開還是關？」
-- 第二個（setShowHello）是改變這個狀態的函數
👉 可以想像成「可以把開關打開或關掉的遙控器」

##### useState其他說明
- `setShowHello(!showHello)` 就是每次按下按鈕，切換狀態（true 變 false，false 變 true）
- `onClick={handleClick}`：當按下按鈕就把狀態改成 true
- `{showHello && <p>Hello,world!!</p>}`：只有當 showHello 是 true 才會顯示

#### 3️⃣ 在 App.tsx 引入使用

import React from 'react';
import Hello from './components/Hello';
import HelloWorldButton from './components/HelloWorldButton';

function App() {
return (
  //<> ... </> 是 Fragment，不會多包一層 div，語法簡潔，React 專案很常見！
  <>
    <div>
      <h2>第一個元件</h2>
      <Hello name="宸維(Shiki)" age={21} />
    </div>
    <br />
    <div>
      <h2>第二個元件</h2>
      <HelloWorldButton />
    </div>
  </>
);
}

export default App;