Gatsby提供了一個叫做 GraphiQL 的工具,幫助我們測試網站上的GraphQL查詢。GraphiQL提供一個可視化界面,讓我們可以直觀地看到查詢的結果...
上一篇中,我們用GraphiQL測試了GraphQL的查詢。今天,我們就要用這些查詢來打造一個Index頁面。 YouTube 影片 加入GraphQL 打開...
這篇要介紹的是 Redux DevTools,是一個可以紀錄及操作存在 Redux store 內的 state 以及 dispatch action 的工具,...
今天要講到的是react中的事件監聽,在react中,只要在JSX的元素標籤內,根據特定方法給出的屬性名,給予其所需執行的方法,就會在事件觸發時做執行了,舉個例...
今天進入到全新的篇章 Redux 了!Redux 是 React.js 中很常拿來作為狀態管理使用的一個套件,在 Vue.js 的框架中也有一個 Vuex 是專...
上篇我們已經完成了網站中 Navigation 的樣式和路由設定,今天我們要來設定網站中的其他元件,接著今天就要來實作其他的元件還有元件之間的資料處理。我們就馬...
昨天介紹了在 Function Component 中該如何操作 state 的方法(附上傳送門),今天這篇要來為大家介紹的就是第二個較常用到的 React H...
今天要來進入到生命週期的第二個環節: Updating 更新,繼上篇的 Mounting 元件掛載階段中提到過有一個方法是在 Updating 階段也會出現的,...
昨天 Day 14 跟大家介紹了 React Hooks 的基本概念之後,今天就要馬上帶大家來看第一個 Hook 函式: useState() 的用法囉~ u...
接續上一篇的 Layout 相關元件實作後,今天要來開發 React.js 網站的功能是表單設計的部分,因為我們希望能在網站中使用該表單新增新的 Meetup...
object function筆記 const obj = { value:'小明', fn:function(){ return...
Component的概念就很像一塊塊積木,可以拼湊組成城堡或是飛船之類的,Component裡頭會回傳React element,透過這些Component就可...
上一篇 Day 22 我們已經了解了何謂 Redux 以及該套件的三大原則,今天就要來為大家介紹在 Redux 這個套件中的核心概念及功能名詞介紹。 主要的概...
哈囉大家好!我是阿關 是說第一次參加鐵人賽就想要挑戰一個自己完全不熟悉的題目我也是覺得自己蠻有勇氣的啦~ 如標題所言,接下來的這 30 天我會在這邊紀錄我開始學...
在 React 中有內建的方法可以去定義傳入元件的 props 資料型別,這樣可以更清楚的瞭解傳入的各 props 的型別是什麼。 此外如果傳入的 props...
在 Class Component 的章節中我們提到過,它有別於 Function Component 的地方就在於 State 和生命週期( Lifecycl...
今天總算進入到了 React.js 中大名鼎鼎的 React Hooks 這個章節了! 這樣講可能很浮誇,但是當初在選擇框架學習時我就已經在搜尋引擎當中看到非常...
tags: ItIron2023 react 前言 我們昨天看了一個看似useEffect在搞事的問題,雖然說不能與它完全無關,但實際上他確實挺無辜的,真要怪的...
這篇繼續介紹生命週期的另外兩個階段: Updating & Unmounting,以及了解元件在各個生命週期中更新 DOM 的兩個階段 Render P...
[情境劇場] 解師傅:嘿!老闆!我找到了一間不錯的店面,CRA 師傅會幫我們完成它! 要開一間 React 熱炒店,想當然要先有一間環境店面,即使小當家有再高的...
這篇要繼續介紹剩下的兩個元件。 SwitchTransition 元件 主要是用來渲染兩個狀態間做切換的過渡動畫,假如想要讓新元素加入和舊元素移除同時發生時出現...
前言 雖然說是前言,但最說的只有: 第一次參加鐵人賽,好緊張啊!!!!(誤 原本沒有想過要來參加鐵人賽,最近才剛結束用bootstrap切版的課程以及專題開發,...
在網站開發時有時候會使用到表單的元件,而表單內大多是採用 input 的欄位來搜集使用者的資料的。因此對於該欄位內的值要如何取用就是我們今天要為大家介紹的內容:...
這邊的功能是為了想呈現網頁中作品集這個項目但是在作品集中又分了很多品項像是平面、網頁、插畫等等..於是在最外層先放上一格一格的分類圖點進分類圖之後會跳出一個蓋板...
tags: ItIron2023 react 前言 我們昨天看了一個很水的custom hook題目,希望透過那個水到爆炸的題目你有了解到可以利用custom...
tags: ItIron2023 react 前言 我們昨天處理了一個實務上常見的面試問題,要你根據某份提供的api文件以及一些指示完成題目的要求,今天我們再來...
當使用react-router-dom時由於在v6版本後做了一些改變本來在import {HashRouter,Switch,Route} from 'reac...
tags: ItIron2023 react 前言 昨天我們用了一個簡單的問題來測驗你對於react render邏輯的了解程度,相信透過昨天的經驗你應該對於u...
為什麼不使用 <a> 標籤進行路由導航? 在 React 中,不建議直接使用一般的 <a> 標籤進行導航,原因如下: 重新加載整個頁...
在現代 Web 應用開發中,表單的管理與驗證往往是開發過程中的一大挑戰。上一篇文章中,我們探討了如何追蹤使用者行為並優化應用體驗,而今天,我們的焦點是表單管理。...