今天要跟大家介紹的是 React Component 中的 Function Component 。我們曾經在 Day 02 的時候提及到 React.js 是...
React hooks 從 2019 年初推出以來也經過了幾年的時間，它以非常快的速度就發展成為 React 開發方式的絕對主流選擇。搭配 function c...
在 React hook 篇章時我們認識了一些避免 re-render 的 hook，像是 useMemo、useCallback，還有 HOC React.m...
上一篇中，我們完成了一個簡單的Index頁面。今天，我們再加一些功能：1）在文章中設定是否為草稿，若是，則index不顯示，這可以透過GraphQL的filte...
接著我們將上一章節介紹到的一律重繪概念與流程替換成具體的 React 程式來解釋： 當我們在 component 裡呼叫 setState 方法來觸發資料更新時...
我們已經用Gatsby的Command Line工具以預設的Starter安裝了一個示範網站。今天我們就來研究一下這個預設Starter生成的目錄結構。 You...
這篇主要會講述 Redux 的一些介紹，下篇才會開始進行實作。 Redux 是什麼? Redux 是專門管理 state 的函式庫，它可以將整個專案的 stat...
終於鐵人賽也到了尾聲，在這三十天為了完成技術文章，查詢了不少的資料當作參考，其中也包括了在 youtube 上的教學影片，所以我把推薦的一些國外 youtube...
今天要介紹的是常用的 hook，useEffect。 功用 React 元件本身是純函式，但還是有要處理到 side effect 的時候，而若要處理各種針對渲...
今天這篇文章會示範如何將 create-react-app 轉成 vite，大幅提升開發速度 什麼是 Vite? Next Generation Fronte...
在繼續深談 React 管理並更新畫面的策略與機制之前，我們先來探究一下關於單向資料流的概念，以及在尚未使用前端框架時實現單向資料流的 DOM 渲染策略，來幫助...
為了滿足 transpiler 轉換的正確性，因此 JSX 語法在撰寫上會有一些重要的特性與規則需要注意。這些規則可能大多數人多少都聽過，但是卻不是很了解為什麼...
今天來到這次鐵人賽的最後一個章節：實作一個 React.js 的網站。這個網站會結合前面幾天所介紹過的 React.js 基礎來實作，所以在撰寫的同時也會一起複...
和WordPress一樣，Gatsby.js也有plugin系統，透過NPM安裝。你可以在Gatsby.js 官網找到所有plugin。今天我們要學習怎樣安裝p...
上一篇中我們準備好了Markdown、post template，以及相應的一些GraphQL query，今天就要使用Gatsby提供的createPages...
2022/08/03 補充 現在回來看發現自己以前寫的 Redux 還有很多要改進的地方，所以重構了一個範例，並使用了 custom hook useActio...
除了最核心的 useState 以及 useEffect 以外，在 React 中最常被我們使用到的內建 hooks 應該就屬 useCallback 以及 u...
在前面的章節中我們已經詳細的解析了 useEffect 正確的概念以及用法，也再三強調了 useEffect 的用途是同步資料到 React elements...
在經過前面一些基本觀念的鋪陳之後，接下來我們將會繼續重點解析關於 React 產生並管理 UI 畫面的核心運作流程與原理，而這將會是真正掌握 React 這門技...
此篇章不會從頭開始介紹 React Router，而是挑選一些它的功能去做介紹，因此本篇的範例皆是從 React Router 官網找的範例。 React Ro...
有使用過React的同學都知道，用React做輸入控制的時候， 通常做法是建立一個input的state， 具體如下： import { useState }...
今天要介紹的內容很簡單：如何在Gatsby中新增頁面。新增頁面的方法不只一種，今天先介紹最簡單的方法。 YouTube Video: layout.js vs...
上篇 Day 09 跟大家介紹了 State 為何？所以今天就要來看看如何利用 setState() 這個方法修改或更新 State 物件內的值囉。 setS...
這篇要介紹的是 React 元件的生命週期(Life Cycle)。 要認識生命週期的話我們可以先從這個 Life Cycle 圖表網站 瞭解，以下兩張圖是從圖...
React 中以 state 資料以及 setState 作為 reconciliation 的觸發點，並且以 props 作為 component 層層往下的...
在這篇文章中，將會介紹 React 提供的 Profiler API。 介紹 React Profiler 這個 API 會去收集每個元件在渲染時花費的時間，透...
還記得我們在 Day 02 的時候有跟大家提到 React.js 是使用 Virtual DOM 的概念來進行渲染的嗎？那今天就一起來看看什麼是 Virtual...
老妹每年都會幫媽媽畫春聯，今年人在國外，拍胸脯保證說會畫電子檔給她！ 嘔心瀝血畫了兩天後，媽很滿意，但畫了兩天就只有這樣也太虧了吧？（手畫春聯我可是不用5分鐘一...
在 React 當中，state 是可以存放 JavaScript 中的任何資料型別，除了像是字串、數字等直接可以表示值的型別，當然也支援物件或陣列這種以參考（...
第一次參加鐵人賽很開心真的能順利完賽啦！！！當初開賽前還想說參賽期間會經歷中秋節和雙十國慶的連假，以為會因此就鬆懈但是最後還是堅持下來了。現在回首覺得這三十天確...
SuoChan 阿關
Zet
harry xie
Zack
iThome鐵人賽
看影片追技術