iT邦幫忙

鐵人檔案

第 12 屆 iThome 鐵人賽
回列表
自我挑戰組

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

約莫一個多月前才決定要參賽,也在當下決定來一趟 React 的學習之旅。
志在透過這一個月上手 React 這套框架的基礎使用。

究竟能不能達成呢? 就讓我們拭目以待XD

鐵人鍊成 | 共 30 篇文章 | 37 人訂閱 訂閱系列文 RSS系列文 團隊好想工作室 v4.0
DAY 11

Styled Component

今天要學習的部分是在 React 中用來管理元件(Component)樣式(styling)的方式: styled component 與 CSS module...

2020-09-26 ‧ 由 PH 分享
DAY 12

CSS modules

CSS modules 是另外一種可以用來設定元件樣式的方式,但這個部分需要修改 webpack 中的設定,所以今天就來看看怎麼修改以及需要注意的細節吧! We...

2020-09-27 ‧ 由 PH 分享
DAY 13

Higher order component(HOC)

今天要學習的部分是 Higher order component,這是一種可以複用元件邏輯的高階技術。 但除了複用元件的邏輯之外,也可以用於增強樣式、元件內容等...

2020-09-28 ‧ 由 PH 分享
DAY 14

createRef 學起來,focus 元素不麻煩

在開發的時候,我們常常會遇到一個需求,當點擊某段文字或區塊時,可以聚焦(focus) 在 input 元素上。 而這只是其中一個我們常遇到的開發情境,這時候我們...

2020-09-29 ‧ 由 PH 分享
DAY 15

Context API

今天要學習的部分是 Context API 的簡單使用。 在一般的使用情境中,我們都透過傳遞 props 到子元件中,讓子元件可以使用父層的資料,但隨著專案的複...

2020-09-30 ‧ 由 PH 分享
DAY 16

在 React 中執行非同步請求

今天要學習的部分是在 React 中透過 axios 來操作非同步請求的 CRUD, 為了減少在學習時還要為了找尋可以練習 CRUD 的資源,這邊我們就透過 J...

2020-10-01 ‧ 由 PH 分享
DAY 17

初探 React Router

在網頁中最常使用的操作肯定要有透過導航列切換頁面這一個功能,而在 React 中我們可以透過 React router 的方式達成切換元件,渲染對應元件的內容來...

2020-10-02 ‧ 由 PH 分享
DAY 18

React router 配置動態參數並取得 api 資料內容

今天的篇幅要來學習透過切換動態參數的方式並取得 api 的資料內容後,渲染在網頁上。 這部分我們延續昨天的 測試範例,並改寫成透過 call api 的方式將資...

2020-10-03 ‧ 由 PH 分享
DAY 19

巢狀路由、 Query 參數與重導向

今天要學習的是關於如何在 React router 中設定巢狀路由、設定 Query 參數以及重導向(Redirect)。 今天學習的部分都可以參考測試例子來幫...

2020-10-04 ‧ 由 PH 分享
DAY 20

透過 React Router config 統一管理路由

前幾天我們學習到了如何在元件中使用 Router 來導航,而今天要學習的部分則是如何透過集中管理所有路由的方式實現導航到各個頁面的方式。 而這個方式就是在配置一...

2020-10-05 ‧ 由 PH 分享