iT邦幫忙

鐵人檔案

2022 iThome 鐵人賽
回列表
Modern Web

新手進化日記,從React至Redux Saga 系列

自從上了研究所後才開始觸碰前端,HTML、JS也只有在大學課堂上學過而已。
我第一個前端語言是直接嘗試使用React來撰寫,雖然途中也踩了許多雷,但覺得其實還滿容易上手的 (因為不想先寫傳統HTML再慢慢轉到React,想要一次到位XD),所以也把這兩年之中學的經歷寫成日記,希望能夠幫助跟我一樣想學React的人!

鐵人鍊成 | 共 30 篇文章 | 3 人訂閱 訂閱系列文 RSS系列文 團隊IT108xWKE
DAY 11

Day 11 - React生命週期

tags: iThome 鐵人賽 30天 什麼是生命週期?像是Component的首次呼叫與離開都是生命週期的其中一環,其中也包括props和state的變化。...

2022-09-26 ‧ 由 whlshy 分享
DAY 12

Day 12 - Event & Ref

tags: iThome 鐵人賽 30天 今天來了解一下element所用有的事件 (event) 和Ref的使用時機與方法吧 Event 在之前的實作中有用到...

2022-09-27 ‧ 由 whlshy 分享
DAY 13

Day 13 - Hook: Function Component (1)

tags: iThome 鐵人賽 30天 什麼是Hook?是一個讓你可以不用寫Class Component也可以用Function Component來使用R...

2022-09-28 ‧ 由 whlshy 分享
DAY 14

Day 14 - Hook: Function Component (2) & Mui前端開發的好幫手

tags: iThome 鐵人賽 30天 今天來個改造吧,來把Header.jsx通通都改成Fuction Component並變為Hook的寫法~ Compo...

2022-09-29 ‧ 由 whlshy 分享
DAY 15

Day 15 - 自製專屬的App Bar

tags: iThome 鐵人賽 30天 都裝完MUI了,當然要來實際應用啦,今天就來把Header變成MUI的形狀吧。 Header: App Bar 因為我...

2022-09-30 ‧ 由 whlshy 分享
DAY 16

Day 16 - 首頁影片卡片製作

tags: iThome 鐵人賽 30天 影片卡片是顯示在首頁的預覽卡片頁面,要做的形式呢大概是有一張影片的預覽圖,與筆記的些許內容,至於影片標題的擷取就不在這...

2022-10-01 ‧ 由 whlshy 分享
DAY 17

Day 17 - 調整卡片 / Link (react-router-dom)

tags: iThome 鐵人賽 30天 先接續昨天卡片製作,還有圖片/卡片大小沒調整好,另外標題也要設定成最多兩行,最後要給每個卡片一個具有識別性的連結,點進...

2022-10-02 ‧ 由 whlshy 分享
DAY 18

Day 18 - 建立Content來管理React Route

tags: iThome 鐵人賽 30天 今天要來把首頁的物件做一個整理,首先是先建立一個Content來顯現主要頁面的資訊,如首頁的卡片與影片標記的編輯頁面,...

2022-10-03 ‧ 由 whlshy 分享
DAY 19

Day 19 - Switch\Redirect選擇你的網頁人生路徑

tags: iThome 鐵人賽 30天 Switch Switch裡面會包著多個Route但並不是全部都符合都會渲染,而是會只渲染第一個符合的Route,所以...

2022-10-04 ‧ 由 whlshy 分享
DAY 20

Day 20 - Container Wrapper包裝影片卡片 / Array Mapping

tags: iThome 鐵人賽 30天 今天要處理的是讓每個頁面都有自己的Container來包裝排版,畢竟每個頁面的排版不一定都相同,這個專案主要就兩個頁面...

2022-10-05 ‧ 由 whlshy 分享