iT邦幫忙

鐵人檔案

第 11 屆 iThome 鐵人賽
回列表
Modern Web

React.js 從 【0】 到【1】推坑計畫 系列

2019 React hooks 的流行讓 React 生態圈產生很大的改變,藉由 30 天的挑戰,讓想學習 React 的人了解以往 class based 的開發方式與最新 React hooks 開發方式的差別,並且會以 hooks 的開發方式為主,也加深自己對 React 的了解。

鐵人鍊成 | 共 30 篇文章 | 128 人訂閱 訂閱系列文 RSS系列文
DAY 1

【Day 1】前情提要 && 教學大綱

大家好!我是老莫,今天是 30 天中的第 1 天,主要是講一下未來 29 天的內容規劃: 關於分享主題 相信大家也是看了主題 "React從0到1&q...

DAY 2

【Day 2】React.js介紹 && 第一個 React 程式

這是 React 從 0 到 1 系列的第二篇,今天廢話不多說,直接進入正題。今天將簡單介紹 React.js 的基礎概念,最後建立我們第一個 React 的程...

DAY 3

【Day 3】CRA專案架構

昨天介紹了 React 的特色與元件化開發的特色,也使用 create-react-app 建構了我們的第一個 React 程式專案,今天將延續昨日 CRA 建...

DAY 4

【Day 4】JSX 語法 && Virtual DOM

第四天將接著昨日的內容繼續! 第一次接觸React的朋友們可能心裡會os: "X! 這到底是甚麼語法,又像JS但又有HTML包在裡面。"別擔...

DAY 5

【Day 5】 第一個 hook - useState

今天終於要介紹 React hooks 中的第一個hook 了 - useState,Start! 建立自己的 component 在講解 state 概念與...

DAY 6

【Day 6】Child Component && Props

昨天介紹了可以在 component 中使用的 state,然而 React 一般建議能夠用越少 state 越好,因為 state 的改變是非同步的,stat...

DAY 7

【Day 7】型別檢查 && PropTypes

昨天講解了 props 的應用,讓子元件可以接收來自父元件的資料。但是隨著應用規模的提升,透過型別檢查可以減少許多可能的錯誤。要達成這個目的,許多人會選擇 fl...

DAY 8

【Day 8】Class component && Functional component

今天與明天會來短暫介紹一下 class-based 的 component,今天將講解 class component 的基礎,也比較一下與 functiona...

DAY 9

【Day 9】Component Lifecycle

昨天對 class-based component 有了初步的認識,然而除了 state ,在 hooks 出來以前 class component 還有一項...

DAY 10

【Day 10】第二個 hook - useEffect

昨日介紹了 class-based component 的 lifecycle,今天要來介紹的是 functional component 如何靠 hook 實...