Hooks 的誕生是為了解決什麼問題 在深入 hooks 的設計脈絡之前,我們得先來談談 hooks 的誕生究竟是為了解決什麼問題。首先,hooks 是綁定配合...
前言 嗨,我是Hogan目前在經營自己的自媒體 hogan.tech主要分享一些有關於程式碼、軟體和科技業經驗分享有興趣的讀者可以進一步關注我,進而獲得更多資訊...
這幾天我們已經學習了許多 React 的技術,是時候部屬 React 的作品到 github 上了!如果不是大型的網站,只是要展示自己的作品或寫一個部落格的話,...
Active Link Styling 改用 NavLink,用以判斷 to={"xx/xx"} 是否匹配當前路由 NavLink 和 Li...
最後一篇技術分享!這系列的文章我們都在介紹陸地上的東西,最後一篇看關於海洋的部分吧~ 我們最常拿大海的深度來做界線分類對吧,像是淺水區深海區之類的,今天來做一張...
本文提及以下內容 什麼是GraphQL GatsbyJs中的GraphQL資料層組成 為什麼Gatsby使用GraphQL 使用GraphiQL工具 使用gr...
這次來簡單加入一下之前 Day20的檢查工具,來檢查我們製作出來的身分證是不是合規。 .js 引入功能 把之前 Day20 做好的檔案 IDChecker.js...
Mapbox 除了可以支援我們一般常在用的 2D 地圖,還有我們前幾天介紹的 3D 立體地球跟地形外貌以外,還可以用 3D 形式呈現建築物高度喔~ 有點像積木狀...
閱讀文章:You Might Not Need an Effect @ React Docs beta
今天我們來看到 checkout 的最後一個部分結帳頁 首先最上方是購物車裡面的商品他會顯示商品的縮圖、名稱、商品類型和價格如果是購買實體商品會有數量如果想移除...
這三十天我們介紹了許多的 hooks,在開發上常常會需要使用這些 hook 做組合技,也會常常使用到重覆的功能,這時候就可以將這些 hook 抽出來,做成 cu...
[情境劇場] 小當家:哇!怎麼來了這麼多外國人 解師傅:嘿嘿~因為我們把網站偷偷發布上線了,沒想到成效這麼好啊! React 熱炒店已名聲遠播,但這不會是終點,...
應該是要先講打包,再來講怎麼發佈套件的,不過沒關係,最後一天來看看打包吧! 開始! 拿 rollup.js 來幫我們協助打包,先來安裝 npm instal...
React hooks 從 2019 年初推出以來也經過了幾年的時間,它以非常快的速度就發展成為 React 開發方式的絕對主流選擇。搭配 function c...
前言 嗨,我是Hogan目前在經營自己的自媒體 hogan.tech主要分享一些有關於程式碼、軟體和科技業經驗分享有興趣的讀者可以進一步關注我,進而獲得更多資訊...
試試看你學到了什麼 前面我們小試了一下身手, 這邊中途來插一個小活動。 有鑒於工程師社群很喜歡討論面試題, 那我們也來試個幾道題目, 來試試你能回答出以下幾道...
說明 在建置網站時,通常不會只有一個頁面包含所有的功能,我們通常會在網站上設置導覽列,讓使用者點擊連結後看到不同的功能頁面,需要藉由路由機制來得到不同頁面。 後...
本文提及以下內容 Gatsby建立頁面檔 添加頁面Title Link元件預加載preloading原理 Link Component使用方式 Gatsby...
製作完產生身分證的 JavaScript,接著就把它們放入 React 的程式中。 .jsx 引入功能 在使用 Day25 的樣式,結合 Day26 的程式,就...
除了最核心的 useState 以及 useEffect 以外,在 React 中最常被我們使用到的內建 hooks 應該就屬 useCallback 以及 u...
除了測試之外,那當然就是發佈啦! 呼喚我最一開始的需求,就是希望能夠建立自己的 library 然後來使用,本篇計畫用 npm 來發佈。 同一隊的丹尼有寫了...
看到 useReducer 你可能會疑惑,這跟前幾天講的 Redux 裡的 Reducer 有什麼毛線關係嗎? 的確!useReducer 的觀念跟用法都跟...
做前端時一定會碰到非同步操作,本篇將使用 axios 搭配 Redux Toolkit 來作範例串接 API,可以先將 axios 環境安裝起來 安裝 Axi...
Preface 由於驗證者在驗證時需要執行 burn() 與 _mint() 兩個會改動區塊鏈資料的函式,撇除 gas fee 以外,在驗證入場的時候需要考慮到...
前言 嗨,我是Hogan目前在經營自己的自媒體 hogan.tech主要分享一些有關於程式碼、軟體和科技業經驗分享有興趣的讀者可以進一步關注我,進而獲得更多資訊...
昨天我們介紹了 useMemo,這個 hook 可以幫助我們記憶依賴參數,當參數變化時才會重新執行函式,並且取得函式回傳的值。今天要來介紹的是 useCallb...
因為這邊開發的是 Component,所以這次會用 Cypress Component Testing。 Setup 設置專案在 apps/ 底下。 E2E...
這篇是補足大家的求知慾,還記得我開頭說的 React Query 嗎? 我秉持著勤儉持家的客家精神,想說不要浪費我們建立好的 todo api server,順...
讓 CSS 只跟著元件 我們知道若元件拆分得越細,可以在其他元件內的重複組合使用的頻率就越高,所以會希望 CSS 只跟隨著元件,當這個元件被拿去其他元件使用時,...
本文提及以下重點 GatsbyJS介紹 靜態網站 SPA網頁(Single Page Appliations) SSR網頁(Server Side Rende...