昨天已經做出來已完成、未完成的效果了，但是只有style上的轉換，沒有記錄起來。今天要把已完成、未完成的狀態記錄在state中，並做出已完成、未完成的分頁。 儲...
在上一篇的章節中，我們詳細的解析了有關於連續呼叫 setState 時的自動 batching 機制。承著前文的脈絡，我們來探討看看一個延伸的情境：如果我們想基...
今天要繼續實作todolist，要讓todolist有切換已完成、未完成狀態的功能。 程式修正 昨天的編輯功能出了點問題，若是在沒修改的情況下提交，由於newI...
從前面的章節中我們已經充分地了解到，當呼叫 setState 方法時就會觸發對應 state 定義的 component 的 re-render。然而當我們呼叫...
前幾天已經寫好todolist的邏輯、樣式，現在我們的程式已經可以新增、瀏覽、刪除代辦事項，並且有簡單的外觀。不過新增的事項還沒辦法編輯，因此今天來做一下編輯的...
React 中以 state 資料以及 setState 作為 reconciliation 的觸發點，並且以 props 作為 component 層層往下的...
昨天介紹了要如何在React中使用css，今天來介紹一下如何使用方便的React-bootstrap套件來建立一個漂亮的網站。p.s. 這一篇需要對bootst...
接著我們將上一章節介紹到的一律重繪概念與流程替換成具體的 React 程式來解釋： 當我們在 component 裡呼叫 setState 方法來觸發資料更新時...
前幾天我們用JSX、Hook以及JavaScript的技巧做了一個todolist的雛型，可以增加、刪除項目。今天稍微轉換個方向，講一下要怎麼在JSX中使用使用...
在經過前面一些基本觀念的鋪陳之後，接下來我們將會繼續重點解析關於 React 產生並管理 UI 畫面的核心運作流程與原理，而這將會是真正掌握 React 這門技...
前兩天我們逐漸完善我們的清單小程式，越來越接近todo list的雛型了。然而，目前的程式仍僅僅只有新增的功能，沒辦法刪除，因此，今天要來為他加上刪除功能。 刪...
在繼續深談 React 管理並更新畫面的策略與機制之前，我們先來探究一下關於單向資料流的概念，以及在尚未使用前端框架時實現單向資料流的 DOM 渲染策略，來幫助...
本篇文章將會提及以下部分 如何部署react到github page？ 為什麼react部署在github page上後重新整理會出現404 github p...
昨天我們用state lifting的方式做了一個清單小程式，可以新增項目，然後在下方呈現出來。但是，如果將這個程式放在瀏覽器上跑，會出現一個小問題，也就是缺少...
先前提到撰寫一個react的應用程式就會需要以下步驟 安裝react和reactDOM 安裝webpack和webpack-cli 安裝bebal、scss等...
為了滿足 transpiler 轉換的正確性，因此 JSX 語法在撰寫上會有一些重要的特性與規則需要注意。這些規則可能大多數人多少都聽過，但是卻不是很了解為什麼...
前兩天我介紹了React中很重要的兩個hook：useState和useEffect，這兩個hook幫助我們讓react程式能因應使用者的動作做出變化。不過，若...
今天這篇文章會示範如何將 create-react-app 轉成 vite，大幅提升開發速度 什麼是 Vite? Next Generation Fronte...
在前面的章節中，我們已經詳細的解析了 React element 相關的核心概念以及建立的方法。不過當你去參考絕大多數的 React 專案的程式碼時，你會發現幾...
它為了解決什麼問題而生？ 正如我在 Day 03 有提到的，它使用了 Virtual DOM 來解決直接操作 DOM 造成的性能問題。並且採用有別於 bindi...
昨天認識了第一個Hook－useState，今天要繼續認識useEffect這個語法。有時候，在開發React程式時會希望在網頁render後能夠更新一些值，或...
在瞭解了 React element 這種虛擬抽象層中的最小建構單位之後，我們來深入了解一下要如何讓 React elements 產生出對應的真實 DOM e...
昨天我們學習了props和event handler來幫component增加更多變化，但是，只用props和event handler沒辦法讓componen...
前言 在 Day03 了解怎麼建立自己的最簡單的 component 後，我們開始深入了解如何使用 solidjs 這框架帶給我們的基礎方法， createSi...
React 採用了上一篇文章中所介紹的的 Virtual DOM 概念來實作抽象層，以產生並管理瀏覽器畫面中的真實 DOM。而在 React 中的每一個 Vir...
昨天成功寫出了第一個Component，但這個Component還沒有任何功能，只能呈現固定的畫面。如果要讓component能夠根據變數內容做出變化的話，就需...
就如同官方文件所描述的，React 是一個用於「打造 UI」的工具，而在瀏覽器中我們呈現 UI 的載體就是 DOM。DOM 與瀏覽器的畫面渲染引擎綁定，因此操作...
小前言 在 Day02 我們了解了專案結構，從 Day03 開始我們針對 src 內的資料夾做處理和觀看。 如果我們是用 pnpx degit solidjs...
昨天已經建立好開發React的環境了，接下來就可以開始玩轉React啦！在React中有個非常重要的概念：元件( Component )，今天會來介紹介紹元件是...
過去有很長一段時間中，開發環境的建置都被視為學習 React 的首要最大難關。由於 React 從非常早期的版本就已經擁抱 transpiler 與 moudl...
時雨
Zet
DannyChen
Wei Ji
MichaelHo
iThome鐵人賽
看影片追技術