iT邦幫忙

鐵人檔案

第 11 屆 iT 邦幫忙鐵人賽
回列表
Modern Web

從 Hooks 開始,讓你的網頁 React 起來 系列

過去 React 的學習途徑不外乎從 class 開始,透過 class 語法建立一個又一個的 component,然而在 React Hooks 的加持之下,Modern React Web App 有了不一樣的氣象,對於新入手的開發者來說,可以從最熟悉的 function 開始學起 React;對於熟悉 React 的開發者而言,則可以練習不受舊有思維的影響,感受 Hooks 帶來的簡潔與便利性。

現在,不論你是有經驗的 React 開發者,或是初入前端想要開始學習接觸前端框架的有志之士,就讓我們從 Hooks 開始,讓你的網頁 React 起來吧!

參賽天數 27 天 | 共 27 篇文章 | 121 人訂閱 訂閱系列文 RSS系列文 團隊Wow Doge!
DAY 1

達標好文 [Day 01] 沒學過 React 可以從 Hooks 開始嗎?

大約今年(2019)二月, React 16.8 版開始正式支援 Hooks 的用法,熟悉 React 的開發者即使還沒自己用過,但一定聽過 Hooks 這個詞...

2019-09-17 ‧ 由 pjchender 分享
DAY 2

[Day 02] React 中一定會用到的 JavaScript 語法

在開始撰寫 React 之前,需要讓大家有一個比較統一的開發環境,如此可以避免因為作業系統、環境版本、React 版本的差異造成影響。一開始在專案還沒有很複雜前...

2019-09-18 ‧ 由 pjchender 分享
DAY 3

[Day 03 - 計數器] 用原生 JavaScript 做一個簡單的計數器

昨天我們複習了在 React 中一定會用到的 JavaScript 語法,不知道昨天的內容會不會有點吃不消呢?可以在底下留言告訴我,如果喜歡我們的頻道,不要忘了...

2019-09-19 ‧ 由 pjchender 分享
DAY 4

[Day 04 - 計數器] 把 HTML 寫在 JavaScript 中!? - JSX 的使用

本日關鍵字:ReactDOM.render()、JSX 昨天我們完成了一個簡單的計時器頁面,感覺用原生的 JavaScript 來寫計數器並不會太過複雜,我們只...

2019-09-20 ‧ 由 pjchender 分享
DAY 5

[Day 05 - 計數器] 將計數器頁面改成用 JSX 來寫

在 Day 4 - 把 HTML 寫在 JavaScript 中有什麼好處? 中,已經知道怎麼把 HTML 放入 JSX 中呈現出來,今天我們要把 Day 03...

2019-09-21 ‧ 由 pjchender 分享
DAY 6

[Day 06 - 計數器] 醒醒啊!為什麼一動也不動 - useState 的基本使用

昨天我們已經把計數器的 HTML 放到 JavaScript 中,並且用 JSX 的方式來呈現,但是目前只有畫面還沒有實際的功能。今天我們將會使用第一個 Rea...

2019-09-22 ‧ 由 pjchender 分享
DAY 7

[Day 07 - 計數器] 幫計數器設個最大最小值吧 - JSX 中條件渲染的使用

假設現在我們想要幫計數器設定最大值和最小值,其中計數器最大只能到 10,最小只能到 0 ,而且預設起始值是 5 的話,可以怎麼做呢? 其中一種做法是當數字 &g...

2019-09-23 ‧ 由 pjchender 分享
DAY 8

[Day 08 - 計數器] 一個不夠,給我一次來十個 - JSX 中迴圈的使用

今天會學到的內容 將事件處理器建立成實名函數 在事件處理器中帶入參數 透過 JSX 重複渲染某一的組件 ⚠️ 警告:密集恐懼症者慎入本篇內容。如果你連 i...

2019-09-24 ‧ 由 pjchender 分享
DAY 9

[Day 09 - 網速換算器] 網速傻傻分不清楚 Mbps? Mb/s? 來寫個單位換算器吧

看了好多天的計數器,今天將讓我們換個主題吧!在開始之前,先來討論一下什麼是網速吧! Mbps 是用來計算網路頻寬最常見的單位,自從大家升級到 4G 的行動網路...

2019-09-25 ‧ 由 pjchender 分享
DAY 10

[Day 10 - 網速換算器] 換算起來吧 - 資料綁定與組件拆分

昨天我們已經把版哥提供的網速轉換器 HTML 樣板,搬移到 JavaScript 中改成在 React 中用 JSX 來呈現,但是還沒加上任何實際的功能。 今天...

2019-09-26 ‧ 由 pjchender 分享