更新 21 22 周作業

README.md

@@ -1,6 +1,6 @@
 # 程式導師實驗計畫第四期
 
-備註：二十週以後的課程尚未完成，作業也還沒決定
+備註：二十三週以後的課程尚未完成，作業也還沒決定
 
 ## 這是什麼
 
@@ -754,22 +754,31 @@ HTML 的部分會簡單介紹幾個常見的 tag，以及 head 的一些屬性
 
 這週會學習到 React 的基本應用以及原理，了解為什麼我們需要使用 React。
 
-延伸閱讀：[React 性能優化大挑戰：一次理解 Immutable data 跟 shouldComponentUpdate](https://blog.techbridge.cc/2018/01/05/react-render-optimization/)
-
 指定教材：
 
-請注意，React 在 2019 年 2 月推出 v16.8 這個版本，做了一個很大的改動，那就是多了一個東西叫做 hooks，讓 function component 也能擁有 state。
+React 的核心概念之一叫做 component，要寫出這個 component 有兩種方式，一個是透過 class，一個是透過 function，前者就叫做 class component，後者叫做 function component。
+
+React 在 2019 年 2 月推出 v16.8 這個版本，做了一個很大的改動，那就是多了一個東西叫做 hooks，讓 function component 也能擁有 state。
+
+這個對 React 生態系的影響很大，甚至改變了原本在寫 React 時的思考方式，是很大的變革，但滿多教材都是比較舊的內容，裡面會提到的東西叫做 class component。
+
+雖然說 class component 在很多 app 裡還是很常看到，但基本上新的 app 都是用 function component + hooks 在開發了，底下會把學習資源分成 function component + class component 兩塊，請先學習 function component，如果看不懂或有疑惑，再回去看 class component。
 
-這個對 React 生態系的影響很大，甚至改變了原本在寫 React 時的思考方式，是很大的變革，但底下的指定教材都是比較舊的內容，裡面會提到的東西叫做 class component。
+#### function component 學習資源
 
-雖然說 class component 還是很多 app 看得見，但基本上新的 app 都是用 function component + hooks 在開發了，之後會推出 hooks 的課程，在這之前建議大家先參考網路上其他資源學習，例如說：[從 Hooks 開始，讓你的網頁 React 起來](https://ithelp.ithome.com.tw/users/20103315/ironman/2668?page=1)
+1. [FE302] React 基礎 - hooks 版本，看到「React 基礎」結束，應該就能寫出本週的作業了
 
-1. [FE301] React 基礎：全部
-2. 程式導師實驗計畫第二期：Week12-1 React
-3. 程式導師實驗計畫第二期：Week12-2 React 續
-4. [官方教學](https://reactjs.org/tutorial/tutorial.html)
-5. [React.js 小書](http://huziketang.mangojuice.top/books/react/)
+部署的部分可以參考 FE302 課程中的「部署 React App」，記得在交作業之前先部署好，助教才比較方便改作業。
 
+如果課程看不懂，可以額外參考：[從 Hooks 開始，讓你的網頁 React 起來](https://ithelp.ithome.com.tw/users/20103315/ironman/2668?page=1)
+
+#### class component 學習資源
+
+1. [FE301] React 基礎（Class component 版）：全部
+2. [官方教學](https://reactjs.org/tutorial/tutorial.html)
+3. [React.js 小書](http://huziketang.mangojuice.top/books/react/)
+
+延伸閱讀：[React 性能優化大挑戰：一次理解 Immutable data 跟 shouldComponentUpdate](https://blog.techbridge.cc/2018/01/05/react-render-optimization/)
 
 [HW21 作業連結](/homeworks/week21)
 
@@ -784,25 +793,31 @@ HTML 的部分會簡單介紹幾個常見的 tag，以及 head 的一些屬性
 
 在上一週結束之後，大家應該對 React 有了一些基本的感覺，這一週我們要繼續培養對 React 的感覺，讓大家對 React 越來越熟練。
 
-除此之外也會教大家用 React Router 這一套 library，來實做前端的路由。
+除此之外也會教大家用 React Router 這一套 library，來實做前端的路由。然後也會在課程中帶大家做出一個半成品的 SPA 部落格，並交由各位把剩下的功能完成。
 
 指定教材：
 
-1. [FE301] React 基礎：全部
-2. 程式導師實驗計畫第二期：Week13-1 還是 React
-3. 程式導師實驗計畫第二期：Week13-2 依舊 React
+1. [FE302] React 基礎 - hooks 版本：全部
 
 [HW22 作業連結](/homeworks/week22)
 
-延伸閱讀：[前後端分離與 SPA](https://blog.techbridge.cc/2017/09/16/frontend-backend-mvc/)、[跟著小明一起搞懂技術名詞：MVC、SPA 與 SSR](https://medium.com/@hulitw/introduction-mvc-spa-and-ssr-545c941669e9)
+延伸閱讀：
+
+1. [前後端分離與 SPA](https://blog.techbridge.cc/2017/09/16/frontend-backend-mvc/)
+2. [跟著小明一起搞懂技術名詞：MVC、SPA 與 SSR](https://medium.com/@hulitw/introduction-mvc-spa-and-ssr-545c941669e9)
+3. [How Are Function Components Different from Classes?](https://overreacted.io/how-are-function-components-different-from-classes/)
+4. [A Complete Guide to useEffect](https://overreacted.io/a-complete-guide-to-useeffect/)
 
 #### 自我檢測
 
-- [ ] 我熟悉 React 的基本使用
-- [ ] 我知道如何使用 React Router 
-- [ ] 我了解 React Router 的目的
-- [ ] 我知道什麼是 Single Page Application
-- [ ] 我理解現在的前端與以往的差別
+- [ ] P1 我熟悉 React 的基本使用
+- [ ] P1 我知道如何使用 React Router 
+- [ ] P1 我了解 React Router 的目的
+- [ ] P1 我知道什麼是 Single Page Application
+- [ ] P1 我理解現在的前端與以往的差別
+- [ ] P1 我知道 class component 與 function component 的差異
+- [ ] P1 我知道 class component 的各個 lifecycle
+- [ ] P2 我知道每一個 hook 大概是在做什麼
 
 ### 第二十三週（11/16 ~ 11/22）：前端框架（三）
 

homeworks/week21/README.md

@@ -4,13 +4,64 @@
 
 ## hw1：Todo List
 
-請你用 React 實作出一個 todo list，介面跟功能就參考之前用 jQuery 寫出來的那個就行了。
+請你用 React 實作出一個 todo list，需要實作的功能有：
+
+1. 新增 todo
+2. 編輯 todo（這個比較複雜，可以最後再來做，沒有做也可以）
+3. 刪除 todo
+4. 標記完成/未完成
+5. 清空 todo
+6. 篩選 todo（全部、未完成、已完成）
 
 ## hw2：五子棋遊戲
 
 請實作出一個簡單的五子棋遊戲，讓黑棋白棋可以輪流下，並且判定勝負。棋盤的話請用十九路棋盤（19x19），黑棋先下。
 
-在寫之前你或許會想先看[官方教學](https://reactjs.org/tutorial/tutorial.html)，[中文版](https://zh-hant.reactjs.org/tutorial/tutorial.html)。
+在寫之前你或許會想先看[官方教學英文版](https://reactjs.org/tutorial/tutorial.html)或是[中文版](https://zh-hant.reactjs.org/tutorial/tutorial.html)。
+
+不過要注意的是官方教學是用 class component 的寫法，你需要吸收之後自己試著用 function component 寫寫看。
+
+<details>
+  <summary>提示 #1 - 不知道怎麼存棋盤的 state 看這邊</summary>
+
+這邊用二維陣列來做比較好做，用一個 board[y][x] 來存每一個的棋子，左上角是 board[0][0]，往下 y + 1，往右 x + 1，所以第二行一個棋子就是 board[1][0]
+
+利用 `Array(19).fill(null)` 可以產生 `[null, null, ....]` 一共 19 個 null 的陣列，這就是每一個橫排的內容。所以整個棋盤可以用：`Array(19).fill(橫排內容)`來產生，就是 `Array(19).fill(Array(19).fill(null))`
+
+``` js
+const [board, setBoard] = useState(Array(19).fill(Array(19).fill(null)))
+```
+
+要改變棋盤的時候要記得不能直接去改變 state，所以有兩種方式，第一種最簡單，就是把整個陣列做 deep clone 然後改值就好
+
+``` js
+function updateBoard(x, y, newValue) {
+  const newBoard = JSON.parse(JSON.stringify(board))
+  newBoard[y][x] = newValue
+  setBoard(newBoard)
+}
+```
+
+第二種則是用我們在課程中教過的 map，不過因為有兩層所以會比較複雜一點：
+
+``` js
+function updateBoard(x, y, newValue) {
+  setBoard(
+    board.map((row, currentY) => {
+      // 如果這一個橫排不是我要改的，直接回傳即可
+      if (currentY !== y) return row;
+
+      // 如果是的話，找到我要改的那個 x 的位置
+      return row.map((col, currentX) => {
+        if (currentX !== x) return col
+        return newValue
+      })
+    })
+  )
+}
+```
+
+</details>
 
 ### 延伸挑戰題
 
@@ -33,4 +84,3 @@
 1. 為什麼我們需要 React？可以不用嗎？
 2. React 的思考模式跟以前的思考模式有什麼不一樣？
 3. state 跟 props 的差別在哪裡？
-4. 請列出 React 的 lifecycle 以及其代表的意義（這題有可能會刪掉，因為還沒補上 hook 課程所以先留著）

homeworks/week21/hw4.md

@@ -5,6 +5,3 @@
 
 ## state 跟 props 的差別在哪裡？
 
-
-## 請列出 React 的 lifecycle 以及其代表的意義
-

homeworks/week22/README.md

@@ -2,34 +2,25 @@
 
 ## hw1：SPA 部落格
 
-請做出一個簡單的 Blog SPA，一共有三個頁面：
-
-1. About：隨意顯示一些話
-2. 文章列表：可以看到所有文章
-3. 單篇文章：可以看到單篇文章內容
-
-Route 的部分請使用 React Router，資料請串接下面的 API
-
-圖片可參考：
+在課程中我們有做了一個簡單的 blog 系統，完成了部分功能，而這一週的作業就是由你把剩下的功能完成，讓整個 blog 的功能變得更完整。
 
-![](blog.png)
-
-API 格式：
-
-base url：https://qootest.com  
+請做出一個簡單的 Blog SPA，一共有三個頁面：
 
-```
-GET     /posts 取得所有 post
-GET     /posts/:id 取得某個 post
-```
+1. 登入頁面：輸入帳號密碼後可以登入
+2. 註冊頁面：可以開放使用者註冊
+3. About 頁面：隨意顯示一些關於這個部落格的話
+4. 文章列表頁面：可以看到所有文章，一頁只會顯示 10 筆，需要支援分頁功能，可以換頁
+5. 單篇文章頁面：點進去文章以後可以看到文章完整內容
 
-使用說明可以參考 https://github.com/typicode/json-server  
-因為這個服務是用 json server 這個 library 建的
+Route 的部分請使用 React Router，資料請串接課程中提到的 API
 
-例如說 https://qootest.com/posts 就可以拿到所有 post，https://qootest.com/posts?_limit=1 就可以限制只拿 1 筆。
+https://github.com/Lidemy/lidemy-student-json-api-server
 
+會用到的是 Users 跟 Posts 這兩個的資料。
 
 ## hw2：簡答題
 
-1. React Router 背後的原理大概是怎麼實作的？
-2. SDK 與 API 的差別是什麼？
+1. 請列出 React 內建的所有 hook，並大概講解功能是什麼
+2. 請列出 class component 的所有 lifecycle 的 method，並大概解釋觸發的時機點
+3. 請問 class component 與 function component 的差別是什麼？
+