前言 本篇主要會說明,在 Hooks 讓 Function Component 具備 State 後,該如何使用及設置。 前置準備 文中的專案會以 Day0...
這篇文章不同於過往的技術分享或是關於工程師職涯的心得,要來介紹的是一個自己嘗試過後覺得十分有效的「工作術」,不管讀者的職業是什麼,我認為都有運用這個工作術的空間...
想一想,決定食物如何出現 俗話說,吃飯皇帝大,如果不吃東西,貪吃蛇就長不大,也跑不快,所以今天我們要來製作貪吃蛇的另一個重頭戲,就是食物。 首先,我們要來決定食...
一開始會這麼定題目,其實是起源于我對前端的挑食,因為我不喜歡調畫面左邊一點右邊一點這種事情我真的不喜歡做所以取翻譯中 過敏 的意思來形容我的 React 學習過...
目前這個系列已挑選ChatGPT、前端&React相關章節出版成書!感謝大家的閱讀與支持!《用 ChatGPT 詠唱來點亮 React & 前端技能樹...
接續上一章節的概念,我們已經了解到了每一次 render 都有自己的 props 與 state 以及 event handlers,那麼 useEffect...
勝負判斷分析 昨天完成了 row 方向和 column 方向的勝負判斷,今天我們要來完成右斜和左斜方向的勝負判斷,我這邊先把這兩個方向命名為 forwardSl...
前言 ESLint 一直是我們打程式的重要指標,它不但能夠替我們檢查語法風格中的問題,也避免某些問題可能會造成的程式錯誤,所以如果 ESLint 無法在 Typ...
本系列文以製作專案為主軸,紀錄小弟學習React以及GrahQL的過程。主要是記下重點步驟以及我覺得需要記憶的部分,有覺得不明確的地方還請留言多多指教。 在...
元件介紹 Carousel 是一個像旋轉木馬一樣會輪流轉的輪播元件。在一個內容空間有限的可視範圍中進行內容的輪播展示。通常適用於一組圖片或是卡片的輪播。 Car...
做前端時一定會碰到非同步操作,本篇將使用 axios 搭配 Redux Toolkit 來作範例串接 API,可以先將 axios 環境安裝起來 安裝 Axi...
hashtags: #react, #components, #accessibility, #calendar, #compound components...
hashtags: #react, #components, #accessibility, #calendar, #control 本篇接續前篇 如何製作月曆...
挑戰 React 第十三篇 上篇我們了解 state 可以在 component 裡改變資訊且實作。 此篇將會用實作範例,證明修改 component...
[React + TS] lexical文字編輯器套件使用心得與教學 前言 最近寒假寫專案寫著發閒,發現React一些套件的教學很少,例如本篇提到的lexica...
元件介紹 Skeleton 是一個骨架載入元件(Skeleton Screen Loading),跟 Spin 不同的是,Skeleton 幫助我們在頁面載入完...
前言 先複習一下上一個章節裡我們做了什麼,首先是將 Content 的按鈕行為拆成四個步驟: Component 按下按鈕,會執行 Dispatch,這裡會傳...
Hooks 的誕生是為了解決什麼問題 在深入 hooks 的設計脈絡之前,我們得先來談談 hooks 的誕生究竟是為了解決什麼問題。首先,hooks 是綁定配合...
承接上一張節的脈絡,在我們解析大魔王 useEffect 之前,我們需要先更深入的重新梳理一下 component 生命週期的重要概念:render。 每一次...
簡介 JSX JSX 全名為 JavaScript XML,是一種 JavaScript 的擴充語法,支援在 JavaScript 中撰寫 HTML-like/...
前情提要 昨天 Day17 我們已經讓食物可以隨機產生,食物還會炫砲的發光,蛇也可以順利吃到食物,而且吃到之後身體會變長,速度會變快。 但是讓蛇這樣一直吃下去,...
繪製頁面草稿 按照慣例,我們先來畫一下我們整個遊戲畫面呈現的草稿,下面是我對整個遊戲面化的初步想像。 我把所有的元素都集中放在中間區塊,因為人的視線比起左右移動...
Pagination 今天要實作的只是一個最基本的 Pagination,而我個人覺得在處理換頁時維持固定長度的邏輯挺有趣的,所以特別在最後一篇實作拿出來講...
memory leak字面上翻譯就叫做記憶體洩漏,記憶體洩漏會造成什麼問題?大家應該有那種經驗,開太多chrome分頁,電腦開始卡卡的,嚴重點直接當掉,memo...
關於前面的小畫家 復刻小畫家先做到昨天作為最後一篇,接下來會帶各位,利用前其所學的功能,製作各種canvas 互動小東西!敬請期待。 這邊也附上前面的所製作的...
點擊進入React源碼調試倉庫。 上壹篇React狀態計算解密 之後,我們來分析壹下Diff的過程。 fiber上的updateQueue經過React的壹番計...
這系列的程式碼在 https://github.com/DanSnow/ironman-2020/tree/master/static-site-genera...
前言 來到測試的最後一個章節了,本篇要說明的是如何對 React-Router 做測試,確認 Component 在不同的 Router 的 Render 狀況...
在了解 reconciliation 前,我們先說說 react 是如何去操作 DOM 的 在 javaScript 中,我們可以利用 createElem...
Hi!大家好!昨天寫完那篇的時候,心情輕鬆了不少XD,其實我真的很怕做不出來哎!不過還好還是搞定了,雖然完全放棄了排版,哈哈,那接下來剩下的就把資料排序和輸出而...