呈現符合搜尋的結果 首先,我要先把寫死的 Toothpaste 產品資訊替換掉,替換成可以動態塞入符合搜尋結果的程式碼。 在 Results 這個 compon...
嗨 大家好 我是一路爬坡的阿肥 阿肥竟然撐過第三個禮拜了!真的太感動了嗚嗚希望可以撐到最後! 前言 今天阿肥又要講跟設計模式沒什麼直接相關的主題啦(被揍)。雖...
About 輪播透過類似幻燈片的方式接連展示一部份的物件。 通常輪播一次只會呈現一張幻燈片, 用戶可以控制輪播的當前幻燈片像是往前一張或是往後一張。 在部分實...
昨天 React.memo 比較像是針對 component 做 memorization,今天要介紹的 useMemo 這個 hooks 則是可以對函式實作...
昨天我們學習了如何在測試裡 render 元件,並使用 testing library 家族的 jest-dom 及 dom-testing-library 來...
我們先來看以下兩個例子,想想當 <Parent/> re-render 時,Child 會不會也跟著 re-render 呢? function C...
【前言】諸君日安,大魔王要出現啦!接下來要說的是Nonce 的使用、前後端連動,以及帳戶驗證。今天的內容大部份都參考來自 Amaury Martiny 的 O...
在解析過 React 的畫面更新的核心觀念以及 setState 進階的細節之後,接下來我們會往下一個大主題邁進 — 有關於 component 的 rende...
前言 當我們初入React後,最容易遇到的問題就是組件間的通訊,算是第一大魔王拉,目前也只能跌跌撞撞慢慢找出攻略法。 目前看到寫比較完整的文章參考 state、...
目前這個系列已挑選ChatGPT、前端&React相關章節出版成書!感謝大家的閱讀與支持!《用 ChatGPT 詠唱來點亮 React & 前端技能樹...
在前兩篇的章節中,我們已經了解到在 React 開發中 immutable update 的必要性以及基本的操作方法了。然而有趣的是,在我擔任前端面試官多年也面...
本篇接續前篇 如何製作輪播 carousel 1【 carousel | 我不會寫 React Component 】 可以先看完上一篇再接續此篇。 Scre...
簡介 React React 是一個用來製作 UI(User Interface, 使用者介面)的 JavaScript 函式庫,旨在用更簡易快速的方式建構前端...
在上一篇中介紹了 JSX Event 的使用方式,在本章節我們將近一步了解在 class component 中使用 event handler 的常見問題、對...
大家好!我是一宵三筵!在去年的鐵人賽中,雖然報名的是自我挑戰組,不過後續就有出版社聯絡是否可以將內容編集成冊真的感謝大家都願意給予這個系列文章關注、訂閱於是跟深...
今天要來介紹的是React的測試,原本是打算使用React Testing Library和Jest的組合,但是我之前只有在create react app建構...
tags: 2021鐵人賽 React 股票代號輸入錯誤當機問題 Day28的文章有提到,當使用者想要輸入股票代號看K線圖時,如果輸入的股票代號是錯誤的,也就是...
mapping dispatch to props import { bindActionCreators } from 'redux'; import {...
今天接續昨天繼續分享第一次貢獻開源專案的心得。 第二步:閱讀 CONTRIBUTING.md & 開發 通常一個完整的開源專案,都會提供一個文檔讓想貢獻...
這次製作新的小工具-身分證製造機! 身分證製造機這工具個人很常用,因為要模擬客戶進行交易、帳務處理、顧客管理等等都會要用到,而且還要可以批次產生,因此才想到要做...
回顧 JSX 從上一個篇章:初探 JSX 中,我們了解到 JSX 是一種 JavaScript 的擴充語法,支援在 JavaScript 中撰寫 HTML-li...
(2024/04/06更新) 因應React在18後更新了許多不同的語法,更新後的教學之後將陸續放在 新的blog 中,歡迎讀者到該處閱讀,我依然會回覆這邊的...
在上一篇文章中提到,到底 reconciler 的對象是誰呢?看起來超像對 component 的,但似乎不大一樣,在本篇會完整的解釋給你聽 vDOM 是什...
連假結束了Q 今天來講怎麼實作 dark mode 還有怎麼使用 Google Fonts 讓網站看起來更好看!我們會用 Chakra UI 去實作 dark...
嗨大家!今天在串 Notion SDK 時因為想要實作 pagination (分頁) 的關係,才發現在 client-side 呼叫會遇到 CORS 問題。這...
【前言】 呼~~終於進行到一半了(灑花!越來越不知道前言要寫什麼來湊字數了XD【正文】 在這次的範例,我們要利用redux與react再次做一個to do...
【前言】嗨嗨感謝大家願意看到這裡,接下來要說的是前端的呼叫以及資料傳遞。今天的內容大部份都參考來自 Amaury Martiny 的 One-click Lo...
在說明JSX前,先來提一個規則 EsLint !! Eslint 是用來檢測Code的標準及是否違規,而這些規定其實可以在設定檔可以自行設定 為了讓我們...
回顧 React Lifecycle 在上個章節中,我們了解了 React component instance 的生命週期(Lifecycle)代表一個 co...
說好補上就補上! 先加上rails books_controller.rb的home... def home @books = {books: Bo...