今天分享一個簡單又常用到的方法來處理表單，先舉個新手進入React處理表單時常用到的例子： // 使用useState來記錄表單欄位訊息 const [nati...
做出一個固定在畫面上方的導覽列沒什麼難度，故本日目標是重現 MUI 的 Elevate App bar 與 Hide App bar 這兩種導覽列。 成品...
props 的傳入方法 在 class component 中的話要先呼叫建構子（constructor）並執行 super()將 props 作為引數(arg...
Part 2 of Passing Data Deeply with Context @ ReactJS Doc beta 我知道多數人都聽過或用過 Rea...
昨日【D8】有點小問題，其實<div id="result">的值React 已經會幫忙轉譯，可以顯示test，但是從input...
今天來用 react hook 實作一個 bmi 計算機的小工具 分成三個元件App.js 寫 input onChange 等邏輯的父元件BmiRes.js...
這次來聊聊進階一點的話題 memo 的應用，在談論這個話題之前我們先來了解 memo 是什麼？ 了解 React.memo React memo 是 React...
前兩天我介紹了React中很重要的兩個hook：useState和useEffect，這兩個hook幫助我們讓react程式能因應使用者的動作做出變化。不過，若...
暫時揮別 react router 的部分，這次來實作一個小型的互動程式，用 react hook 及 axios 向 api 取得特定城市的氣溫資料 安裝 a...
繼續把骰子遊戲寫完～回顧一下，昨天達成了1. 產生隨機骰子點數的函式2. 將骰子點數作為 property 傳送到子元件 Dice 中，讓子元件顯示出對應的點數...
前導 還沒看過上一篇文章的朋友請先回顧喔！接續上一篇的問題，大家有找到合適的解法了嗎？如果沒有讓我們一起來思考除了useState以外還有什麼可以讓我們有效管理...
想讓 hooks 能夠對應 window 以外的捲動對象，今天來做點加工處理。 成品 useElementIsScrollDown useElement...
講古 在早期還沒有Context Provider的時候你每一層都需要靠 props 來傳遞資料，才能達到資料共享。 然後... 於是 Context / P...
建立一個比較複雜的 .jsx，讓後面使用這個範本進行作業。這邊嘗試用 .jsx 進行副檔名，非原先的.js。 建立 .jsx 建立一個 ChangeStr.js...
這篇文章的主要內容 簡單說明 react 裡面的事件綁定跟透過 useState hook 來管理狀態。 JavaScript 的事件綁定 JavaScrip...
Memo解方 今天我們接續前面的問題，大家是否有找到解答了呢？ 如果沒有的話，我會在下面提供兩種做法： 第一種，在 memo 裡面用 callback 告訴...
stale-while-revalidate stale-while-revalidate 是 HTTP Headers 的 Cache-Control 設定。...
在上一篇文章中，我們介紹了如何使用 React Router 實現頁面導航，並展示了模組化頁面如何提升程式碼的結構性與可維護性。今天，我們將進一步學習如何從零開...
昨天寫到鍵入數字部分，今天接續把 +-/* 跟 = 的運算處理完吧～ 加減乘除 執行 dispatch({ type: "該按鈕的數值" }...
昨天的bmi計算器範例用到了一個未曾見過的新面孔-useReducer 究竟 useReducer 是何方神聖呢現在來進行說明 useReducer 跟其他 r...
今天來用react hook寫一個投骰子遊戲～ 一樣以 codesandbox 作為環境先上傳六張骰子點數的圖片增加 Dash.js 用來顯示主要的遊戲狀態，D...
useCallback & useMemo 基本上這兩個 hook 主要的作用都是幫助效能優化(減少非必要的渲染)頁面上有多個 component 時，...
在日益複雜的前端開發環境中，如何有效地組織和管理程式碼，已成為前端工程師不可迴避的課題。今天，我們將深入探討模組化開發的重要性，以及如何運用 React 的 c...
接續把拿回來的資料做整理拿回來的資料像這樣一大串.. 插播一下，使用 chrome 可以安裝一下 Json Formatter 這個 extension功用是可...
來介紹一下最後一個好朋友 useRef基本上 state 的更新會促成每一次的 re-render而 reference 則是更新後並不會造成 re-rende...
React Hook(useState, useEffect...等) 在React中 函式內一般變數若更新 畫面上不會跟著更動 所以要用useState等方法...
useCallback的用途和使用時機 useCallback hook 最主要的作用在於幫助其他 React 效能優化的手段維持正常，例如：React.mem...
歡迎來到我們React學習之旅的第七天！今天，我們來認識React的一個強大特性：自定義Hooks。這個工具能夠幫助我們提取組件邏輯到可重用的函數中，大大提高了...
在上一篇文章中，我們介紹了如何使用模組化設計來簡化應用中的主題切換和語言切換功能。通過將按鈕元件（ThemeButton 和 LangButton ）分離，我們...
Component 的三大生命週期 生命週期就是指一個 React Component 在被創建到被銷毀的過程中，會經歷的一系列階段。 一. Mount Mou...
查理狐狐
dc88
pjchender
eyelash*睫毛
LucianoLee
時雨
evan_hsu
Jaren
carolcheng
Bucky
Ashley
Moscle.dev
iThome鐵人賽
看影片追技術