前言 先複習一下上一個章節裡我們做了什麼，首先是將 Content 的按鈕行為拆成四個步驟： Component 按下按鈕，會執行 Dispatch，這裡會傳...
前言： 昨天我們介紹了如何使用Mongodb atlas的一些最基本的功能，今天我們要更進一步介紹怎麼使用realm、怎麼寫出簡單的api，以及將架在Realm...
上一篇建立完角色陣容後，今天要來做已選取的角色陣容。在 component 資料夾中新增 HeroList.js import React, { Compone...
在 React 當中，state 是可以存放 JavaScript 中的任何資料型別，除了像是字串、數字等直接可以表示值的型別，當然也支援物件或陣列這種以參考（...
【前言】 前幾天我們做的練習基本上都是放在同個Component檔案下，但事實上我們會切分Component，一來可以達到Component的可覆用性、可維護...
前情提要 昨天 Day17 我們已經讓食物可以隨機產生，食物還會炫砲的發光，蛇也可以順利吃到食物，而且吃到之後身體會變長，速度會變快。 但是讓蛇這樣一直吃下去，...
Create meme items 昨天把 API 裡的 meme names 都 render 出來之後，我們今天要把圖片呈現出來。先在 component...
嗨囉！大家好！最後三天最難熬！昨天已經能夠展開我們的編輯區了，今天來把編輯資料的部分做完吧！ 那一開始先來做Redux的部分吧！要處理的事情有以下幾點，讓我們...
memory leak字面上翻譯就叫做記憶體洩漏，記憶體洩漏會造成什麼問題？大家應該有那種經驗，開太多chrome分頁，電腦開始卡卡的，嚴重點直接當掉，memo...
昨天把新增的表單處理完了！今天要來處理Redux的部分，雖然年代久遠，不知道大家還記不記得，忘記的話就當作複習，來做一次吧！ 確認資料 在要做新作業的時候，最...
目前這個系列已挑選ChatGPT、前端&React相關章節出版成書！感謝大家的閱讀與支持!《用 ChatGPT 詠唱來點亮 React ＆ 前端技能樹...
在 React 的世界中組件之間的關聯性（或者稱作溝通）透過繼承產生的狀態是一個方式不過還有另外一種方式可以達成這件事情也就是 Composition Comp...
前言 終於到了這次鐵人賽最後一個遊戲，經歷一番東挑西選及天人交戰之後，最後選定了這個遊戲，記憶方塊(Memory Blocks)。 這個遊戲也是很經典的童年回憶...
本系列文以製作專案為主軸，紀錄小弟學習React以及GrahQL的過程。主要是記下重點步驟以及我覺得需要記憶的部分，有覺得不明確的地方還請留言多多指教。 有...
在上一篇文章中提到，到底 reconciler 的對象是誰呢？看起來超像對 component 的，但似乎不大一樣，在本篇會完整的解釋給你聽 vDOM 是什...
Portal為插槽功能，可以將子元件渲染到父元件以外的地方，聽起來很炫，概念感覺有點像任意門？render一個component時，其實改變的是另一個地方的DO...
這個章節讓我們更深入的探討一下 dependencies 常見的錯誤使用方式。我們在前幾篇 useEffect 的深入解析中一再強調過一個概念：useEffec...
【前言】 最近壓力大、天氣變換大，我的皮膚又開始作怪了（暈，剩下最後七篇了！【正文】 昨天介紹四種Router標籤，今天來介紹**Route**。 Rout...
後面這二十天，將專攻 Redux，一樣也是透過做中學的方式來理解 Redux。首先，官方文件是必備材料：Redux 官方中文文件 另外，這一篇 Code Car...
元件介紹 Infinite scroll 能在面對多筆資料時，讓捲軸滑動到底部時再載入下一頁面的資料。 由於一次性向後端取得大批的資料，對於後端的資料計算、資料...
【前言】 今天一樣不多說廢話，直接進主題。【正文】 今天來介紹Link吧！ Link就是提供我們導引到其他頁面的連結，會被render成<a>標...
前言 來到測試的最後一個章節了，本篇要說明的是如何對 React-Router 做測試，確認 Component 在不同的 Router 的 Render 狀況...
經過了前兩篇章的洗禮，相信你現在對於 function component 的 render 概念已經有一定程度的掌握。接著就讓我們進入這個階段的重頭戲：use...
React 透過組件來實現動態載入網頁最常見的載入通常是網頁切換可是有些時候雖然切換網頁但兩個頁面上可能具有相同的東西如果能夠做到選擇那麼就能減少重新渲染的組件...
元件介紹 Dropdown 是一個下拉選單元件，當頁面上的選項過多時，可以用這個元件來收納選項，透過滑鼠事件來觸發選單彈出，點擊選項會執行相對應的命令。 參考設...
【前言】 呼～～終於進行到一半了（灑花！越來越不知道前言要寫什麼來湊字數了XD【正文】 在這次的範例，我們要利用redux與react再次做一個to do...
元件介紹 Tooltip 是一個文字彈出提醒元件，當 active 狀態時，會顯示對該子元件描述的文字。 參考設計 & 屬性分析 位置 相對於被包覆的子...
在了解 reconciliation 前，我們先說說 react 是如何去操作 DOM 的 在 javaScript 中，我們可以利用 createElem...
今天要來介紹一個第三方 api－React Hook Form ，這是一個處理表單的 api，可以幫助我們在 React 中更方便的處理表單。其中，會主要介紹...
目前這個系列已挑選ChatGPT、前端&React相關章節出版成書！感謝大家的閱讀與支持!《用 ChatGPT 詠唱來點亮 React ＆ 前端技能樹...
神Q超人
Cooksuhr
TSAI
Zet
Hyora
Taiming
Lieutenant
一宵三筵
洪啟瑞
Jasper
maxam
時雨
iThome鐵人賽
看影片追技術