系列文章
Day 21 - 保存和重置 state
昨天學了元件間如何共用 state，今天要來看如何保存和重置 state。 今天的內容： UI 樹中的位置 在相同的位置的相同元件 在相同位置的不同元件 在相...
Day 22 - Reducer 的應用
今天要來學習的 Reducer 的應用，主要內容為 Reducer 的操作步驟。 較複雜的事件處理器 隨著程式越來越複雜，我們可能會遇到下面這樣的情況 像是在...
Day 23 - prop drilling 和 context
今天來學習如何使用 context 來解決 prop drilling 的問題。今天會學習的內容為： 了解什麼是 prop drilling context...
Day 24 - React 基礎實作練習：輸入授權碼
React 官方文件目前已結束第三章，進入最後一個章節的學習前，最後幾天的鐵人賽以實作的練習來複習所學習過的內容吧。今天要來練習輸入授權碼的表單製作。要讓使用者...
Day 25 - React 基礎實作練習：下拉式選單
今天要來練習做下拉式選單選擇國家。目前我們的程式碼已經有基礎的樣式。需要讓下拉式選單的功能正常運作。 目前有的程式碼： import React from...
Day 26 - React 基礎實作練習：追加購物清單
今天要來製作購物清單，透過這個練習我們可以複習 Lifting State Up 的觀念。先來看目前的程式碼： App.js import React fr...
Day 27 - React Ref 實作練習
今天讀了官方文件 Ref 相關的二篇文章，內容是 Referencing 和透過 Ref 操作 DOM，來透過實作練習看看。 改變影片播放速度的練習 現有程式碼...
Day 28 - React useEffect 基礎：Focus a field on mount 實作練習
今天讀完了 React 官方文件的 Synchronizing with Effects 的章節，初步學習了 Effects 的相關知識，透過實作來練習和理解觀...
Day 29 - React useEffect cleanup function 練習：製作電子時鐘
昨天我們學習了副作用相關的知識，並嘗試使用useEffect完成了一個小練習，但還沒有使用到cleanup function。今天要透過實作的練習來學習Clea...
Day 30 - 系列回顧、檢討會、知識管理與學習
30天的鐵人賽終於來到最後一天，來回顧一下這30天的學習，以及幕後花絮（？）知識的管理與學習。 系列回顧 本次鐵人賽從官方文件的Describing the U...