iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 1
2
自我挑戰組

與 React 交朋友的三十天學習之旅系列 第 1

拉開序幕,認識 React 好朋友

胎嘎後,大家好,沒想到今年我又決定參加鐵人賽了。

而今年要撰寫的主題已經非常清楚的寫在標題上,那就是想透過這三十天和 React 交個朋友培養一下感情~

按照慣例,還是需要寫一下這三十天預期想達成的目標。

這次的目標期許自己可以完成以下的學習:

  1. React 的相關使用方式
  2. React Router,建立路由導航
  3. React Redux,學習管理共同狀態
  4. 透過一個小小的 Side Project 將這次的學習運用進去

而依據上述的學習目標會嘗試分成幾個軸線延伸:

首先是:

  1. React 定義的一些術語,舉凡 JSX 語法、 React Element 的定義等等。
  2. Class-based Component 與相關的使用,例如 「事件操作」、「生命週期」、「狀態(State)更新」、「傳遞狀態(State)到元件中」 等。
  3. Function Component 與相關的使用,了解 React hooks 相較於 Class-based Component ,可以做到什麼事情
  4. 在 React 中管理樣式的幾種方式(CSS modules、Styled component)
  5. 學習 HOC(Higher Order Component) 的觀念與基礎的使用

接著是透過 React Router 建立整個 React 應用程式的頁面導航:

  1. 基本切換頁面的方式
  2. 傳遞動態參數切換頁面
  3. 巢狀路由的設定
  4. 建立一個 Router Config 集中管理路由
  5. 透過 hook 的方式改寫

然後是學習 Redux ,管理共同的狀態:

  1. 學習 Redux 觀念與運作方式
  2. 同步資料流的操作
  3. 使用 Thunk、 Saga 處理非同步資料流
  4. 透過 hook 的方式改寫

而來到本次鐵人賽的最後,預計透過做出一個小小的 Side Project 將本次學習到的部分做一個驗收

至於是什麼呢? 就讓我賣個關子吧(絕對不是因為還沒有想到要做什麼)

明天就讓 React 好朋友帶著我一同摸索 React 的世界啦!

鐵人賽文章同步發佈於 個人部落格

我們明天見~


下一篇
初探 React,建立第一個元件
系列文
與 React 交朋友的三十天學習之旅30
0
CathyShen
iT邦新手 5 級 ‧ 2020-09-16 09:52:58

鮮蝦挺!
恭喜開賽即完賽的鵬化大正式開賽~ ✧*。٩(ˊᗜˋ*)و✧*。

tsuifei iT邦新手 5 級 ‧ 2020-09-17 20:27:13 檢舉

好想問~鮮蝦挺! 洗蝦密?

0
Chris
iT邦新手 5 級 ‧ 2020-09-17 09:27:20

交陪 React

0
tsuifei
iT邦新手 5 級 ‧ 2020-09-17 20:28:44

總是那麼用心的準備!真是超棒的~
但好想聽聽你用Vue後,服用React的心得啊~

我要留言

立即登入留言