iT邦幫忙

鐵人檔案

2023 iThome 鐵人賽
回列表
Modern Web

React進階班,用typescript與jest製作自己的custom hooks庫 系列

概述:
這個主題是在從剛學React到精熟必經過程,在透過TypeScript加強React開發的品質和效率。會講解如何建立自己的自定義Hooks庫,以及如何使用單元測試來驗證這些Hooks的功能。從理論知識到實務操作,希望讀完可以讓有一定基礎的React工程師學習到更多知識。

30天的規劃:
目前是規劃會從最簡單的useFetch,useLocalStorage,useClickOutside慢慢的到useDebounce等等,可能會有大約20~30個custom hooks練習,使用typescript開發並且教學如何使用unit test去做測試.

鐵人鍊成 | 共 30 篇文章 | 12 人訂閱 訂閱系列文 RSS系列文
DAY 1

[Day 1] 為什麼要寫Custom Hook與測試

前言 當我們還是新手時,常常寫了一大堆程式碼,程式碼越來越亂,UI與邏輯瘋狂耦合,發生bug又找不到在哪,又發現好多地方都是差不多的功能,卻每個地方都寫不一樣,...

DAY 2

[Day 2] 就從最基礎的useCounter開始撰寫與測試吧~

主程式 首先製作一個簡單的useCounter我們希望他會有三個功能,加一、減一、重置到初始值,並且也要回傳count值、與可以自己設定的setCount,我們...

DAY 3

[Day 3] 本地存取useLocalStorage登場

今天我們來製作useLocalStorage的custom hook,我們希望他可以像useState一樣製作一個方便控制的localstorage的custo...

DAY 4

[Day 4] 開始寫useLocalStorage測試吧

先講解第一種最常見的方法吧~首先我們要模擬LocalStorage做一個假的LocalStorageMock: LocalStorageMock主要有五個東西...

DAY 5

[Day 5] 用第二種測試方式寫useSessionStorage測試

首先,先講一下昨天的錯誤拉昨天的錯誤碼找到拉~改了一下useLocalStorage.ts的readInitValue發現如果不是JSON.stringify(...

DAY 6

[Day 6] 再來寫最常使用到的useFetch吧

對前端工程師來說,串接api應該是超級常見的事了吧,我們今天就用axios來寫useFetch來控制data、loading與錯誤吧 基礎版 import ax...

DAY 7

[Day 7] useFetch測試摟

我們這次要多下載一個套件 npm i axios-mock-adapter 這個套件的用途呢,是模擬axios發送api 首先在describe 裡用Mock...

DAY 8

[Day 8] 今天來個簡單的練習寫useWindowSize

這個應該十分常見,為了想要做RWD或其他原因,我們需要取得目前瀏覽器的長與寬時: import { useState, useEffect } from &qu...

DAY 9

[Day 9] 寫useWindowSize測試

開始寫useWindowSize的測試吧這篇應該比較簡單,應該大概可以自己寫出來了吧我認為困難的點可能是如何模擬窗口下面開始講解是怎麼模擬的 let res...

DAY 10

[Day 10] 來撰寫useTimeout吧

今天突然想分享一些東西 其實分享到現在可能會有人覺得很枯燥,這些東西在工作上不一定用得到,能不能講一些實際常常會用到的test或者hook,我會這樣以基礎的來講...