前言 在上一篇的資料處理篇中，我們學習到了如何將資料放到 Store 中儲存，並以 useSelector 將資料取出，而本篇會提及如何使用 Reducer 異...
前言 useContext 是能夠讓程式變得簡潔的利器，Component 不再需要經過一層一層的 Props 傳遞，便能直接使用在需要它的 Component...
本系列文以製作專案為主軸，紀錄小弟學習React以及GrahQL的過程。主要是記下重點步驟以及我覺得需要記憶的部分，有覺得不明確的地方還請留言多多指教。 簡...
這一節我們來用前幾篇文章學到的一切來做個小範例吧！不知道大家在學網頁時，第一個嘗試的是什麼？當然這邊指的是除了Hello world!之外的XD，小弟我啊！遙想...
事前聲明 在挑戰鐵人賽之前，其實我也完全沒有想過貪吃蛇要怎麼做，所以為了做這次的貪吃蛇遊戲，我找了一些資料。其中對我幫助很大的是墨雨設計吳哲宇老師在 hahow...
在瞭解了 React element 這種虛擬抽象層中的最小建構單位之後，我們來深入了解一下要如何讓 React elements 產生出對應的真實 DOM e...
就如同官方文件所描述的，React 是一個用於「打造 UI」的工具，而在瀏覽器中我們呈現 UI 的載體就是 DOM。DOM 與瀏覽器的畫面渲染引擎綁定，因此操作...
前言 Lifecycle 被稱為生命週期，在 Component 中，我們可以大致把生命週期分成三個： Component Render 完畢。 Compon...
在 Day05 我們已經把該有的事件都做得差不多了，接下來我們希望把圈圈元件和叉叉元件加上去，讓我們點擊下去的時候，1會顯示圈圈，-1會顯示叉叉。 這邊先講一下...
今天最一開始，我們要在我們的主元件中，去加入一個子元件( sub-components )。 Sub-component 首先，我們新增src/comp...
過去有很長一段時間中，開發環境的建置都被視為學習 React 的首要最大難關。由於 React 從非常早期的版本就已經擁抱 transpiler 與 moudl...
Hello！大家好！昨天初步認識了Redux後(真的非常初步XD)，知道他如何管理資料了，那今天要來說說在Redux手上的資料該怎麼傳給React的組件！就請各...
上一章 Day 22 - React 第一個Component AJAX AJAX是以XMLHttpRequest(XHR)物件為主要核心的實作, 用於從客...
Day 19 - React 什麼是React? 要怎麼用? 上一章簡單介紹了React跟如何建立專案 今天來把我們會用到的package都加進來吧 npm i...
皮卡丘就這麼跑進我的文章裡。。。 目前我的專案長這樣~ 我一樣用電子名片這個專案來學習 React props 的運作原理，今天也會將我預先儲存在 json 裡...
隨著生命的不同階段需要做的事情都不相同以上是廢話不過這道理在程式的世界也是一樣Component 也有它的生命週期這篇的目標就是要了解組件的生命週期以及每個階段...
Hi啊！因為昨天雄心壯志下了決心要完成作品，今天也只能繼續做下去了XD，就從昨天的進度step1開始吧！ ㄛ對了，這時間點看到我還滿神奇的對吧XD，因為小弟我明...
2024/2 更新 - 實體書平裝版本上市 在經過快要一年的努力後，本系列文的實體書版本推出了～其中新增並補充了許多鐵人賽版本中沒有的脈絡與細節，並以全彩印刷拉...
昨天 Day18 我們已經準備好 isGameStart 參數來幫助我們做今天的重新開始按鈕。首先，我們需要先來製作一個按鈕，這個按鈕我想要直接蓋在遊戲地圖的正...
如果你是寫 C/C++ 的開發者，應該對記憶體管理並不陌生，如果你是後端開發者，應該會常常注意伺服器有沒有發生 Memory Leak 與 Memory 使用...
把整張名片作為一個 component 每一個 component 外層都會用一個 class 包起來。extends 指的是 React.component...
今天本來要直接就昨天的問題解決就在那個準備要連接這些組件的時候發現一個天大的問題那就是...我還有個登入的東東阿！（（ 腦中無限東東echo ）） 所以一個轉舵...
【前言】 昨天我們實作了第一個React Component了，有沒有覺得自己有沒有變強了一點呢？這篇要來介紹一下React的Props屬性囉！ 【正文】 ...
前面幾篇的做法，我都是直接引用 CDN 來操作。我們還有第二種方法可以 include React，就是透過第二篇介紹過的 Webpack，所以今天就來學學 W...
Hi！各位，想不到吧，已經到了最後十篇了，感覺真不想結束呢！ 才怪！明明天天都在倒數文章數量XD，雖然這一趟很累，但是還是得要對自己來個期末測驗才行！所以接下來...
React Toastify彈出組件 簡介 使用React-Toastify來達成簡易的彈出效果。 Step 1: Installation npm insta...
上一章 Day 20 - React 安裝與導入需要的package Component 是 React 中很重要的一環, 其中包括複雜的生命週期, 與各種不同...
在昨天我們學會了 code splitting 與 dynamic import 的技巧，讓程式在打包時可以形成好幾個 bundle chunks，並在真的需...
【前言】 終於先把基本的redux告一段落了......可是工作上的進度還是大延遲(嘆氣【正文】 採用以往的方式撰寫action、reducer的確可行，但...
前言 前兩篇學習了 Redux 的操作方法，雖然 Redux 替我們處理資料真的很方便，但是實際上是得經過 Component、Action、Reducer 三...
神Q超人
Jasper
Taiming
Zet
轟天旅人
Aiden
TSAI
洪啟瑞
莫力全 Kyle Mo
Hyora
iThome鐵人賽
看影片追技術