July 29, 2024
TanStack Query 可以幫助我們發送 HTTP Request 也就是串接 API，讓前端畫面與後端資料能夠溝通與同步。沒錯！這些事情透過 useEffect 以及 Fetch 或 Axios 就能做到了，只是 TanStack Query 大幅地簡化了這方面的 Code，一起來看看 TanStack Query 如何提升開發者體驗吧。
July 22, 2024
沒有動畫效果的 Web Apps 不是說不好，但就是在完整度上少了一點什麼。如果可以適當添加一些動畫效果，除了可以讓網站看起來更加用心，也可以吸引使用者持續瀏覽。本文會介紹前端加入動畫效果的幾種方式，包含 CSS Transitions、CSS Animations，以及 Framer Motion 這套動畫效果 Library。
July 13, 2024
本篇文章會透過一個簡單的 Functional Components 的範例，讓大家瞭解 React Higher Order Component (HOC) 的實作方式。
April 14, 2023
上一篇介紹了 React Router V6 的 Loader，本文會介紹另一個重要的新功能 Action 與表單處理方式。
March 31, 2023
上一篇介紹了 React Router V6 的基本架構，包含導頁、動態路由與巢狀路由，本文則會介紹 V6 全新的重要功能 Loader。
March 14, 2023
React Router 團隊最近又來一次全面升級，新增了許多功能，特別是 Loader 功能實在是讓我大開眼界。除此之外，我發現他們的文件寫得很好，基本上只要跟著走一遍 Tutorial 就可以掌握新版的寫法調整與新功能哩。
October 11, 2022
本文介紹 React 當中 useCallback 這個 Hook 的使用概念，並且結合 Lodash 實作 Debouncing Search 的功能幫助理解 useCallback 的作用。
September 8, 2022
最近要使用 styled-components 包裝 Ant Design 的元件時，想透過傳遞 Boolean 值的 props 來製作動態樣式，結果是成功了但是卻一直跳出警告訊息，這是為什麼呢？
August 31, 2022
最近在使用 Ant Design 的 Table 元件時，想要監聽 Scroll 事件去更改呈現的欄位，但是發現 State 成功更新後，Table 所使用的 State 卻沒有跟著更新，這到底是怎麼回事哩。
June 6, 2022
有很多做法能夠部署 React 專案，本文會介紹如何透過 Firebase Hosting 這項服務來部署一個 SPA 專案。
April 8, 2022
本文為 React Router 升級第 6 版的筆記。
April 4, 2022
現代前端開發常見的 SPA 是指頁面 URL 切換時，不必重新 Fetch 新的 HTML 檔案，且會阻止瀏覽器的默認行為，直接去更新畫面上的內容。在 React 技術線當中，可以藉由 React Router 幫助我們完成 SPA 下的頁面切換，根據 Route 的更改呈現出不同的元件。
March 18, 2022
本文介紹 Redux Toolkit 當中的 Action Creator Thunk 設計，透過 Thunk 幫助我們更好地處理非同步邏輯。
March 17, 2022
本文介紹 Redux Toolkit 的基本使用方式，因為我是從 Vue 轉 React 的開發者，第一眼看到 Redux Toolkit 真的眼睛為之一亮！裡面使用到的觀念與 Vuex 相仿，非常好理解，撰寫的結構也相當有條理喔。
March 4, 2022
本文介紹 React Redux 於 Class-based Components 的使用。
March 3, 2022
本文介紹 React Redux 於 Functional Components 的使用。
February 28, 2022
本文介紹 React Redux 的概念與基本設定方式，並且探討何時適合使用 Redux 更勝於 React Context API。
February 4, 2022
本文介紹為什麼我們要建立並使用 Custom Hooks，以及講解如何撰寫創建自己的 Hooks，讓我們在開發 React 專案時更好地複用各種邏輯與程式碼。
January 30, 2022
本文介紹 React Class-based Components 中 Error Boundary 的使用方式。
January 16, 2022
本文介紹 React 的 Lifecycle，這是只有 Class-based Components 才有的喔。
January 9, 2022
本文介紹 React Class-based Components 的使用方式。
December 27, 2021
本文使用 Star Wars API 為例示範 React 如何串接第三方 API。
December 17, 2021
本文介紹 useMemo 的使用方式。
December 3, 2021
本文介紹 React.memo 的使用方式，以此減少元件不必要的渲染。
October 31, 2021
為了避免 Props Drilling，React 提供了 Context API 幫助我們解決這樣的問題，本文會介紹 Context API 的基本用法，包含 createContext、Provider、Consumer、useContext 等概念。
October 24, 2021
在 JavaScript 的世界中，陣列處理方法之一的 reduce 就是將多個值陸續處理累積後成為新的單一值，而本文要介紹的 useReducer 也有類似的概念，透過這個更強大的狀態管理 Hook，可以將複雜的 State 處理完成後，返回一個單純的值。
October 17, 2021
本文介紹何謂 Side Effect，以及我們該如何使用 useEffect 處理這些副作用。
October 10, 2021
本文介紹如何在 React 中使用 Forms 表單相關元素。
October 1, 2021
本文會介紹 React 當中的 Refs，及其延伸出的 useRef 與 forwardRef 的使用方式。
September 24, 2021
透過 Fragments 與 Portals 讓我們可以使用 React 撰寫出更乾淨的 HTML Code。
September 17, 2021
本文介紹 React 中基本的樣式撰寫方式，包含 Inline Style、CSS Modules、styled-components 等方式。
September 8, 2021
Props 的用途是讓父子元件之間傳遞狀態，使子元件也能使用到父元件定義的狀態，而子元件的狀態也能透過 Lifting State 的方式提升給父元件使用。
September 3, 2021
本文介紹 React 中 State 的概念，包含 useState Hook、Snapshot、Lazy State Initialization 等觀念，看似簡單的狀態，其實有一些細節觀念是初學時容易忽略的。
