今日我們要進入 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(count + 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/hexschool/pen/VwXYKZY)，並撰寫內容，完成以下畫面：


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

<!-- 解答：

function Example() {
  // 宣告一個新的 state 變數，我們叫他「count」
  const [count, setCount] = React.useState(0);

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

-->

回報區
---
| # | Discord | CodePen / 答案 |
|:---:|:-------------- |:----------------------------------------------------------------------------- |
| 01 | LinaChen | [Codepen](https://codepen.io/LinaChen/pen/ZEmNjoR) |
| 02 | shangchu | [Codepen](https://codepen.io/shangchu0412/pen/wvQbxro) |
| 03 | ryan.chou | [Codepen](https://codepen.io/csw8524/pen/gOQJjjw) |
| 04 | Billy.Ji | [Codepen](https://codepen.io/yaj55ushydna/pen/bGQyjmR) |
| 05 | 圈圈 | [Codepen](https://codepen.io/wjejfczn-the-bold/pen/KKrLBbo?editors=1010) |
| 06 | rChinnnn | [Codepen](https://codepen.io/rChinnnn/pen/MWzdBEV) |
| 07 | 大頭 | [Codepen](https://codepen.io/d22495521/pen/OJaYwjX) |
| 08 | yuchih | [Codepen](https://codepen.io/hijachu/pen/ExOzeYB?editors=1010) |
| 09 | chichi | [Codepen](https://codepen.io/chichihuang/pen/XWywBLG) |
| 10 | NoZ | [Codepen](https://codepen.io/fgfjgror/pen/jOQovOK?editors=1010) |
| 11 | Leo | [Codepen](https://codepen.io/Aruminiya/pen/YzRbOPW) |
| 12 | AYA | [Codepen](https://codepen.io/NoNameNote/pen/RwqmBmR) |
| 13 | Tami | [Codepen](https://codepen.io/wqsdqbjn-the-vuer/pen/NWEVLNY) |
| 14 | Sebastian | [Codepen](https://codepen.io/SebastianWei/pen/YzRbOpp?editors=0010) |
| 15 | Kent | [Codepen](https://codepen.io/labkunz/pen/poQmOEQ) |
| 16 | LuLu | [Codepen](https://codepen.io/Lin-Lulu/pen/MWzdqjL?editors=1011) |
| 17 | stevenchang421 | [Codepen](https://codepen.io/vwtrpqmm/pen/poQmOpY) |
| 18 | Berlin | [Codepen](https://codepen.io/3qberlin/pen/dyQEqVO) |
| 19 | Wei_Rio | [Codepen](https://codepen.io/wei_wu/pen/LYXoJmb) |
| 20 | davidchengtw | [Codepen](https://codepen.io/davidcheng/pen/KKrLxeE) |
| 21 | Rochel | [Codepen](https://codepen.io/rochelwang1205/pen/eYQaLKO?editors=0010) |
| 22 | Eden | [Codepen](https://codepen.io/iseden/pen/abQraKd) |
| 23 | billy_ti | [Codepen](https://codepen.io/Ti-Show/pen/BaGeqav?editors=1010) |
| 24 | ChaosTu#9311 | [codepen](https://codepen.io/torotu/pen/MWzdPve?editors=1010) |
| 25 | Lin | [codepen](https://codepen.io/vseznpoh-the-flexboxer/pen/eYQaPVg) |
| 26 | jerry456789 | [codepen](https://codepen.io/aria198a/pen/dyQEggq?editors=1010) |
| 27 | Sui | [codepen](https://codepen.io/suihsilan/pen/ExOzOYE?editors=0010) |
| 28 | BalaBambe | [codepen](https://codepen.io/bambe-chen/pen/xxQNQbJ) |
| 29 | rainnping | [codepen](https://codepen.io/rainnping/pen/wvQbQMG) |
| 30 | cataska | [codepen](https://codepen.io/lovecankill/pen/OJaYaOX) |
| 31 | smalljie | [codepen](https://codepen.io/smalljie/pen/OJaYagN) |
| 32 | Kyire | [codepen](https://codepen.io/KyrieHaveGoodDay/pen/BaGeGYQ) |
| 33 | 汪汪 | [Codepen](https://codepen.io/hunwooooof/pen/BaGELpO) |
| 33 | collinkao | [Codepen](https://codepen.io/collin0825/pen/bGQyOXz?editors=0010) |
| 34 | CG | [Codepen](https://codepen.io/qzmnczik-the-decoder/pen/MWzdZvR) |
| 35 | zona | [Codepen](https://codepen.io/w242920/pen/KKrLJMK) |
| 36 | Hsien | [Codepen](https://codepen.io/Hsienlu/pen/mdQYvxa) |
| 37 | Ann Chou | [Codepen](https://codepen.io/annchou_illu/pen/MWzdLPJ) |
| 38 | 阿旭 | [Codepen](https://codepen.io/hexschool/pen/VwXYKZY?editors=1010) |
| 39 | WA | [codepen](https://codepen.io/ldddl/pen/gOQJqBJ) |
| 40 | yi0863 | [Codepen](https://codepen.io/YI0305/pen/wvQbOWG) |
| 41 | Yen | [codepen](https://codepen.io/TZU-HUANG-YEN/pen/yLQWwvv?editors=1010) |
| 42 | Tian | [codepen](https://codepen.io/ccyy915/pen/mdQYgdO) |
| 43 | Iris | [codepen](https://codepen.io/iris831206/pen/LYXovYE) |
| 44 | Amberhh | [codepen](https://codepen.io/Amberhh/pen/dyQEEeK?editors=1010) |
| 45 | 王偉青 | [codepen](https://codepen.io/lovegull/pen/YzRbbbB) |
| 46 | 地球儀 | [codepen](https://codepen.io/dayday1222/pen/wvQbbOB?editors=0010) |
| 47 | 瑀君 | [codepen](https://codepen.io/yennnnn/pen/vYQwqgo) |
| 48 | 羅羅 | [codepen](https://codepen.io/bjqs02/pen/oNQRrpR) |
| 49 | ssshane | [codepen](https://codepen.io/sam6091260/pen/NWEVQKw?editors=1010) |
| 50 | 泊岸#3466 | [codepen](https://codepen.io/qoq77416416/pen/WNYBqmX?editors=1010) |
| 51 | 便當 | [codepen](https://codepen.io/wafjxnde-the-typescripter/pen/rNQgXWg) |
| 52 | David0799 | [codepen](https://codepen.io/David0799/pen/BaGegrQ) |
| 53 | ejchuang | [codepen](https://codepen.io/EJChuang/pen/JjeqgxR?editors=1010) |
| 54 | jasperlu005 | [codepen](https://codepen.io/uzzakuyr-the-reactor/pen/MWzdNLN?editors=1010) |
| 55 | syuan | [codepen](https://codepen.io/Syuan-Lin/pen/WNYqeNW?editors=0010) |
| 56 | besspeng | [codepen](https://codepen.io/besspengcl/pen/poQXzJz?editors=1010) |
| 57 | 變羊魔法 | [codepen](https://codepen.io/cssf998811/pen/dyQELPY) |
| 58 | JJ Wu | [codepen](https://codepen.io/jesswu/pen/ZEmdzZK) |
| 59 | JohnChien | [codepen](https://codepen.io/glqwazid-the-selector/pen/XWywyVP) |
| 60 | kuanju27 | [codepen](https://codepen.io/Eero-Chiao/pen/YzRbMBr) |
| 61 | Wendy3 | [codepen](https://codepen.io/wendy03/pen/wvQLvrz) |
| 62 | 喃喃 | [codepen](https://codepen.io/VeLario/pen/WNYqbZK?editors=0010) |
| 63 | Ingrid | [codepen](https://codepen.io/ingrid-chi/pen/NWEZGad?editors=1010) |
| 64 | lingchang | [codepen](https://codepen.io/ling-chang/pen/WNYqxQx) |
| 65 | MotoRin | [codepen](https://codepen.io/sakimoto/pen/OJaeXKp) |
| 66 | wendy | [codepen](https://codepen.io/siaochanwu/pen/ZEmdOgM) |
| 67 | Nikki.Kang | [codepen](https://codepen.io/Nikki-Kang/pen/oNQrYWo) |
| 68 | aray | [codepen](https://codepen.io/ceqchksj-the-flexboxer/pen/JjeQEWm) |
| 69 | shcopy | [codepen](https://codepen.io/shcopy/pen/RwqzoOv) |
| 70 | Carole | [Codepen](https://codepen.io/s892261118/pen/KKrjXep) |
| 71 | 金魚 | [Codepen](https://codepen.io/cso-goldfish/pen/XWyLZJm) |
| 72 | yoyo#2678 | [Codepen](https://codepen.io/djmliogn-the-flexboxer/pen/poQXZpw?editors=1011) |
| 73 | LiShang | [Codepen](https://codepen.io/LiShang/pen/XWyLxbm) |
| 74 | PeterChung | [Codepen](https://codepen.io/tsang6187/pen/zYMVmPo) |
| 75 | RJ | [Codepen](https://codepen.io/RJ-S/pen/JjeQmmO) |
| 76 | Kaya | [Codepen](https://codepen.io/laron9486/pen/NWEZBJj) |
| 77 | azami | [Codepen](https://codepen.io/azami/pen/yLQdGJq) |
| 78 | Johnson3669 | [Codepen](https://codepen.io/crpbugqy-the-typescripter/pen/JjeQxjR) |
| 79 | 黃士桓 | [codePen](https://codepen.io/shr-huan-huang/pen/GRwbebo) |
| 80 | joanhui#9261 | [Codepen](https://codepen.io/Joanhui/pen/GRwbzLz) |
| 81 | jiun7523 | [Codepen](https://codepen.io/jiun-jiun/pen/MWzMdEw) |
| 82 | 妤ㄦ | [Codepen](https://codepen.io/bmtuepzo-the-sans/pen/dyQBEJJ) |
| 83 | PoRay | [Codepen](https://codepen.io/raycheng/pen/jOQjjvm) |
| 84 | Overy | [Codepen](https://codepen.io/tupbsair-the-vuer/pen/GRwVRyK) |
| 85 | Che1z | [Codepan](https://codepen.io/Shih-Min-Hung/pen/vYQoLXL) |
| 86 | SKey | [Codepan](https://codepen.io/Dale-Chien/pen/qBQeqVm?editors=1010) |
| 87 | SkyWoW | [Codepen](https://codepen.io/WoW-Sky/pen/jOQgyyr) |
| 88 | Evan | [Codepen](https://codepen.io/evanz1215/pen/rNQXyjQ) |
| 89 | PollyPO_Lee | [Codepen](https://codepen.io/pollypo1986/pen/xxQvdKw) |
| 90 | Kai | [Codepen](https://codepen.io/kaicheng928/pen/NWEQjde?editors=1010) |
| 91 | HanHan | [Codepen](https://codepen.io/Emma-Yang/pen/rNQXmyV) |
| 92 | Anderson | [Codepen](https://codepen.io/goodmanbuild/pen/yLQmPYJ) |
| 93 | Ataraxia | [Codepen](https://codepen.io/ataraxia8888/pen/mdQNPNa) |
| 94 | Rxzan | [Codepen](https://codepen.io/Tzuru-Chen/pen/MWzNZrB?editors=0010) |
| 95 | 大衛 | [Codepen](https://codepen.io/exnsrpjc/pen/KKrOYxe?editors=1010) |
| 96 | Cami | [Codepen](https://codepen.io/irisLife/pen/MWzNMBo) |
| 97 | PoWei#8484 | [Codepen](https://codepen.io/harrison-wei-lai/pen/RwEbpWb) |
| 98 | Alice | [Codepen](https://codepen.io/AliceZhao/pen/WNLepgX?editors=0010) |
| 99 | Yin | [Codepen](https://codepen.io/andy888jam/pen/VwqZMGz) |
| 100 | Jasmin | [Codepen](https://codepen.io/thejasmin/pen/LYMPOOm) |
| 101 | Steve Tseng | [Codepen](https://codepen.io/hifly0921/pen/rNoBYbY) |
| 102 | Aden | [Codepen](https://codepen.io/Osases/pen/xxmKpQo) |
| 103 | Cami | [Codepen](https://codepen.io/fayevivi/pen/JjwPmXo) |
| 104 | Daphne | [Codepen](https://codepen.io/DaphneShen/pen/rNoBoeJ?editors=0010) |
| 105 | owen | [Codepen](https://codepen.io/owen-dong/pen/eYbOXvd?editors=1010) |
| 106 | Jie016 | [Codepen](https://codepen.io/Jie-Kuo/pen/abPoemj) |
| 107 | Emily4869 | [Codepen](https://codepen.io/aptx4869Emily/pen/PoXoYVe) |
| 108 | Mocha | [Codepen](https://codepen.io/MochaLee/pen/XWoWgVp) |
| 109 | 精靈 | [Codepen](https://codepen.io/vesbexih-the-bashful/pen/yLGLPVL) |
| 110 | 小明#4408 | [Codepen](https://codepen.io/ujlylmbv-the-lessful/pen/yLGLEMR) |
| 111 | Carey#1010 | [Codepen](https://codepen.io/Leo4077/pen/GRPRXmK) |
| 112 | hungya | [Codepen](https://codepen.io/hungya777/pen/QWzWYWO) |
| 113 | Ed Hsu | [Codepen](https://codepen.io/Ed-Hsu/pen/qBLBeww?editors=1010) |
| 114 | Nisa | [Codepen](https://codepen.io/Nisa491/pen/GRPgGwm) |
| 115 | curry | [Codepen](https://codepen.io/Ted19851223/pen/oNJgMZZ?editors=1010) |
| 116 | SaturnXVIII | [Codepen](https://codepen.io/SaturnXVIII/pen/LYMEaZR) |
| 117 | Yiren | [Codepen](https://codepen.io/Yiren_Liou/pen/zYyGKaP) |
| 118 | Ken | [Codepen](https://codepen.io/Ken720053/pen/BavNQGZ) |
| 119 | jia yu | [Codepen](https://codepen.io/fjqxaznl-the-reactor/pen/dywYPpJ) |
| 120 | Lydia | [Codepen](https://codepen.io/ling-chen-the-flexboxer/pen/rNoONxR) |
| 121 | DavidTsai | [Codepen](https://codepen.io/David-Tsai/pen/XWomPxM?editors=0011) |
| 122 | AmberLin | [Codepen](https://codepen.io/autum55853/pen/OJrVGjG) |
| 123 | Jujube | [Codepen](https://codepen.io/tendayling/pen/eYbzYxP?editors=1010) |
---

- 快速複製格式：

| 0 | user | [Codepen]() |