W21 + W22_React 學習筆記

零、讀書計畫

1. 預計花費時數：100 小時

2. 胡立建議的方法：用兩週把課程完整看完，再把作業一起寫完，FE302 看不懂再回頭看 FE301

3. 預計學習內容：

a. React

• 怎麼用？

• 原理？

• 為什麼需要 React?

b. 作業概覽

W21

hw1: 用 React 做 Todo List

hw2：五子棋遊戲（ooxx 的延伸）

hw3：報名表單改寫，用 React 改寫 W7 的報名表單

hw4：簡答題

為什麼我們需要 React？可以不用嗎？

React 的思考模式跟以前的思考模式有什麼不一樣？

state 跟 props 的差別在哪裡？

W22

hw1：SPA 部落格，完成課程中剩下的部份

hw2：簡答題

請列出 React 內建的所有 hook，並大概講解功能是什麼

請列出 class component 的所有 lifecycle 的 method，並大概解釋觸發的時機點

請問 class component 與 function component 的差別是什麼？

uncontrolled 跟 controlled component 差在哪邊？要用的時候通常都是如何使用？

4. 自我檢測

P1 我知道 React 的目的以及原理

P1 我知道我們為什麼需要 React

P1 我知道使用 React 跟之前使用 jQuery 的區別

P1 我理解 state 跟 props 的不同

P1 我熟悉 React 的基本使用

P1 我知道如何使用 React Router

P1 我了解 React Router 的目的

P1 我知道什麼是 Single Page Application

P1 我理解現在的前端與以往的差別

P1 我知道 class component 與 function component 的差異

P1 我知道 class component 的各個 lifecycle

P2 我知道每一個 hook 大概是在做什麼

5. 學前關鍵字

React, function component, hooks, class component, React Router

6. 先看 W21、W22 隨意聊

W21 隨意聊：

1. react 的重點就只有一個，就是「關心程式的 state，改變畫面就是改變 state」

2. useEffect 的重點也只有一個，就是「某個 state 改變以後，要做什麼事」

   而 useCallback 跟 useMemo 對功能「完全沒有影響」，只是拿來做優化的手段

   所以不會因為你沒用這些程式就壞掉

   正好相反，有時候你亂用反而才會讓程式壞掉

3. react hooks 已經完全成為主流

4. 期末專案
   a. 真實性：網站內容需要仿真，不要用 aaa、bbb
   b. 面試官會先看 README -> 作品 -> code
   c. 把基本做好，介紹、使用方式、功能、如何開發跟部屬這些都是基本的
   d. 變數命名要統一
   e. react 照理來說會越寫越習慣，會變成 react 的形狀，開始用 state 來思考

W22 隨意聊

1. 正確的思考方式其實是，你的所有 todo 就是一個 state

   然後有另一個 state 是現在的篩選狀態

   從這兩個 state，你就可以直接動態算出要呈現的資訊是什麼

   靠著「把兩個 state 加在一起」產生一個新的狀態並且呈現在 UI 上

2. 如果你覺得效率是個問題，那就是 useMemo 出場的時刻了

   透過 useMemo 你就能實現出「只有在 todo 或 filter 不同的時候才算」

3. console.log 在 react 還是很好用

4. 設立停損點：

   真的卡關到不行也不要硬撐，那可能沒什麼用

   直接去看同學作業或是參考範例才是比較有效的方法

   有些東西不會就是不會，卡一天想不出來，多給你七天可能也想不出來

一、筆記內容

從 React 最重要的基本概念開始，以 todo list 為例，先講解「以零組件為概念來理解 React」。學完背景知識例如「怎麼寫一個 component、css」以後，第一個先學到的是 useState，接著再學了 useEffect，並且以 React 的最大特色「關注 state，資料改變時，state 也跟著改變了」來理解如何做性能優化。

回顧 React 的發展歷史，學習了 class component 以及與 function component 差異，再來補充說明一些在開發時有機會用到的 hooks。

最後說明了 React 當中最後一個重要的概念 useContext，prop drilling 是來自「當父層要傳遞給子層，如果包了很多層，每一層都必須要傳遞 props」，而 useContext 就是為了要解決層層傳遞的問題。

第六篇文章除了總結以外，介紹了如何規範 React 寫法，例如用 Eslint 提示或利用 propTypes 驗證 props，最後再次強調核心概念：以 state 為中心去思考

最後，真的是最後了，實作留言板、部落格、部署 React 也做了測試，React 的基礎學習就暫時告一段落。

接下來還有 React Redux 跟後端框架等著我去探索。

1. 來學 React 吧之一＿以 todo list 為例學會 React 基礎與 useState 介紹

2. 來學 React 吧之二＿React 重要概念 useEffect

3. 來學 React 吧之三＿React 中的性能優化 memo、useCallback、useMemo

4. 來學 React 吧之四＿Class component 介紹及與 Function component 的差異

5. 來學 React 吧之五＿prop drilling 與 context

6. 來學 React 吧之六＿React 基礎總結

7. 來學 React 吧之七＿React 實作留言板

8. 來學 React 吧之八＿部署 React App

9. 來學 React 吧之九＿實作部落格

10. 來學 React 吧之十＿淺談測試

11. 用 React hooks 實作一個 todo list

12. Gomoku with React 用 React 做一個五子棋小遊戲

13. Form with React 用 React 做一份表單

14. 為什麼需要 React / 思考模式的差異 / state vs props

15. React with SPA Blog

16. The introduction and difference between class component and function component in React

二、W21、W22 直播檢討

W19 直播檢討 裡有 React 重點，相關問題：Q6、Q10、Q17、Q18

W21_直播檢討 內有 useMemo, useCallback, memo 介紹

W22 直播檢討

三、心得與心態調整

1. 心得：

React 模式跟以前的思考方式很不一樣，雖然基本概念是一個個零組件，但是「改變資料就是改變 state 這件事」很新鮮，尤其是當輸入框輸入每一筆資料時，就是一個 state 這件事很特別；按下 Add todo 按鈕，需要抓取 input 資料以及把資料放到 todo 上面，這一連串行為都讓「Add todo 按鈕脫離不了改變 state 的範圍，所以這個按鈕要重新 render 一次」這件事也很不可思議。

先學習 funciton component 的我，反而在後面學 class component 時遇到了阻礙。正因為這兩樣都沒有學過，因此無論先學哪一樣，似乎都會因為「與先前模式的不同」而有些難以進入狀況的情形發生。

本次學習也體認到了以下幾點：

a. 官方規格書是我的好朋友：難以進入狀況時，掌握幾個要素就可以了（這是什麼、為什麼要用、要怎麼用）

b. 能夠重頭把某樣東西實作出來就算是真的理解了：例如以前的 cookie & session 一直到現在，胡立都在用「實作出基本原理的方式」來教導

這次學習前新增的學習計畫，例如訂立學習時數、先看隨意聊了解關鍵字，這些之前沒有嘗試過的方式，覺得都對學習蠻有幫助的。

有時候越想要花開，花越是不開，能夠不急不徐的前進，才能真正的安穩。

W22 補充：體驗到優化性能的 hook 要小心使用，有可能亂用會壞掉。而優化的評估到底該怎麼知道呢？目前的我還是一知半解。

2. 心態調整：

某個影片老師寫程式碼一次就成功，老師驚訝的倒抽一口氣，我整個被逗樂。

仔細想想，寫程式一次就成功的機率是很低的，對比我一次就想把東西學會，簡直超高標準，超低練習次數，兩次相加起來的學習落差，是理所當然。這樣理解以後，就可以不需要有這種心理負擔了。

學不學得會只是遲早的事，這當中產生的情緒先面對它，接著去理解它，每次的學習都可以當作下次優化的根基，再去思考怎麼調整會更好。

開始了 W22 的部落格，在練習好幾次的方式下，有那麼一瞬間忽然意識到自己「不害怕錯誤訊息了」，或者更正確地說是更有耐心的去閱讀它們了，因為了解沒有解不開的錯誤訊息，只有不耐煩的自己，好像是一件好事？

四、其他

用現成的套件建置 react 環境遇到的問題

如何建立 SSH 連線在 GitHub 上面