---
tags: 2022 React 新手讀書會
---
# 第二週：react component
* 記得錄影
* [證書任務開放！](https://rpg.hexschool.com/training/31/task)
* [元件示意圖](https://whimsical.com/HpYwrKMhaUyNXZGHZqogfu)

## 課程之前，分享什麼叫做 components

## 主機板([連結](https://www.google.com/imgres?imgurl=https%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fcommons%2Fthumb%2Fa%2Fa6%2FIntel_D945GCCR_Socket_775.png%2F640px-Intel_D945GCCR_Socket_775.png&imgrefurl=https%3A%2F%2Fzh.wikipedia.org%2Fwiki%2F%25E4%25B8%25BB%25E6%259D%25BF&tbnid=sMD0XnkN6OXUdM&vet=12ahUKEwjPjIKeg7b5AhX6RvUHHa-cA_gQMygCegUIARDGAg..i&docid=CPsuddLJgbZ08M&w=640&h=480&q=motherboard&hl=zh-TW&ved=2ahUKEwjPjIKeg7b5AhX6RvUHHa-cA_gQMygCegUIARDGAg))
* 一張主機板上，可以插入各種硬體設備(CPU、記憶體)
* 一個網頁 App 裡，可以插入各種網頁元件(表頭表尾、產品列表)

## 網頁元件化
> 出處： [Kuro：重新認識 Vue.js](https://book.vue.tw/CH2/2-1-components.html)

## 元件大綱([Component 文件](https://zh-hant.reactjs.org/docs/components-and-props.html))
### 第一週複習
* [元件設計 - 表單 App 作法](https://codepen.io/liao/pen/VwXdaGQ?editors=1010)
* 在 React 世界，一個函式就可作為一個元件
* [記得元件函式命名開頭要大寫](https://zh-hant.reactjs.org/docs/components-and-props.html#rendering-a-component)
* [元件設計 - 多個元件](https://codepen.io/liao/pen/jOzKqdO?editors=0010)
* 元件最外面需要有一個外層，也可以用 `<></>` 來包裹
* [Props 是唯讀的](https://zh-hant.reactjs.org/docs/components-and-props.html#props-are-read-only)
* App 父元件的資料，傳入子元件 Welcome(附圖)
## 用黑熊市情境來認識元件
1. [一個資料>單一元件(黑板)](https://codepen.io/liao/pen/xxWzOYJ)：餐廳店長需要吸引客人，買立式黑板放門口，每天寫每日特餐吸引小資族
2. [多個資料>單一元件(黑板)](https://codepen.io/liao/pen/VwXdjXR?editors=1010)：咖啡廳店長，發現餐廳店長這樣做很是心動，於是他也有樣學樣
3. [單一資料>多個元件(桌面、門口)](https://codepen.io/liao/pen/vYRrKjw?editors=1010)：黑熊市長喝令各餐廳要寫警告標語：「出門前要記得刷牙，避免口臭影響市容」
### 小考題(試著自己畫圖)
1. [小題目](https://codepen.io/liao/pen/KKoyyQE?editors=1010)
2. 購物車資料、產品資料倒入分頁元件？([重構前](https://codepen.io/liao/pen/qBoKNwg?editors=0010)、[重構後](https://codepen.io/liao/pen/vYRrKQo?editors=1010))
3. 多個彈跳訊息倒入 Modal 元件？([重構前](https://codepen.io/liao/pen/PoRaGYN?editors=1010)、[重構後](https://codepen.io/liao/pen/abYKmbP?editors=1010))
## useEffect 載入外部 API
* [參考：使用 Effect Hook](https://zh-hant.reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects)
* [計數器](https://codepen.io/riecball/pen/Yzaxjea?editors=1011)
* 預設會載入一次
* 可監控變數
* [寶可夢卡片 AJAX API 載入 ](https://codepen.io/liao/pen/NWYzRxg?editors=0010)、[進階自訂 useFetch Hooks](https://codepen.io/liao/pen/MWVXjvq?editors=0010)
* [條件 render](https://zh-hant.reactjs.org/docs/conditional-rendering.html)
* 只打算跑一次，可寫 `[]`

### 8/22 21:00~24:00 快閃三小時優惠活動
* [主線任務開放！](https://rpg.hexschool.com/training/31/task)
* 8/22 21:00 Email 釋出快閃三小時影音課與 [JS 直播班](https://www.youtube.com/watch?v=e5RXWKVh_Sg)優惠，可預約小鈴鐺提醒
:::spoiler

:::
## 子傳父案例
* [相乘產生器 - 同元件處理](https://codepen.io/liao/pen/MWVXQgR?editors=1010)、[子元件傳父元件](https://codepen.io/liao/pen/OJvEXWL?editors=1010)
* 新增單筆咖啡廳的菜單([重構前](https://codepen.io/liao/pen/RwMJpvp?editors=1010)、[重構後](https://codepen.io/liao/pen/dymKvrX?editors=0010))
* 新增咖啡廳、餐廳的菜單([重構前](https://codepen.io/liao/pen/xxWzqzK?editors=1010)、[重構後](https://codepen.io/liao/pen/jOzKBep?editors=1010))
* [大樓關燈案例](https://codepen.io/liao/pen/QWmxvpo)、[共用開關元件](https://codepen.io/liao/pen/rNdKpEE?editors=1010)

## 元件常會遇到的事情
1. 拆元件的問題，拆過頭
a. 解決辦法：觀察是否有重複性
3. 傳遞資料(要多練)：
a. 父傳子
b. 子傳父

## export、import

* 下週三上課前，請觀看此 [export、import 模組化影片](https://courses.hexschool.com/courses/202011122/lectures/34024875?preview=logged_in)
## 每週作業一：todolist
fork 此 [Codepen](https://codepen.io/liao/pen/MWVBGxq?editors=1010) 版型，做完請提交到此 [discord](https://discord.com/channels/801807326054055996/999482545567707136/1006581178100351067) 討論串
### 元件等級表：
* Lv1：全寫在同層
* LV2：拆出 Item，但 input 在 todolist
* LV3：全拆、Item 跟 input 全拆
### 功能等級表：
* LV1：只做新增、刪除功能
* LV2：checkbox 切換是否完成、左下角 N 個待完成項目、清除已完成
* LV3：做狀態頁籤切換，全部、待完成、已完成

## 每週作業二：嘗試自己做元件
* 依照上方各種不同的情境，來規劃一個生活化的元件設計
* [分頁設計](https://learn-at-rocketcamp.github.io/play-react-pagination/)、[GitHub](https://github.com/Learn-At-RocketCamp/play-react-pagination/tree/draft/try-pagination/src/components)
* [Modal 設計](https://codepen.io/DoLucky/pen/bGvjaaq?editors=0010)

## 額外補充
1. [評價星星](https://codepen.io/liao/pen/VwXrrqz?editors=1011)
2. React Hooks Form Codepen 上不錯的寫法(第四週會提)：https://codepen.io/BaylorRae/pen/oNxeBQJ?editors=0010