iT邦幫忙

2021 iThome 鐵人賽

DAY 30
3
Modern Web

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

Day30-還想學更多嗎?推薦 Youtube 上面免費的 React 學習資源

終於鐵人賽也到了尾聲,在這三十天為了完成技術文章,查詢了不少的資料當作參考,其中也包括了在 youtube 上的教學影片,所以我把推薦的一些國外 youtuber 的 React 教學清單整理在下面,提供給各位讀者做學習。

推薦影片清單

這兩個 youtuber 都製作不少關於 React 的教學,我也看過他們的教學,覺得講解的相當清楚。

Youtube 頻道: Codevolution

ReactJS Tutorial for Beginners

這個播放清單分成了四個部分,可以自己選擇想瞭解的篇章觀看,另外後面的三個篇章該 youtuber 也有把它們獨立成一個清單,所以我也將那三個項目加上清單連結:

React Redux Tutorial

React Table Tutorial

React Formik Tutorial

React Storybook Tutorial

Practical React

教你製作出幾個網頁常用的元件

React TypeScript Webpack Setup

教你重頭建置 React TypeScript 的 Webpack 環境。

Next.js Tutorial for Beginners

Youtube 頻道: The Net Ninja

React Testing Library Tutorial

介紹 React Testing Library

Full Modern React Tutorial

React Context & Hooks Tutorial

Youtube 頻道: Philip Fabianek

React.js Deep Dive

最近發現相當不錯的系列,深入介紹 React 的一些功能,應該以後還會新增影片上去。

React Hooks Tutorial


文章整理

另外也整理一下過去 29 天發布的文章。

Day1-鐵人賽大綱 & 為什麼要使用 Hook?

Day2-React Hook 篇-認識 useState

Day3-React Hook 篇-認識 useEffect

Day4-React Hook 篇-認識 useRef & useImperativeHandle

Day5-React Hook 篇-認識 useContext

Day6-React Hook 篇-useReducer

Day7-在認識 useMemo 前,先認識 React.memo

Day8-React Hook 篇-認識 useMemo

Day9-React Hook 篇-認識 useCallback

Day10-React Hook 篇-打造自己的 Hook:Custom Hook

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

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

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

Day14-Redux 篇-介紹 Redux

Day15-Redux 篇-實作範例

Day16-Redux 篇-認識 Redux Toolkit

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

Day18-React Router 篇-上篇

Day19-React Router 篇-下篇

Day20-React 簡易動畫篇-上篇

Day21-React 簡易動畫篇-下篇

Day22-React Life Cycle 篇-上篇(介紹生命週期圖 & Mounting)

Day23-React Life Cycle 篇-下篇(Updating & Unmounting & Error handling & Render Phase & Commit Phase)

Day24-React 效能優化篇-上篇(四個優化效能的技巧)

Day25-React 效能優化篇-下篇(介紹 React Profiler)

Day26-React PropTypes & DefaultProps

Day27-介紹 React Developer Tools

Day28-介紹 Redux DevTools

Day29-淺談 React Concurrent Mode & 相關功能(Fiber、Suspense、useTransition、useDeferredValue)

可以看到在這 29 天中,認識了多個常用的 hook、表單處理、Redux/Redux Tookit、React Router V5、React 動畫 library React Transition Group、React life cycle、效能優化、以及其他幾項 React 的功能。

另外題外話一下,我看今年還蠻多人寫 React 相關主題的,所以我想會多了不少 React 相關的文章可以做參考,這是一個好的現象。未來若有研究 React 相關的功能、特性,我也會寫成番外篇補充給讀者參考。

那今年的鐵人賽我就成功再次完賽了!耶~希望今年寫的鐵人賽內容對讀者能有幫助!我明年還會再參加的!大家拜拜。


上一篇
Day29-淺談 React Concurrent Mode & 相關功能(Fiber、Suspense、useTransition、useDeferredValue)
下一篇
[Bonus 系列] - 來看看 React Router v6 有什麼新功能?和 v5 有哪些地方不同?
系列文
用30天更加認識 React.js 這個好朋友31

1 則留言

1
juck30808
iT邦新手 3 級 ‧ 2021-10-14 11:49:45

恭喜完賽/images/emoticon/emoticon12.gif

我要留言

立即登入留言