{ PH_Dev }

Published on

拉開序幕,認識 React 好朋友

Authors
  • avatar
    Name
    Penghua Chen(PH)
    Twitter

拉開序幕,認識 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 的世界啦!

我們明天見~