# 第一堂：關注點分離

本頁連結：https://hackmd.io/Ls_jd7jpSqSRUH8GcwTZag?view

## 開課提醒
1. 錄影
2. 將[書籤](https://rpg.hexschool.com/#/training/12062543649513962870/board)加入最愛

## 講師是誰？

卡斯伯～

- 自我介紹：
- 網路用名：[卡斯伯](https://www.facebook.com/WccCasper)
- 六角學院共同創辦人
- 過去經歷：[鐵人賽](https://ithelp.ithome.com.tw/users/20083608/ironman)、[書](https://www.books.com.tw/products/0010941867?srsltid=AfmBOoo3GCZT2Pa-y7AjRlfop8kWhLKOUlVxqQyrqBN_yM2X-qYxZUBD)、Conference
- 參加直播班的經歷
- 有參加過任何的六角直播班
- 已經有參加過 本作品實戰班
- 為什麼有些同學看起來很厲害？
- 請同學跟自己比

## React 作品實戰課程目標

- 熟悉 JavaScript 實戰技巧
- 掌握 React 技術
- 帶領每位同學完成：
1. [屬於自己的獨立作品](https://works.hexschool.io/#/)
> 可參考開學典禮

## 本週目標

- JS 必備知識
- 陣列方法
- React 與關注點分離

## JS 必備知識

#### 為什麼懂這個？

看到以下程式碼的感覺是...？

const { useState } = React;

function App() {
  const [cart, setCart] = useState([
    {
      title: '綠色馬卡龍',
      price: 120,
      amount: 3,
    },
    ...]);

  return (
    <table>
      {cart.map((item, key) => (
        <tr key={key}>
          <td>{item.title}</td>
          <td>{item.price}</td>
          <td>{item.amount}</td>
          <td>NT$ {item.price * item.amount}</td>
        </tr>
      ))}
    </table>
  );
}

const root = ReactDOM.createRoot(document.getElementById('app'));
root.render(<App />);

### 解構

解構賦值：https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

通常解構賦值是一起介紹的，但本篇會先著重在解構上

常見解構技巧：

- 物件、陣列解構
- 函式參數解構

**延伸閱讀：閉包**

閉包概念：https://www.casper.tw/development/2020/09/26/js-closure/

> 閉包與 React 有很大關係，但這會偏向理論知識，不用急於一時理解它
>

### 陣列方法：forEach 與 map

1. forEach 是基本的陣列迴圈手法
2. map 則可以再回圈過程中，回傳特定值

相關閱讀：https://www.youtube.com/watch?v=_vFuDQ_6Xt8

## forEach 與 map

- 可參考：https://wcc723.github.io/javascript/2017/06/29/es6-native-array/
- 技法：
- 抓出符合的數值
- 統一為所有資料做調整
- 補充：map, filter
- 補圖：**forEach 概念圖**、**(map, filter) 概念圖**

所有陣列方法影片：https://www.youtube.com/watch?v=_vFuDQ_6Xt8

## React.js 與關注點分離

### 為什麼懂這個？

三大框架均「資料與畫面」分離的概念，因此需要熟悉由畫面轉為資料、資料轉為畫面的雙向理解。

### 學習如何將資料抽出

如以下的資源，如何轉換成 data（JS 資料、JSON）

<table>
  <thead>
    <tr>
      <th width="200">品名</th>
      <th>單價</th>
      <th>數量</th>
      <th width="150">小計</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>綠色馬卡龍</td>
      <td>
        120
      </td>
      <td>
        3
      </td>
      <td>$ 120</td>
    </tr>
    <tr>
      <td>粉係馬卡龍</td>
      <td>
        120
      </td>
      <td>
        2
      </td>
      <td>$ 240</td>
    </tr>
    <tr>
      <td>甜蜜左擁右抱</td>
      <td>
        200
      </td>
      <td>
        7
      </td>
      <td>$ 1400</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">總計：</td>
      <td>NT$ 1760</td>
    </tr>
  </tfoot>
</table>

### 導入 React 至 Web

1. **載入 CDN**

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<!-- 載入 Babel 獨立版本，將 JSX 和 ES6+ 語法轉譯為瀏覽器可執行的 JavaScript -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

2. **初始化 React**

注意：在此需要使用 `type="text/babel"` 進行轉譯

<script type="text/babel">
// 定義一個名為 App 的函式型元件
function App() {
  // 該元件回傳一個包含文字 "React App" 的 div 元素
  return (
    <div>React App</div>
  );
}

// 進行 React 的初始化
const root = ReactDOM.createRoot(document.getElementById('app'));
root.render(<App />);
</script>

### 常見語法

1. JSX
- 使用 純 HTML 進行撰寫
- 注意：所有的標籤都需要結尾
- JS 屬性會使用小駝峯形式
- `*colSpan*`
- `className`
- 使用 `{}` 進行表達式渲染
- 延伸閱讀：https://www.casper.tw/development/2020/09/17/js-expression/

1. 建立狀態

const [state, setState] = useState(1);
// 使用 useState Hook 宣告一個名為 state 的狀態變數，初始值為 1

- **宣告狀態變數：** `useState` 是 React 的一個 Hook，用於在函式型元件中添加狀態。這行程式碼使用解構賦值的方式，從 `useState` 回傳的陣列中取得兩個值：
- `state`：目前的狀態值，初始值為 `1`。
- `setState`：用於更新 `state` 的函式。
- **初始值設定：** `useState(1)` 中的參數 `1` 是 `state` 的初始值。這表示在元件首次渲染時，`state` 的值為 `1`。
- **更新狀態：** 當需要更新 `state` 的值時，呼叫 `setState` 函式，並傳入新的值。例如，`setState(2)` 會將 `state` 更新為 `2`，並觸發元件的重新渲染，以反映最新的狀態。

## 本週額外挑戰

- 預習章節閱讀：[連結](https://rpg.hexschool.com/#/training/12062543649513962870/board/content/12062543649513962883_12062543649513962890)
- **[Vite 課程閱讀](https://courses.hexschool.com/courses/react-video-course1/lectures/58000603)** <span style="color: red">重要</span>
- 課程 API
- 作業：
- 作業連結：https://rpg.hexschool.com/#/training/12062543649513962870/board/content/12062543649513962871_12062543649513962892?tid=12062543649514270204
- 助教作業解說（週日上午 10:00）
- 團隊任務：
- https://rpg.hexschool.com/#/training/12062543649513962870/board/content/12062543649513962875_12062543649513962900
- Kata 挑戰：
- [說明影片 - 我記得是一鏡到底 😂](https://courses.hexschool.com/courses/react-video-course1/lectures/58000039)
- 挑戰細節：
1. 按照錄影內容，完成 Kata 挑戰，禁止使用 copilot
2. 過程需要錄影及開啟計時器，並上傳至 Youtube
3. 分享至 [Discord 頻道](https://discord.com/channels/801807326054055996/1322172305618505882/1322172392176619610)，分享內容：

            我是 xxx
            挑戰時間：8:14
            連結： Youtube...
            心得（可選）：                  

- 獎勵：
- 下週上課抽出三名挑戰者，獲得星巴克拿鐵咖啡
- 條件：下週五中午 12:00 前提交，並且在 15 分內完成

常見問題：

Ｑ：老師用哪款軟體計時？
[這款](https://apps.apple.com/au/app/tinystopwatch/id1447754003?mt=12)