iT邦幫忙

鐵人檔案

2023 iThome 鐵人賽
回列表
Modern Web

從Vue學React!不只要會用,還要真的懂~ 系列

從Vue學React!雖然看起來可能是一個奇特的學習方式,但對於本來是寫Vue小菜菜的我來說,不僅能有更明確的學習方向,從Vue與React特性、概念,以及用法的比較中,還能對React及Vue有更深一層的理解。而且這次的重點不只在於懂得如何使用,還要更深入的理解為何要這樣用,讓我們一起拋開Junior「只要會用就好」的思維,朝著成為senior「還要真的懂」的方向前進吧!

這三十天一起與男主角React,男配角Vue,享受美好的三人行學習旅程吧:)

鐵人鍊成 | 共 30 篇文章 | 32 人訂閱 訂閱系列文 RSS系列文 團隊曼陀號計畫V
DAY 1

【Day 1】為什麼我要從Vue學React?為什麼不只要會用,還要真的懂?

大家好!我是從韓文領域不務正業到軟體產業的文科少女,目前正在前端的世界努力中。因為希望自己能突破Junior的坎,所以為自己立下了一個參加鐵人賽的目標,希望透過...

2023-09-07 ‧ 由 文科少女 分享
DAY 2

【Day 2】這趟旅程,從認識mutable和immutable開始

我們先把什麼Vue不Vue的,React不React的放一旁,從一個很基礎,但很多初學者(包含我)卻沒有好好去理解的關鍵概念開始認識,那就是mutable和im...

2023-09-08 ‧ 由 文科少女 分享
DAY 3

【Day 3】可變特性與不可變特性&渲染的觸發與Virtual DOM的產生

不論是學習Vue或是學習React,除了學會怎麼使用它們的API或hook外,還必須了解它的渲染機制,這樣才可以避免出現一些預期外的bug而不自知,或是在需要某...

2023-09-09 ‧ 由 文科少女 分享
DAY 4

【Day 4】 觸發重新渲染後的下一步 - Reconciliation (上)

昨天已經了解了imutable和mutable特性與觸發畫面重新渲染的關係,今天再另外深入一個與畫面更新有關的部分,也就是Reconciliation,或是稱為...

2023-09-10 ‧ 由 文科少女 分享
DAY 5

【Day 5】觸發重新渲染後的下一步 - Reconciliation (下)

昨天已經了解Reconciliation是什麼樣的過程,以及Reconciliationy的過程中是怎麼比較新舊Virtual DOM,今天讓我們從一個判斷有沒...

2023-09-11 ‧ 由 文科少女 分享
DAY 6

【Day 6】元件的一生!Vue的生命週期 vs. React的生命週期

昨天看了渲染機制後,緊接著再往前一步來看看元件的生命週期吧!常寫Vue的朋友們應該對生命週期都不陌生,因為偶爾還是會遇到需要透過生命週期API來實現一些功能的時...

2023-09-12 ‧ 由 文科少女 分享
DAY 7

【Day 7】HTML的部分怎麼辦?Template和JSX

了解完畫面渲染以及元件的生命週期後,接著來看看可以被Vue和React轉換成Virtual DOM的HTML的部分要怎麼寫吧!這個部分雖然沒有很困難,但老實說從...

2023-09-13 ‧ 由 文科少女 分享
DAY 8

【Day 8】一個與Vue和React有密切關係的概念-單向資料流

今天先暫時忘記Vue和React,來專注看一個與Vue和React有關聯且非常重要的概念,也就是「單向資料流」。雖然照字面來看,感覺好像很好理解,但不仔細去思考...

2023-09-14 ‧ 由 文科少女 分享
DAY 9

【Day 9】Vue & React上的單向資料流的應用

關於單向資料流,昨天已經有針對這麼部分透過程式碼來了解是怎樣的資料流design pattern了,但是單向資料流究竟和Vue和React有什麼關係呢?就讓我們...

2023-09-15 ‧ 由 文科少女 分享
DAY 10

【Day 10】ref和useState:定義與畫面渲染有關的State

前天和昨天花了一些時間了解Vue和React的「單向資料流」設計模式後,接著來看看與畫面渲染有關的state的部分,雖然在使用上,某些程度來說,Vue和Reac...

2023-09-16 ‧ 由 文科少女 分享