# 🏅Day 21 - React 基礎練習 (6) - useState

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


<!-- 解答：

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>
  );
}

-->

| yaha | codepen |
| -------- | -------- |
| Miikaa | [codepen](https://codepen.io/Miikaa/pen/MYeeWKG) |
| 7lun | [codepen](https://codepen.io/mfyvqhsn-the-bold/pen/ZYOpJad?editors=1011) |
| 老屠 | [codepen](https://codepen.io/fsgfxvlb-the-selector/pen/yyJaPaz?editors=1010) |
| Zem | [codepen](https://codepen.io/dgldwqlg-the-vuer/pen/YPWGLMr) |
| Jin | [codepen](https://codepen.io/Jin-L/pen/JoKRvgE) |
| Nooooora | [CodePen](https://codepen.io/Nora-Ch/pen/zxBKaqo) |
| Tetsu |[Codepen](https://codepen.io/ttgchang/pen/KwMgezP)|
| Melanie |[Codepen](https://codepen.io/pnrcspte-the-animator/pen/ZYOpROQ)|
| Chia |[Codepen](https://codepen.io/Chia-the-encoder/pen/ZYOpRpQ)|
| 7Red |[Codepen](https://codepen.io/cch2655/pen/jErMKxb)|
| Marco |[Codepen](https://codepen.io/MarcoChiu/pen/OPXREqL)|
| andy |[Codepen](https://codepen.io/ewnblckz-the-styleful/pen/wBWzXZB?editors=0010)|
| 地瓜 |[Codepen](https://codepen.io/ChippyYU/pen/YPWGvdR)|
| cks40660 |[Codepen](https://codepen.io/CKS40660/pen/zxBKLXe)|
| RUDY |[Codepen](https://codepen.io/Rudy-crw/pen/MYejqeZ?editors=1011)|
| 平平 |[Codepen](https://codepen.io/ypinpin/pen/vEKXzve)|
| KOMATSU PEI |[Codepen](https://codepen.io/Komatsu2021/pen/ZYOpoZE?editors=1011)|
| Eileen |[Codepen](https://codepen.io/Eileen-io/pen/vEKXQaE)|
| Jenna |[Codepen](https://codepen.io/abiscc14/pen/MYejZoL)|
| 小懿 |[Codepen](https://codepen.io/YT-the-vuer/pen/ByzLMyG?editors=1111)|
| Percy |[Codepen](https://codepen.io/Percy-Ku/pen/VYjKgXd?editors=1010)|
| kashiwatei |[Codepen](https://codepen.io/kashiwatei/pen/GgqjzLa?editors=1010)|
| Eric | [Codepen](https://codepen.io/wc-su/pen/gbMwEEw) |
| 社子畢卡索 | [Codepen](https://codepen.io/pen?template=GgqjaNX)|
| 舜仁 | [Codepen](https://codepen.io/shunjen/pen/wBWzbqZ)|
| FangFang | [Codepen](https://codepen.io/Fang-the-selector/pen/GgqjaxP?editors=1010)|
| cindy | [Codepen](https://codepen.io/a50134/pen/dPXpBYw?editors=0010)|
| wind | [Codepen](https://codepen.io/wind7y/pen/RNRGXEL)|
| 叮咚 | [Codepen](https://codepen.io/pinchieh-lin/pen/ZYOBQMd)|
| 登登登 | [Codepen](https://codepen.io/Duncanin/pen/raLWmme?editors=0010)|
| 星雪糖 | [Codepen](https://codepen.io/vfpofbgm-the-scripter/pen/MYebopv?editors=0010)|
Leonard | [Codepen](https://codepen.io/hyyfjqra-the-sans/pen/RNRoZNr?editors=0010)|
| Rogan | [Codepen](https://codepen.io/RoganHsu/pen/KwMNByW?editors=1111) |
| ------- | --------------------------------------------------------------------------- |
| Wafa | [Codepen](https://codepen.io/dqricwgo-the-reactor/pen/jErVJrq?editors=0010) |
| JiaMori | [Codepen](https://codepen.io/jiamori/pen/emzvEYe) |
| tanuki | [Codepen](https://codepen.io/tanuki320/pen/QwEgZRx?editors=1010) |
| ZoeKang | [Codepen](https://codepen.io/byehywmx-the-animator/pen/GgqvZmp) |
| 小趴 | [Codepen](https://codepen.io/papa2415/pen/qENXNwm) |
| TWLeoC | [Codepan](https://codepen.io/TWLeoC/pen/NPrvLBP) |
| Wen | [Codepen](https://codepen.io/hsiao-kevin/pen/EaybREQ) |
| 伊迪 | [Codepen](https://codepen.io/sorryFish/pen/bNevYbP) |