承接上篇,本篇要來實作簡單的登入功能。 期望登入是透過 JWT + localStorage 的方式來進行登入與保留登入的 token,並進一步搭配React...
你一定在想截圖有甚麼好弄一篇文章的 DEMO 在這裡 情境 前陣子有遇到一個特別的需求,希望原本的訂單紀錄的呈現,也可以讓使用者擷取下來保存或是處理後續工作,...
DEMO 在這裡 情境 面對長長的列表與龐大的資料時,為了避免使用者感受到卡卡,你可能會希望等使用者滾動到該卡片時再進行資料的抓取;或是你想依照元素呈現的比例...
原篇發問網址在這:https://ithelp.ithome.com.tw/questions/10211232 前言這篇是我自己發問的,最後搞很久,才終於寫出...
延伸情境 前一篇的 useToggle 顯然可以再更好,除了一般狀態之間切換,也可以再加入特定狀態的指定切換,來讓整體閱讀更直覺;也可以再嘗試額外加入 sid...
今天的主題很單純,就是單純上傳圖片,不論是只有一個頁面或是多個功能都要用到,製造一個 hook 是很不虧的選擇,因為也是懶得再寫一次 (¬_¬) DEMO 底家...
雖然寫了那麼多,不論是有用的,或沒用的,要怎麼確保有沒有寫好呢? 當然就是就在講測試,雖然開發過程中可以測試功能正不正常,但隨著日後長大的需求有時難以回頭一一...
再續前一篇研究了一輪,這篇就來實作: DEMO 在這裡~~ 需求及描述 透過 Hook 可以達成: 點擊非指定元素時(即元素之外),能夠執行特定動作 以 D...
終於進入正題啦! 情境 不論是現實世界還是網路上,小朋友看到東西都喜歡碰一下摸一下(手賤),只要能互動就會興奮到一個不行,特別是能開開關關的東西,一不小心就會...
應該是要先講打包,再來講怎麼發佈套件的,不過沒關係,最後一天來看看打包吧! 開始! 拿 rollup.js 來幫我們協助打包,先來安裝 npm instal...
情境 登入其實就是登入,恩。 如果覺得換個專案就要再弄一次登入很煩的話,這個也可以算是你的情境 XD 實際弄下來會是透過 Context 組成的 Provid...
雖然能把一些複雜的邏輯通通整理起來很舒服,但有時候你只是想省一滴滴的麻煩,或是想圖一點乾淨或是清楚的程式碼,因此本篇要來看看這些可能只是弄弄命名、重新包裝,或...
承接上篇,已經把登入的畫面導向製作完成了,現在要進入核心的部分,也就是驗證啦! DEMO 在這裡~~~ 開始! 假資料 先來準備一組對應的假資料,實際上不會那麼...
30 天的旅途前段會來回頭認識一些基本的 React Hook,繼 useState 再來就是 useEffect。 useEffect 如其名,專門拿來處理...
前言 俗話說的好:Never trust user input,開發時設想好的流程,清楚的畫面,適當的輔助文字,使用者仍然還是會有「意想不到」的操作。 今天來...
繼承前篇,本篇就要來實作 useDate! 日期,不是約會 DEMO 在這裡 情境 許多後台或是查詢資料的介面上,都會常用到搜尋日期的功能,雖然並不是什麼特別...
情境 前陣子碰到一個需求,希望使用者能夠一次閱覽多筆的訂單(比對資料、快速查看、或複製等操作),但又不想離開頁面,彈出視窗也不適合,於是逛來逛去就發現 Tab...
前言 繼承上一篇 Never trust user input 的精神,有一種使用者也是操作迅速,彷彿在玩 OSU (如上圖,音樂遊戲),結果不小心按到「刪除...
回顧前一篇的困饒:「useCallback 中有從 props 傳來的 inner function 要如何正常運作?」 由於我們的 function 一直被...
標題下的冷笑話等級已經進入初老階段了嗎... 30 天的旅途前段會來回頭認識一些基本的 React Hook,而最常見到的就是 useState 本人。 Usa...
debounce 都提到了,怎麼能不提 throltte 呢? 情境 在玩 Pokemon Go 打對戰的時候,有時候想著按快一點把對方打趴,殊不知再怎麼快,...
承繼上篇,useDate 變兩個就成了 useDates :) DEMO 在這裡 情境 除了用一個 useDate 之外,有時候需要兩個關聯的時間(區間)來提...
有時候我們只需要一個單純的變數,希望隨著每次 render 都還能保持同樣的 ref,一般的變數又會不停的更新數值,這時候 useRef 就會是你的好幫手啦!...
除了測試之外,那當然就是發佈啦! 呼喚我最一開始的需求,就是希望能夠建立自己的 library 然後來使用,本篇計畫用 npm 來發佈。 同一隊的丹尼有寫了...
前一篇 useEffect 大概了解之後,我們這篇來簡單了解一下 dependecies (就是辣個 []) 以及 useCallback 吧! 前一篇:ht...
在接下來的的幾天內,需要跟 API server 去整合跟修正使用真實資料後的調整,在這邊會使用到了 React Hook 來整合我們的 Request AP...
承上篇,核心的 Tabs 其實已經建立好了,當內容不能呈現出來就不算真正的完成!因此本篇來看看要如何顯示對應的資料。 開始! 簡短回顧一下我們的 state...
網頁中難免會有排序/過濾/資料整理等等的操作,有些列表式的查詢更可以一次列出一千多筆,只想排一下順序網頁就開始跟你鬧「彆扭」,這次來看看 useMemo 可以...