鐵人賽 Day24自己做一個價值幾十萬的動態網站 第二十四課：resveration 將optionsContext條件行為計算後，同步更新到各個需要的comp...
鐵人賽大綱 在這次鐵人賽的挑戰中，主要的目標是希望自己和讀者們可以更加認識 React.js 或者是複習一下以前學過的知識，所以安排了幾個單元來進行介紹，預期介...
接著我們將上一章節介紹到的一律重繪概念與流程替換成具體的 React 程式來解釋： 當我們在 component 裡呼叫 setState 方法來觸發資料更新時...
在第 15 天的文章中我們做了一個範例，現在我們要用 Redux Toolkit 去改寫它。 第一步 我們將原本範例的 store 和 reducer 做改寫。...
今天要跟大家介紹的是 React Component 中的 Function Component 。我們曾經在 Day 02 的時候提及到 React.js 是...
這個章節讓我們更深入的探討一下 dependencies 常見的錯誤使用方式。我們在前幾篇 useEffect 的深入解析中一再強調過一個概念：useEffec...
在繼續深談 React 管理並更新畫面的策略與機制之前，我們先來探究一下關於單向資料流的概念，以及在尚未使用前端框架時實現單向資料流的 DOM 渲染策略，來幫助...
今天這篇文章會示範如何將 create-react-app 轉成 vite，大幅提升開發速度 什麼是 Vite? Next Generation Fronte...
2022/08/03 補充 現在回來看發現自己以前寫的 Redux 還有很多要改進的地方，所以重構了一個範例，並使用了 custom hook useActio...
在經過前面一些基本觀念的鋪陳之後，接下來我們將會繼續重點解析關於 React 產生並管理 UI 畫面的核心運作流程與原理，而這將會是真正掌握 React 這門技...
為了滿足 transpiler 轉換的正確性，因此 JSX 語法在撰寫上會有一些重要的特性與規則需要注意。這些規則可能大多數人多少都聽過，但是卻不是很了解為什麼...
在 React 當中，state 是可以存放 JavaScript 中的任何資料型別，除了像是字串、數字等直接可以表示值的型別，當然也支援物件或陣列這種以參考（...
Gatsby可以以Markdown作為資料來源自動產生頁面，這讓我們可以輕易的建立Blog之類的網站：寫blog只需寫markdown。 YouTube Vid...
經過前面幾天的介紹，我們認識了許多常使用的 hooks，不過除了那些 hooks 之外，我們也可以將一些常用的共同程式邏輯抽取出來寫一個函式，這就是 Custo...
在上一篇的章節中，我們詳細的解析了有關於連續呼叫 setState 時的自動 batching 機制。承著前文的脈絡，我們來探討看看一個延伸的情境：如果我們想基...
在這個篇章中會介紹幾個讓 React 效能更好或是避免效能變差的技巧。 方法 1. Code-Splitting & Dynamic Import Re...
經過了前兩篇章的洗禮，相信你現在對於 function component 的 render 概念已經有一定程度的掌握。接著就讓我們進入這個階段的重頭戲：use...
React 中以 state 資料以及 setState 作為 reconciliation 的觸發點，並且以 props 作為 component 層層往下的...
有使用過React的同學都知道，用React做輸入控制的時候， 通常做法是建立一個input的state， 具體如下： import { useState }...
今天要介紹的是常用的 hook，useEffect。 功用 React 元件本身是純函式，但還是有要處理到 side effect 的時候，而若要處理各種針對渲...
終於鐵人賽也到了尾聲，在這三十天為了完成技術文章，查詢了不少的資料當作參考，其中也包括了在 youtube 上的教學影片，所以我把推薦的一些國外 youtube...
在這篇文章中，將會介紹 React 提供的 Profiler API。 介紹 React Profiler 這個 API 會去收集每個元件在渲染時花費的時間，透...
在網頁開發技術蓬勃發展的現今，SPA （ Single Page Application ）單頁式應用已經逐漸地取代過往從遠端伺服器載入多筆不同頁面的 MPA...
在上一篇關於 useEffect 的深度解析中，我們已經了解到了 dependencies 是一種效能的最佳化手段，而不是用來控制生命週期或是商業邏輯。對於 u...
上一篇中，我們完成了一個簡單的Index頁面。今天，我們再加一些功能：1）在文章中設定是否為草稿，若是，則index不顯示，這可以透過GraphQL的filte...
在前面章節中我們解析了將 effect 設計成即使多次執行也能保持正確的重要性。如果你還對這個觀念不是很熟悉的話，非常建議你先閱讀系列文前面的篇幅中關於 use...
大家好，我是 S.C，八月初偶然在 Youtube 上看到一段影片，提到學習分成三層次 - 自己會、能教會他人、能設計教材，看完蠻有感觸的，因為自踏入程式開發的...
我們已經用Gatsby的Command Line工具以預設的Starter安裝了一個示範網站。今天我們就來研究一下這個預設Starter生成的目錄結構。 You...
第一次參加鐵人賽很開心真的能順利完賽啦！！！當初開賽前還想說參賽期間會經歷中秋節和雙十國慶的連假，以為會因此就鬆懈但是最後還是堅持下來了。現在回首覺得這三十天確...
上篇 Day 09 跟大家介紹了 State 為何？所以今天就要來看看如何利用 setState() 這個方法修改或更新 State 物件內的值囉。 setS...
K.o
harry xie
Zet
SuoChan 阿關
Zack
S.C
iThome鐵人賽
看影片追技術