iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

用30天更加認識 React.js 這個好朋友 系列

在這次的鐵人賽中,我會以單元式的方式介紹 React.js 的各種 Hooks、Context、React router、Redux & Redux toolkit、React 動畫、React 效能優化及其他瑣碎 React 特性功能等...
希望能透過一系列 React 相關的主題幫助自己和讀者更加認識 React.js。

鐵人鍊成 | 共 33 篇文章 | 68 人訂閱 訂閱系列文 RSS系列文
DAY 11

Day11-React 表單驗證篇-不使用 hook 或第三方函式庫

React 的表單驗證篇總共會三篇,這篇我們會自己手刻一個驗證輸入值是否合法的表單,而在後面兩篇文章,我將會介紹使用 custom hook 及有名的第三方函式...

2021-09-25 ‧ 由 harry xie 分享
DAY 12

Day12-React 表單驗證篇-使用 Custom hook 進行表單的驗證

這次我們使用 Custom hook 進行表單的驗證。 首先我們建立一個檔案叫 useInputValidate.js ,裡面將會寫一個 Custom hook...

2021-09-26 ‧ 由 harry xie 分享
DAY 13

Day13-React 表單驗證篇-使用第三方函式庫 Formik 進行表單的驗證

Formik 介紹 在進行實作之前,先來認識一下 Formik 吧~ 如標題所說,Formik 是一個表單函式庫,而且還是 React 官方推薦的,相似的還有...

2021-09-27 ‧ 由 harry xie 分享
DAY 14

Day14-Redux 篇-介紹 Redux

這篇主要會講述 Redux 的一些介紹,下篇才會開始進行實作。 Redux 是什麼? Redux 是專門管理 state 的函式庫,它可以將整個專案的 stat...

2021-09-28 ‧ 由 harry xie 分享
DAY 15

Day15-Redux 篇-實作範例

2022/08/03 補充 現在回來看發現自己以前寫的 Redux 還有很多要改進的地方,所以重構了一個範例,並使用了 custom hook useActio...

2021-09-29 ‧ 由 harry xie 分享
DAY 16

Day16-Redux 篇-認識 Redux Toolkit

在這篇文章中,我們要來認識一個函式庫: Redux Toolkit。 Redux Toolkit 官網 Redux Toolkit 是什麼? 不知道讀者有沒有感...

2021-09-30 ‧ 由 harry xie 分享
DAY 17

Day17-Redux 篇-用 Redux Toolkit 實作範例

在第 15 天的文章中我們做了一個範例,現在我們要用 Redux Toolkit 去改寫它。 第一步 我們將原本範例的 store 和 reducer 做改寫。...

2021-10-01 ‧ 由 harry xie 分享
DAY 18

Day18-React Router 篇-上篇

此篇章不會從頭開始介紹 React Router,而是挑選一些它的功能去做介紹,因此本篇的範例皆是從 React Router 官網找的範例。 React Ro...

2021-10-02 ‧ 由 harry xie 分享
DAY 19

Day19-React Router 篇-下篇

這篇要來介紹 React router v5 加入的幾個 hook,包括 useParams、useHistory、useLocation、useRouteMa...

2021-10-03 ‧ 由 harry xie 分享
DAY 20

Day20-React 簡易動畫篇-上篇

這篇要來介紹一下一些能用 React 實現一些動畫效果的函式庫,首先介紹的就是本篇的主角 React Transition Group, React Trans...

2021-10-04 ‧ 由 harry xie 分享