今日我們要進入 React Hook，並嘗試用 useState 這個 Hook 來做出改變狀態值的練習。
### React Hook
Hook 其實就是 JavaScript function，但要特別注意兩個使用的規則：
1. 只在最上層呼叫 Hook，不要在迴圈、條件式或是巢狀的 function 內呼叫 Hook（[詳細解說](https://react.dev/learn/state-a-components-memory#meet-your-first-hook)）
2. 只在 React Function 中呼叫 Hook，例如：在 React function component 中呼叫 Hook。

今日的練習我們會著重在規則二，也就是練習『在 React function component 中呼叫 Hook』。

### React function component

function Example() {
    // 在這邊使用 Hook
  return (
    // 在這邊加入 Template，例如：
    <p>Hello</p>
  )
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Example />);

### useState
useState 是被用來加入一些基礎的變數狀態。useState 會回傳一組數值：目前 state 數值和一個可以更新 state 的方法，寫法如下：

const [count, setCount] = React.useState(0);

透過 setCount 方法可以改變 count 的值

setCount(prevCount => prevCount + 1);

### 補充：JSX 的事件綁定
在 JSX 中，事件綁定是以小駝峰的方式命名（camelCase），因此 onclick 事件即為 onClick、onchange 事件為 onChange。

<button onClick={() => {}}> 按鈕 </button>

參考：
[State: A Component's Memory](https://react.dev/learn/state-a-components-memory)

## 題目
請複製 （右下角 fork）這個[範例](https://codepen.io/yen-kg/pen/BaXPRMY)，並撰寫內容，完成以下畫面：


## 回報流程
將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）

<!-- 解答：

function Example() {
  const [count, setCount] = React.useState(0);

  const add = () => {
    setCount(prevCount => prevCount + 1);
  };

  const reduce = () => {
    setCount(prevCount => prevCount - 1);
  };

  return (
    <div>
      <p>現在的數字是 {count} </p>
      <button onClick={add}>加一</button>
      <button onClick={reduce}>減一</button>
    </div>
  );
}

-->

回報區
---
| # | Discord | CodePen / 答案 |
|:---:|:-------------- |:----------------------------------------------------------------------------- |
| 1 | MY | [Codepen](https://codepen.io/ahmomoz/pen/gbYxdra) |
| 2 | Sonia | [Codepen](https://codepen.io/YUJOU/pen/wBwmbvV?editors=1010) |
| 3 | LinaChen | [Codepen](https://codepen.io/LinaChen/pen/MYgVdeb) |
| 4 |邵 |[CodePen](https://codepen.io/ukscrlno-the-typescripter/pen/yyBKWXg?editors=1010)|
| 5 | 4chan| [Codepen](https://codepen.io/ijuolaqc-the-looper/pen/MYgVdvm) |
| 6 | han | [Codepen](https://codepen.io/iamHanCheng/pen/vEBRwdM) |
| 7 | Aaron 謝宗佑 | [Codepen](https://codepen.io/aaron-hsieh/pen/gbYeJjO) |
| 8 | Jasmine | [Codepen](https://codepen.io/Jasmine-Lin-the-vuer/pen/bNbvyxe) |
| 9 | ollie | [Codepen](https://codepen.io/daiyy97/pen/XJrELrB?editors=0010) |
| 10 | Nocab | [Codepen](https://codepen.io/PeihanWang/pen/JoPLQWQ?editors=1010) |
| 11 | Amanda | [Codepen](https://codepen.io/cym199922/pen/EaYEBRB) |
| 12 | Satar | [Codepen](https://codepen.io/SatarKuo/pen/ogvqKwW?editors=0010) |
| 13 | anderson666 | [Codepen](https://codepen.io/goodmanbuild/pen/azoYeqB) |
| 14 | Kaya | [Codepen](https://codepen.io/kayaribi/pen/PwYRMrV) |
| 15 | Yen | [Codepen](https://codepen.io/yuxxxlouyen/pen/qEWYWQQ) |
| 16 | Noy(Toad) | [Codepen](https://codepen.io/MochiCodingPen/pen/ZYzoGKK) |
|17| Hailey|[CodePen](https://codepen.io/sxbokfja-the-flexboxer/pen/gbYzaWw?editors=1011)|
| 18 | 嚼勁先生 | [Codepen](https://codepen.io/James520284/pen/bNbMVwW) |
| 19 | Toung | [Codepen](https://codepen.io/Toung/pen/XJrqmBQ) |
| 20 | 毛巾 | [Codepen](https://codepen.io/bqdcjboa-the-solid/pen/NPKMjPQ) |
| 21 | Johnson | [Codepen](https://codepen.io/crpbugqy-the-typescripter/pen/xbKWNXj) |
| 22 | tim | [Codepen](https://codepen.io/jskrtivy-the-animator/pen/XJrqRvq?editors=1010) |
| 23 | Clove_墨 | [Codepen](https://codesandbox.io/p/sandbox/5djjkt) |
| 24 | GAVI| [CodePen](https://codepen.io/qbafldcv-the-scripter/pen/bNbMWjE?editors=1010)|
| 25 | 蘑菇星星| [CodePen](https://codepen.io/brrrieon-the-vuer/pen/gbYzNZg?editors=1011)|
| 26 | mercury2508. | [Codepen](https://codepen.io/Mercury2508/pen/gbYKYOB) |
| 27 | Ariel | [Codepen](https://codepen.io/ariel0510/pen/xbKzwPM?editors=1010) |
| 28 | Rogan | [Codepen](https://codepen.io/daiyy97/pen/XJrELrB?editors=0010) |
| 29 | 泊岸 | [Codepen](https://codepen.io/qoq77416416/pen/KwPBQOV?editors=1010) |
| 30 | Fabio20 | [Codepen](https://codepen.io/fabio7621/pen/wBwErNN?editors=1010) |
| 31 | Rochel | [Codepen](https://codepen.io/rochelwang1205/pen/gbYdGVQ) |
| 32 | Rogan | [Codepen](https://codepen.io/RoganHsu/pen/yyBjqxq) |
| 33 | Joannehu | [Codepen](https://codepen.io/nelbabkv-the-flexboxer/pen/dPbBNwx) |
| 34 | kun._c8_shake_it | [Codepen](https://codepen.io/barry91205/pen/ogNgBQo) |
| 35 | jinliu214 | [Codepen](https://codepen.io/jinliu214/pen/MYWwodW?editors=0010) |
| 36| yun-lin | [Codepen](https://codepen.io/yunlinhsu/pen/GgRoqQr?editors=1011) |
| 37 | yaoling.liang | [Codepen](https://codepen.io/Yao-Ling-L-/pen/pvoyXoR?editors=1010) |
| 38 | 郭芙蘭 | [Codepen](https://codepen.io/flora_Kuo/pen/MYWjpmX?editors=1011) |
| 39 | KOMATSU PEI | [Codepen](https://codepen.io/Komatsu2021/pen/bNGWyoB?editors=1011) |
| 40 | 姜承 | [Codepen](https://codepen.io/Troy0718/pen/xbxJRee?editors=1010) |
| 41 | chris | [Codepen](https://codepen.io/chris-chen-the-selector/pen/yyLZMKj?editors=1111) |
| 42 | shin_kai | [Codepen](https://codepen.io/KAI-SHIN-the-animator/pen/pvgyzyV) |

---

- 快速複製格式：

| 0 | user | [Codepen]() |