iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

0 Like 0 留言 2213 瀏覽

鐵人賽 Modern Web DAY 17

React Hook 不求人，建立自己的 Hook Libary 系列第 17 篇

技術 [DAY 17] 自己的Hook自己做！AuthProvider 不是 Hook 吧？(上)

承接上篇，本篇要來實作簡單的登入功能。期望登入是透過 JWT + localStorage 的方式來進行登入與保留登入的 token，並進一步搭配React...

Charlie ‧ 2022-09-30 ‧團隊桌遊玩樂團

0 Like 0 留言 1762 瀏覽

鐵人賽 Modern Web DAY 25

React Hook 不求人，建立自己的 Hook Libary 系列第 25 篇

技術 [DAY 25] 自己的Hook自己做！html2canvas 來擷圖網頁的內容吧！

你一定在想截圖有甚麼好弄一篇文章的 DEMO 在這裡情境前陣子有遇到一個特別的需求，希望原本的訂單紀錄的呈現，也可以讓使用者擷取下來保存或是處理後續工作，...

Charlie ‧ 2022-10-08 ‧團隊桌遊玩樂團

0 Like 0 留言 1371 瀏覽

鐵人賽 Modern Web DAY 26

React Hook 不求人，建立自己的 Hook Libary 系列第 26 篇

技術 [DAY 26] 自己的Hook自己做！用 IntersectionObserver 弄出動態的網站吧！

DEMO 在這裡情境面對長長的列表與龐大的資料時，為了避免使用者感受到卡卡，你可能會希望等使用者滾動到該卡片時再進行資料的抓取；或是你想依照元素呈現的比例...

Charlie ‧ 2022-10-09 ‧團隊桌遊玩樂團

0 Like 0 留言 1130 瀏覽

技術 (自己回答自己)Re: 關於新手入門React+TypeScript遇到的困擾⋯

原篇發問網址在這：https://ithelp.ithome.com.tw/questions/10211232 前言這篇是我自己發問的，最後搞很久，才終於寫出...

Skywalker ‧ 2022-12-09

1 Like 0 留言 1096 瀏覽

鐵人賽 Modern Web DAY 9

React Hook 不求人，建立自己的 Hook Libary 系列第 9 篇

技術 [DAY 09] 自己的Hook自己做！useToggle 再進化，useToggle+！

延伸情境前一篇的 useToggle 顯然可以再更好，除了一般狀態之間切換，也可以再加入特定狀態的指定切換，來讓整體閱讀更直覺；也可以再嘗試額外加入 sid...

Charlie ‧ 2022-09-22 ‧團隊桌遊玩樂團

0 Like 0 留言 1027 瀏覽

鐵人賽 Modern Web DAY 24

React Hook 不求人，建立自己的 Hook Libary 系列第 24 篇

技術 [DAY 24] 自己的Hook自己做！useImage 來預覽圖片吧！

今天的主題很單純，就是單純上傳圖片，不論是只有一個頁面或是多個功能都要用到，製造一個 hook 是很不虧的選擇，因為也是懶得再寫一次 (¬_¬) DEMO 底家...

Charlie ‧ 2022-10-07 ‧團隊桌遊玩樂團

0 Like 0 留言 889 瀏覽

鐵人賽 Modern Web DAY 28

React Hook 不求人，建立自己的 Hook Libary 系列第 28 篇

技術 [DAY 28] 自己的Hook自己測試！

雖然寫了那麼多，不論是有用的，或沒用的，要怎麼確保有沒有寫好呢？當然就是就在講測試，雖然開發過程中可以測試功能正不正常，但隨著日後長大的需求有時難以回頭一一...

Charlie ‧ 2022-10-11 ‧團隊桌遊玩樂團

0 Like 0 留言 829 瀏覽

鐵人賽 Modern Web DAY 15

React Hook 不求人，建立自己的 Hook Libary 系列第 15 篇

技術 [DAY 15] 自己的Hook自己做！useClickOutside 來把 Dialog 關起乃！

再續前一篇研究了一輪，這篇就來實作： DEMO 在這裡~~ 需求及描述透過 Hook 可以達成：點擊非指定元素時(即元素之外)，能夠執行特定動作以 D...

Charlie ‧ 2022-09-28 ‧團隊桌遊玩樂團

0 Like 0 留言 768 瀏覽

鐵人賽 Modern Web DAY 8

React Hook 不求人，建立自己的 Hook Libary 系列第 8 篇

技術 [DAY 08] 自己的Hook自己做！useToggle 讓你想開就開，想關就關

終於進入正題啦！情境不論是現實世界還是網路上，小朋友看到東西都喜歡碰一下摸一下(手賤)，只要能互動就會興奮到一個不行，特別是能開開關關的東西，一不小心就會...

Charlie ‧ 2022-09-21 ‧團隊桌遊玩樂團

0 Like 0 留言 756 瀏覽

鐵人賽 Modern Web DAY 16

React Hook 不求人，建立自己的 Hook Libary 系列第 16 篇

技術 [DAY 16] 自己的Hook自己做！等等，請先登入！

情境登入其實就是登入，恩。如果覺得換個專案就要再弄一次登入很煩的話，這個也可以算是你的情境 XD 實際弄下來會是透過 Context 組成的 Provid...

Charlie ‧ 2022-09-29 ‧團隊桌遊玩樂團

2 Like 1 留言 738 瀏覽

鐵人賽 Modern Web DAY 30

React Hook 不求人，建立自己的 Hook Libary 系列第 30 篇

技術 [DAY 30]自己的鐵人終於寫完了，剩下打包那件事

應該是要先講打包，再來講怎麼發佈套件的，不過沒關係，最後一天來看看打包吧！開始！拿 rollup.js 來幫我們協助打包，先來安裝 npm instal...

Charlie ‧ 2022-10-13 ‧團隊桌遊玩樂團

0 Like 0 留言 731 瀏覽

鐵人賽 Modern Web DAY 27

React Hook 不求人，建立自己的 Hook Libary 系列第 27 篇

技術 [DAY 27] 自己的Hook自己做！一些零碎的 hook 們

雖然能把一些複雜的邏輯通通整理起來很舒服，但有時候你只是想省一滴滴的麻煩，或是想圖一點乾淨或是清楚的程式碼，因此本篇要來看看這些可能只是弄弄命名、重新包裝，或...

Charlie ‧ 2022-10-10 ‧團隊桌遊玩樂團

0 Like 0 留言 718 瀏覽

鐵人賽 Modern Web DAY 18

React Hook 不求人，建立自己的 Hook Libary 系列第 18 篇

技術 # [DAY 18] 自己的Hook自己做！AuthProvider 不是 Hook 吧？(下)

承接上篇，已經把登入的畫面導向製作完成了，現在要進入核心的部分，也就是驗證啦！ DEMO 在這裡~~~ 開始！假資料先來準備一組對應的假資料，實際上不會那麼...

Charlie ‧ 2022-10-01 ‧團隊桌遊玩樂團

0 Like 0 留言 716 瀏覽

鐵人賽 Modern Web DAY 11

React Hook 不求人，建立自己的 Hook Libary 系列第 11 篇

技術 [DAY 11] 自己的Hook自己做！useDebounce 讓使用者慢～一～點～

前言俗話說的好：Never trust user input，開發時設想好的流程，清楚的畫面，適當的輔助文字，使用者仍然還是會有「意想不到」的操作。今天來...

Charlie ‧ 2022-09-24 ‧團隊桌遊玩樂團

2 Like 0 留言 712 瀏覽

鐵人賽 Modern Web DAY 3

React Hook 不求人，建立自己的 Hook Libary 系列第 3 篇

技術 [DAY 03] useEffect 與無止盡 loop 的距離

30 天的旅途前段會來回頭認識一些基本的 React Hook，繼 useState 再來就是 useEffect。 useEffect 如其名，專門拿來處理...

Charlie ‧ 2022-09-16 ‧團隊桌遊玩樂團

0 Like 0 留言 700 瀏覽

鐵人賽 Modern Web DAY 22

React Hook 不求人，建立自己的 Hook Libary 系列第 22 篇

技術 [DAY 22] 自己的 Hook 自己做！ useDate 來操控日期吧！

繼承前篇，本篇就要來實作 useDate！日期，不是約會 DEMO 在這裡情境許多後台或是查詢資料的介面上，都會常用到搜尋日期的功能，雖然並不是什麼特別...

Charlie ‧ 2022-10-05 ‧團隊桌遊玩樂團

0 Like 0 留言 687 瀏覽

鐵人賽 Modern Web DAY 12

React Hook 不求人，建立自己的 Hook Libary 系列第 12 篇

技術 [DAY 12] 自己的Hook自己做！能取消動作的 useEventControl！

前言繼承上一篇 Never trust user input 的精神，有一種使用者也是操作迅速，彷彿在玩 OSU (如上圖，音樂遊戲)，結果不小心按到「刪除...

Charlie ‧ 2022-09-25 ‧團隊桌遊玩樂團

0 Like 0 留言 684 瀏覽

鐵人賽 Modern Web DAY 19

React Hook 不求人，建立自己的 Hook Libary 系列第 19 篇

技術 [DAY 19] 自己的Hook自己做！useTabs 想開幾個頁籤都可以？！ (上)

情境前陣子碰到一個需求，希望使用者能夠一次閱覽多筆的訂單(比對資料、快速查看、或複製等操作)，但又不想離開頁面，彈出視窗也不適合，於是逛來逛去就發現 Tab...

Charlie ‧ 2022-10-02 ‧團隊桌遊玩樂團

0 Like 0 留言 646 瀏覽

鐵人賽 Modern Web DAY 10

React Hook 不求人，建立自己的 Hook Libary 系列第 10 篇

技術 [DAY 10] 自己的Hook自己做！useCallbackEvent 真的有必要嗎？

回顧前一篇的困饒：「useCallback 中有從 props 傳來的 inner function 要如何正常運作？」由於我們的 function 一直被...

Charlie ‧ 2022-09-23 ‧團隊桌遊玩樂團

1 Like 1 留言 641 瀏覽

鐵人賽 Modern Web DAY 2

React Hook 不求人，建立自己的 Hook Libary 系列第 2 篇

技術 [DAY 02] Hook I am? I am useState!

標題下的冷笑話等級已經進入初老階段了嗎... 30 天的旅途前段會來回頭認識一些基本的 React Hook，而最常見到的就是 useState 本人。 Usa...

Charlie ‧ 2022-09-15 ‧團隊桌遊玩樂團

0 Like 0 留言 640 瀏覽

鐵人賽 Modern Web DAY 13

React Hook 不求人，建立自己的 Hook Libary 系列第 13 篇

技術 [DAY 13] 自己的Hook自己做！useThroltte

debounce 都提到了，怎麼能不提 throltte 呢？情境在玩 Pokemon Go 打對戰的時候，有時候想著按快一點把對方打趴，殊不知再怎麼快，...

Charlie ‧ 2022-09-26 ‧團隊桌遊玩樂團

0 Like 0 留言 549 瀏覽

鐵人賽 Modern Web DAY 23

React Hook 不求人，建立自己的 Hook Libary 系列第 23 篇

技術 [DAY 23] 自己的 Hook 自己做！ useDates 兩個時間恰恰好

承繼上篇，useDate 變兩個就成了 useDates :) DEMO 在這裡情境除了用一個 useDate 之外，有時候需要兩個關聯的時間(區間)來提...

Charlie ‧ 2022-10-06 ‧團隊桌遊玩樂團

0 Like 0 留言 543 瀏覽

鐵人賽 Modern Web DAY 6

React Hook 不求人，建立自己的 Hook Libary 系列第 6 篇

技術 [DAY 06] useRef 與一般的變數有甚麼不同?

有時候我們只需要一個單純的變數，希望隨著每次 render 都還能保持同樣的 ref，一般的變數又會不停的更新數值，這時候 useRef 就會是你的好幫手啦！...

Charlie ‧ 2022-09-19 ‧團隊桌遊玩樂團

1 Like 0 留言 538 瀏覽

鐵人賽 Modern Web DAY 29

React Hook 不求人，建立自己的 Hook Libary 系列第 29 篇

技術 [DAY 29] 自己的Hook自己發佈！

除了測試之外，那當然就是發佈啦！呼喚我最一開始的需求，就是希望能夠建立自己的 library 然後來使用，本篇計畫用 npm 來發佈。同一隊的丹尼有寫了...

Charlie ‧ 2022-10-12 ‧團隊桌遊玩樂團

1 Like 0 留言 482 瀏覽

鐵人賽 Modern Web DAY 4

React Hook 不求人，建立自己的 Hook Libary 系列第 4 篇

技術 [DAY 04] 記憶吐司的 useCallback

前一篇 useEffect 大概了解之後，我們這篇來簡單了解一下 dependecies (就是辣個 []) 以及 useCallback 吧！前一篇：ht...

Charlie ‧ 2022-09-17 ‧團隊桌遊玩樂團

0 Like 0 留言 452 瀏覽

鐵人賽 Modern Web DAY 20

React Hook 不求人，建立自己的 Hook Libary 系列第 20 篇

技術 [DAY 20] 自己的Hook自己做！useTabs 想開幾個頁籤都可以？！ (下)

承上篇，核心的 Tabs 其實已經建立好了，當內容不能呈現出來就不算真正的完成！因此本篇來看看要如何顯示對應的資料。開始！簡短回顧一下我們的 state...

Charlie ‧ 2022-10-03 ‧團隊桌遊玩樂團

1 Like 0 留言 445 瀏覽

鐵人賽 SideProject30 DAY 24

Laravel 擴展宇宙：從 1 到 100 十倍速打造產品獨角獸系列第 24 篇

技術 #23 API Request 淺談與 React Hook

在接下來的的幾天內，需要跟 API server 去整合跟修正使用真實資料後的調整，在這邊會使用到了 React Hook 來整合我們的 Request AP...

Bill ‧ 2023-10-09 ‧團隊所以隊名要叫什麼

1 Like 0 留言 342 瀏覽

鐵人賽 Modern Web DAY 5

React Hook 不求人，建立自己的 Hook Libary 系列第 5 篇

技術 [DAY 05] useMemo 讓你網頁不卡卡

網頁中難免會有排序/過濾/資料整理等等的操作，有些列表式的查詢更可以一次列出一千多筆，只想排一下順序網頁就開始跟你鬧「彆扭」，這次來看看 useMemo 可以...

Charlie ‧ 2022-09-18 ‧團隊桌遊玩樂團