把聊天室做成一個套件：Clouda 的前端架構與運作方式
約 7 分鐘
Clouda（雲寶寶）是我做的一個 AI 聊天室小工具，裝進各個專案之後，畫面右下角會多一顆按鈕，點開就能跟 AI 對話。後端由同事負責，我做的是前端，包括怎麼用 React 跟 Shadow DOM 做成一個不會跟宿主打架的元件、用 Vite 打包成套件發佈到私有的 npm registry、用 data 屬性當設定介面，還有怎麼用 fetch 接 SSE 串流把回覆一個字一個字印出來。
使用 TanStack Query 輕鬆處理 HTTP Requests
約 4 分鐘TanStack Query 可以幫助我們發送 HTTP Request 也就是串接 API，讓前端畫面與後端資料能夠溝通與同步。沒錯！這些事情透過 useEffect 以及 Fetch 或 Axios 就能做到了，只是 TanStack Query 大幅地簡化了這方面的 Code，一起來看看 TanStack Query 如何提升開發者體驗吧。
為你的 React Apps 加上動畫效果
沒有動畫效果的 Web Apps 不是說不好，但就是在完整度上少了一點什麼。如果可以適當添加一些動畫效果，除了可以讓網站看起來更加用心，也可以吸引使用者持續瀏覽。本文會介紹前端加入動畫效果的幾種方式，包含 CSS Transitions、CSS Animations，以及 Framer Motion 這套動畫效果 Library。
React Code Reuse - Higher Order Component (HOC)
約 1 分鐘本篇文章會透過一個簡單的 Functional Components 的範例，讓大家瞭解 React Higher Order Component (HOC) 的實作方式。
一起來試試看 NextJS 的 "useSWR" Hook 吧！
最近看 React Developer Roadmap 發現 API Calls 人家推薦 SWR 這套工具，好奇到底是什麼功能居然能撼動 Axios 的地位？試用了一下發現還真有點意思！
React Router V6 - Form & Action
約 2 分鐘上一篇介紹了 React Router V6 的 Loader，本文會介紹另一個重要的新功能 Action 與表單處理方式。
React Router V6 - Fetch data with Loader
約 5 分鐘上一篇介紹了 React Router V6 的基本架構，包含導頁、動態路由與巢狀路由，本文則會介紹 V6 全新的重要功能 Loader。
React Router V6 - Setup Routes
約 3 分鐘React Router 團隊最近又來一次全面升級，新增了許多功能，特別是 Loader 功能實在是讓我大開眼界。除此之外，我發現他們的文件寫得很好，基本上只要跟著走一遍 Tutorial 就可以掌握新版的寫法調整與新功能哩。
[React] Debouncing with useCallback Hook
約 2 分鐘本文介紹 React 當中 useCallback 這個 Hook 的使用概念，並且結合 Lodash 實作 Debouncing Search 的功能幫助理解 useCallback 的作用。
為什麼在 Ant Design 使用 styled-components 傳遞 Boolean Props 會出現警告
約 2 分鐘最近要使用 styled-components 包裝 Ant Design 的元件時，想透過傳遞 Boolean 值的 props 來製作動態樣式，結果是成功了但是卻一直跳出警告訊息，這是為什麼呢？
為什麼 React State 在 Event Listener 中沒有正確更新
約 2 分鐘最近在使用 Ant Design 的 Table 元件時，想要監聽 Scroll 事件去更改呈現的欄位，但是發現 State 成功更新後，Table 所使用的 State 卻沒有跟著更新，這到底是怎麼回事哩。
Deploying React Apps over Firebase Hosting
約 1 分鐘有很多做法能夠部署 React 專案，本文會介紹如何透過 Firebase Hosting 這項服務來部署一個 SPA 專案。
升級 React Router v6 筆記
約 6 分鐘本文為 React Router 升級第 6 版的筆記。
瞭解 React Router V5 基礎知識
約 6 分鐘現代前端開發常見的 SPA 是指頁面 URL 切換時，不必重新 Fetch 新的 HTML 檔案，且會阻止瀏覽器的默認行為，直接去更新畫面上的內容。在 React 技術線當中，可以藉由 React Router 幫助我們完成 SPA 下的頁面切換，根據 Route 的更改呈現出不同的元件。
Redux Toolkit with Action Creator Thunk
本文介紹 Redux Toolkit 當中的 Action Creator Thunk 設計，透過 Thunk 幫助我們更好地處理非同步邏輯。
使用 Redux Toolkit 更有效率地撰寫 Redux
本文介紹 Redux Toolkit 的基本使用方式，因為我是從 Vue 轉 React 的開發者，第一眼看到 Redux Toolkit 真的眼睛為之一亮！裡面使用到的觀念與 Vuex 相仿，非常好理解，撰寫的結構也相當有條理喔。
React Redux with Class-based Components
本文介紹 React Redux 於 Class-based Components 的使用。
React Redux with Functional Components
本文介紹 React Redux 於 Functional Components 的使用。
React Redux 基本配置與概念介紹
本文介紹 React Redux 的概念與基本設定方式，並且探討何時適合使用 Redux 更勝於 React Context API。
React Code Reuse - Custom Hooks
約 2 分鐘本文介紹為什麼我們要建立並使用 Custom Hooks，以及講解如何撰寫創建自己的 Hooks，讓我們在開發 React 專案時更好地複用各種邏輯與程式碼。
在 React Class-based Components 中使用 Error Boundary 處理錯誤
約 1 分鐘本文介紹 React Class-based Components 中 Error Boundary 的使用方式。
React Class-based Components 的生命週期（Lifecycle）
約 1 分鐘本文介紹 React 的 Lifecycle，這是只有 Class-based Components 才有的喔。
Introduction to Class-based Components
約 1 分鐘本文介紹 React Class-based Components 的使用方式。
Sending Http Requests feat. Star Wars API
約 1 分鐘本文使用 Star Wars API 為例示範 React 如何串接第三方 API。
Introducing useMemo
約 1 分鐘本文介紹 useMemo 的使用方式。
Introducing React.memo
約 1 分鐘本文介紹 React.memo 的使用方式，以此減少元件不必要的渲染。
使用 React Context 處理全域狀態
約 2 分鐘為了避免 Props Drilling，React 提供了 Context API 幫助我們解決這樣的問題，本文會介紹 Context API 的基本用法，包含 createContext、Provider、Consumer、useContext 等概念。
更強大的 React 狀態管理工具 useReducer Hook
約 3 分鐘在 JavaScript 的世界中，陣列處理方法之一的 reduce 就是將多個值陸續處理累積後成為新的單一值，而本文要介紹的 useReducer 也有類似的概念，透過這個更強大的狀態管理 Hook，可以將複雜的 State 處理完成後，返回一個單純的值。
Understanding React's useEffect Hook
約 5 分鐘本文介紹何謂 Side Effect，以及我們該如何使用 useEffect 處理這些副作用。
Forms in React
約 2 分鐘本文介紹如何在 React 中使用 Forms 表單相關元素。
關於 React Refs 的概念，以及如何 Forwarding Refs
約 2 分鐘本文會介紹 React 當中的 Refs，及其延伸出的 useRef 與 forwardRef 的使用方式。
Cleaner Code with React Fragments & Portals
約 1 分鐘透過 Fragments 與 Portals 讓我們可以使用 React 撰寫出更乾淨的 HTML Code。
Styling React Components
約 1 分鐘本文介紹 React 中基本的樣式撰寫方式，包含 Inline Style、CSS Modules、styled-components 等方式。
[React] Lifting The State Up
約 1 分鐘Props 的用途是讓父子元件之間傳遞狀態，使子元件也能使用到父元件定義的狀態，而子元件的狀態也能透過 Lifting State 的方式提升給父元件使用。
[React] 正確地使用 State 與 useState Hook
約 2 分鐘本文介紹 React 中 State 的概念，包含 useState Hook、Snapshot、Lazy State Initialization 等觀念，看似簡單的狀態，其實有一些細節觀念是初學時容易忽略的。