(2024/04/06更新) 因應React在18後更新了許多不同的語法,更新後的教學之後將陸續放在 新的blog 中,歡迎讀者到該處閱讀,我依然會回覆這邊的...
昨天對 class-based component 有了初步的認識,然而除了 state ,在 hooks 出來以前 class component 還有一項...
在瞭解了 React element 這種虛擬抽象層中的最小建構單位之後,我們來深入了解一下要如何讓 React elements 產生出對應的真實 DOM e...
勝負判斷分析 窮舉法 在 3x3 的圈圈叉叉遊戲中,獲勝的組合只有 8 種,以上圖為例,每個格子裡面的數字代表 block id,我們窮舉出所有獲勝連線: /...
元件介紹 Input 是一個輸入元件。通常在我們希望用戶能夠輸入一些資訊的時候會需要用到它。由於原生 html 的 input 透過 type 這個屬性的改變,...
Redux Thunk的目的就是為了實踐middleware,讓action能做更多的事,想必大家都曾經看過這個錯誤,當action為非同步的時候,就會報錯,R...
在 Day24 介紹 Web 前端渲染架構時,有提到 Stale While Revalidate 這個快取的應用策略,今天將更詳細介紹這個策略,並看看怎麼運...
前言 嗨,我是Hogan目前在經營自己的自媒體 hogan.tech主要分享一些有關於程式碼、軟體和科技業經驗分享有興趣的讀者可以進一步關注我,進而獲得更多資訊...
如果你聽過 PWA,那麼對今天的主題ㄧ定不陌生,因為今天要講的 Service Worker 就是 PWA 的一個重要元件。不過 PWA 這個主題本身就已經足...
就如同官方文件所描述的,React 是一個用於「打造 UI」的工具,而在瀏覽器中我們呈現 UI 的載體就是 DOM。DOM 與瀏覽器的畫面渲染引擎綁定,因此操作...
今天的主題是路由器(router),以及關於React篇的一些總結資訊。今天並沒有把路由器整合到原先的TodoApp之中,所以沒有範例。 註: 本文章同步放...
為什麼要使用框架? 前端最重要的工作,就是讓網頁的資料與狀態視覺化,有資料狀態改變時,就要更動網頁內容的顯示。但當網頁內容複雜化,網頁元件、元件操作功能和資料狀...
目前這個系列已挑選ChatGPT、前端&React相關章節出版成書!感謝大家的閱讀與支持!《用 ChatGPT 詠唱來點亮 React & 前端技能樹...
當我聽到一個新名詞,在 dive in 前,第一步我一定會問自己:要怎麼用一句話來解釋這個名詞?所以該怎麼用一句話說明 Next.js 是什麼呢? 我會說 Ne...
本系列文以製作專案為主軸,紀錄小弟學習React以及GrahQL的過程。主要是記下重點步驟以及我覺得需要記憶的部分,有覺得不明確的地方還請留言多多指教。 R...
【前言】 第28天了.......【正文】 雖著專案越來越大,我們要撰寫的js檔也越來越多,但最後我們都會在App.js(或是Root.js)去import...
第四天將接著昨日的內容繼續! 第一次接觸React的朋友們可能心裡會os: "X! 這到底是甚麼語法,又像JS但又有HTML包在裡面。"別擔...
現在網路上有許多有趣的梗圖,今天我們不求人!就來串接 Imgflip API 取得梗圖,再透過讓使用者輸入要放在圖片上的文字,做出最客製化的梗圖~ 環境建置...
設定檔都封裝在 react-scripts 套件中 打開使用 CRA 建立的 React 專案可以發現,完全找不到 webpack.config.js 的存在。...
本系列文已改編出版為『營養師不開菜單後的 Next.js 全端轉職攻略:從專案規劃、畫面設計、資安到 SEO,挑戰一人 Side Project (iThom...
前言 本來打算直接從 Hooks 開始說起 React,但後來發現還是得先理解基本的操作方法,後續的文章會看得比較輕鬆,但我不會對語法著墨的太深,畢竟接下來的...
在昨天我們學會了 code splitting 與 dynamic import 的技巧,讓程式在打包時可以形成好幾個 bundle chunks,並在真的需...
資料庫建立資料表,我使用的是MSSQL 使用 Visual Studio 時,請先至 Nuget 下載套件,分別是 Microsoft.Entity...
今天開始會進入 React 中比較進階的主題 - state management在前幾天中我們介紹了 state,也介紹了 props,我們了解一個 comp...
除了最核心的 useState 以及 useEffect 以外,在 React 中最常被我們使用到的內建 hooks 應該就屬 useCallback 以及 u...
過去有很長一段時間中,開發環境的建置都被視為學習 React 的首要最大難關。由於 React 從非常早期的版本就已經擁抱 transpiler 與 moudl...
「在未來,瀏覽器會變得越來越強,以後我們可以在瀏覽器做越來越多事。」 身為常與瀏覽器共舞的 Web 工程師,尤其是 Frontend Engineer,如...
從前面的章節中我們已經充分地了解到,當呼叫 setState 方法時就會觸發對應 state 定義的 component 的 re-render。然而當我們呼叫...
在現今的 Web 應用中,要建構一個穩定的大型系統,能夠處理 High Concurrency 的流量是一個不可或缺的條件,尤其是在服務的熱門時段,例如優惠活...
React Toastify彈出組件 簡介 使用React-Toastify來達成簡易的彈出效果。 Step 1: Installation npm insta...