iT邦幫忙

鐵人檔案

2022 iThome 鐵人賽
回列表
Modern Web

用React讓網頁動起來: React基礎與實作 系列

React是一個很有名的前端框架,運用React的companent以及hook,可以做出一個美觀且實用度搞得網站。這次鐵人賽,將在這三十天介紹一些React的功能及實用的套件,並實作一個可以串接後端的todo list。

鐵人鍊成 | 共 30 篇文章 | 10 人訂閱 訂閱系列文 RSS系列文 團隊死線衝鋒 Deadline Squad
DAY 21

[Day21]用 React 讓網站動起來:useForm 簡介

今天要來介紹一個第三方 api-React Hook Form ,這是一個處理表單的 api,可以幫助我們在 React 中更方便的處理表單。其中,會主要介紹...

2022-10-06 ‧ 由 時雨 分享
DAY 22

[Day22]用 React 讓網站動起來:更多 React Hook Form

昨天介紹了 useForm 的基本用法,今天來多介紹一些 React Hook Form 別的用法。 FormProvider 前幾天介紹了資料管理的 Cont...

2022-10-07 ‧ 由 時雨 分享
DAY 23

[Day23]用 React 讓網站動起來:useRef

接下來會來介紹一下各種其他 React 常用功能。今天我們來說一下要怎麼在 React 中操作元素。一般來說,操作元素會使用 querySelector取得 D...

2022-10-08 ‧ 由 時雨 分享
DAY 24

[Day24]用 React 讓網站動起來:useRecucer

接下來要來介紹一下 useReducer,看到 "Reducer" 就可以料想到,他跟 Redux 應該有點關係。useReducer 是一...

2022-10-09 ‧ 由 時雨 分享
DAY 25

[Day25]用 React 讓網站動起來:認識 memorize hook

當 React 程式越來越龐大,就需要考慮效能的問題。memorize hook 是 React 提供的 api,可以避免重複 render 造成的效能問題。今...

2022-10-10 ‧ 由 時雨 分享
DAY 26

[Day26]用 React 讓網站動起來:useMemo

昨天我們介紹了什麼是 memorized hook,介紹他們是如何提升 React 的效能。接著,我們來更詳細一點的介紹各個 hook 要怎麼使用。 useMe...

2022-10-11 ‧ 由 時雨 分享
DAY 27

[Day27]用 React 讓網站動起來:useCallback

昨天我們介紹了 useMemo,這個 hook 可以幫助我們記憶依賴參數,當參數變化時才會重新執行函式,並且取得函式回傳的值。今天要來介紹的是 useCallb...

2022-10-12 ‧ 由 時雨 分享
DAY 28

[Day28]用 React 讓網站動起來:自定義 hook

這三十天我們介紹了許多的 hooks,在開發上常常會需要使用這些 hook 做組合技,也會常常使用到重覆的功能,這時候就可以將這些 hook 抽出來,做成 cu...

2022-10-13 ‧ 由 時雨 分享
DAY 29

[Day29]用 React 讓網站動起來:部署網站到 github page

這幾天我們已經學習了許多 React 的技術,是時候部屬 React 的作品到 github 上了!如果不是大型的網站,只是要展示自己的作品或寫一個部落格的話,...

2022-10-14 ‧ 由 時雨 分享
DAY 30

[Day30]用 React 讓網站動起來:完賽結語

React 系列到第三十篇了!終於要完賽了,感動~ 其實原本沒有想要參加鐵人賽的,因為六角學院的小組成員們說要參加,為了挑戰自己,也讓自己學習更多而參加。 會選...

2022-10-15 ‧ 由 時雨 分享