iT邦幫忙

鐵人檔案

2022 iThome 鐵人賽
回列表
Modern Web

你 React 了嗎? 30 天解鎖 React 技能 系列

在前端開發中,JavaScript 已經是必要技能之一,許多公司的前端工程師徵才技能,至少都要會一個 JS 框架/函示庫 (Angular、React、Vue),而其中 React 跟 VUE 又占了大宗,最近也接到了 React 的案子,邊學習與記錄,學習新技能就像玩遊戲一樣,我將準備開通 React,就跟著我一起解鎖 React 技能吧!

鐵人鍊成 | 共 30 篇文章 | 22 人訂閱 訂閱系列文 RSS系列文
DAY 21

[DAY 21] Custom Hook - 客製你自己的 Hook

認識 Custom Hook 當有多個組件有相同的邏輯,但卻重複寫了好幾次,這時候可以將相同邏輯的地方,抽出來做成一個共用 function,方便我們使用。...

2022-10-06 ‧ 由 Lala Code 分享
DAY 22

[DAY 22] useContext 跨組件溝通傳遞資料

當專案越來越多 Components 時,為了使用 props,會將 props 層層傳入,但也許這個 Component 根本沒用到這個 props,卻為了...

2022-10-07 ‧ 由 Lala Code 分享
DAY 23

[DAY 23] React-router-dom 路由設定教學,實現頁面跳轉(上)

此篇版本為 react-router-dom v6 react-router-dom 可以設定 react 的網站路由,是以 react-router 為基底...

2022-10-08 ‧ 由 Lala Code 分享
DAY 24

[DAY 24] React-router-dom 路由設定教學,實現頁面跳轉(下)

延續上一篇 DAY23 的 React-router-dom 繼續往下介紹,如果沒看過的朋友,建議可以先看上一篇哦! 本篇將介紹 動態路由參數 當前路由資訊...

2022-10-09 ‧ 由 Lala Code 分享
DAY 25

[DAY 25] 串接 API,透過 Fetch 將遠端資料渲染在畫面

串接 API 的方式有很多種,你可以使用任何喜歡的 Ajax 函式庫來串接,如 Axios、ky 等等…,這邊將會以 JavaScript 原生方法 Fetc...

2022-10-10 ‧ 由 Lala Code 分享
DAY 26

[DAY 26] Redux 原理與 Redux Toolkit

在後面的幾天將會以 Redux Toolkit 來做說明,而在了解 Redux Toolkit,我們先來了解 Redux 的運作原理,在後面的操作上也會比...

2022-10-11 ‧ 由 Lala Code 分享
DAY 27

[DAY 27] Redux Toolkit 管理組件的共用資料

安裝環境 創建模板 React + Redux Toolkit npx create-react-app my-app --template redux 安...

2022-10-12 ‧ 由 Lala Code 分享
DAY 28

[DAY 28] Redux Toolkit 非同步操作createAsyncThunk

做前端時一定會碰到非同步操作,本篇將使用 axios 搭配 Redux Toolkit 來作範例串接 API,可以先將 axios 環境安裝起來 安裝 Axi...

2022-10-13 ‧ 由 Lala Code 分享
DAY 29

[DAY 29] useReducer 處理複雜邏輯的 state

看到 useReducer 你可能會疑惑,這跟前幾天講的 Redux 裡的 Reducer 有什麼毛線關係嗎? 的確!useReducer 的觀念跟用法都跟...

2022-10-14 ‧ 由 Lala Code 分享
DAY 30

[DAY 30] 將網站部署到 Github Pages 吧!

[情境劇場] 小當家:哇!怎麼來了這麼多外國人 解師傅:嘿嘿~因為我們把網站偷偷發布上線了,沒想到成效這麼好啊! React 熱炒店已名聲遠播,但這不會是終點,...

2022-10-15 ‧ 由 Lala Code 分享