---
tags: 2022 React 新手讀書會
---

1. 記得錄影
2. 證書任務將於下週三釋出([設計稿](https://www.figma.com/file/pFivfS3rDX3N3u3dN9aIlx/TodoList?node-id=0%3A1)、[API](https://todoo.5xcamp.us/api-docs/index.html))
3. 新手可以嘗試照著講義範例來實做

# 第一週課鋼

1. 必須學的 ES6
1. 陣列解構
2. 物件解構
3. 其餘跟展開運算子
4. 陣列的 map
2. JSX
3. Hooks 狀態的概念

## 課前環境與小知識
* 安裝 [React Developer 工具](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=zh-TW)
* JS 執行[點擊事件 onclick](https://www.w3schools.com/jsref/event_onclick.asp)

## JSX 介紹 (JavaScript and XML)
1. 學 React 的最主要的好處是「將資料與 HTML 元素分離」
2. 執行 JSX 會產生 React 元素
3. JSX 其中一個目的是讓你不用直接指定 DOM 去做事情，可綁定元件資料
> JSX 需要一個根元素
### JSX 範例
1. [環境建立](https://codepen.io/liao/pen/zYWzvjP)，需要載入 React、ReactDOM
* React：建置介面的資料結構
* ReactDOM：將前者進行渲染 (Render)

<!-- React 環境 -->
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<!-- 解析 JSX -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<!-- 自己的 JS -->
<script src="all.js" type="text/babel"></script>

2. [在 JSX 中嵌入 Expression](https://codepen.io/liao/pen/LYdLpqg)
3. [JSX 函式表達](https://codepen.io/liao/pen/eYMRpwe?editors=1010)
4. [JSX 屬性設計](https://codepen.io/liao/pen/YzaQwqm)


5. [Render 持續渲染(非實務)](https://codepen.io/liao/pen/OJvgMWX?editors=1010)
7. [元件設計，開頭要大寫](https://codepen.io/liao/pen/xxWrZqM?editors=1010)
8. [元件設計 - props](https://codepen.io/liao/pen/qBoxLeP?editors=0010)
9. [元件設計 - 建立 App 模組，來組合 component](https://codepen.io/liao/pen/dymRGZb?editors=1010)
10. [元件設計 - map 寫法 I](https://codepen.io/liao/pen/LYdLNNN?editors=1010)
11. [元件設計 - map 寫法 I(加不加小刮號差別)](https://codepen.io/liao/pen/LYdLNNN?editors=1010)
12. [元件設計 - map 寫法 II - 物件作法](https://codepen.io/liao/pen/KKoqzzr?editors=1010)
13. [元件設計 - map 寫法 III](https://codepen.io/liao/pen/OJvgNMO?editors=1010)
14. [元件設計 - 觀察變數有更新，但無法 render](https://codepen.io/liao/pen/KKoqVvy?editors=1010)

## React Hook
輸入內容> 觸發 JSX 監聽事件 > setValue 更新值 > 變更 value 狀態>畫面編譯渲染
1. [元件設計 - 觀察變數有更新，Hook 版本](https://codepen.io/liao/pen/YzaQqYQ?editors=1010)
2. [表單取值](https://codepen.io/liao/pen/gOeRrze?editors=1010)
3. [簡易 todo hooks](https://codepen.io/liao/pen/gOeRryj?editors=1010)

## 每週作業：匯率產生器

請 fork codepen 來自行練習，並到 [discord](https://discord.com/channels/801807326054055996/999482545567707136/1004232680969338900) 來分享自己的寫法
> 此作業不會進行批改，你可以觀看學員寫法學到更多
1. LV1：輸入台幣，即時換算各種幣種([codepen](https://codepen.io/liao/pen/xxWXPgO?editors=1000))
2. LV2：可新增幣種，並同時擁有 LV1 功能([codepen](https://codepen.io/liao/pen/qBoxQyB?editors=1000))
3. LV3：錢包有 5000 元，可即時兌換，兌換會有交易紀錄([codepen](https://codepen.io/liao/pen/oNqGoBZ?editors=1000))

---

參考
- [第 2 章：First Class Funtcion · JavaScript Functional Programming 指南 (gitbooks.io)](https://jigsawye.gitbooks.io/mostly-adequate-guide/content/ch2.html)