iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

前端日常,每天 React 一下 系列

以 React 為中心的學習筆記,內容主要包含:
★ React 基礎概念、常見功能、活用知識點
★ React Hook 學習筆記
★ Redux 學習筆記

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

【Day00】系列文概述 & 目錄

連載動機 藉由 30 天筆記, 將學習 React 相關的知識整理起來, 以便日後回頭參照。 主要參考來源為官方網站, 並搭配各路大神的文章整理成筆記。 預計內...

2021-09-16 ‧ 由 Emi 分享
DAY 2

【Day01】React 簡介

為什麼需要前端框架? 開發速度更快:可以使用 JavaScript 提供的功能(迴圈、條件判斷、變數) 資料驅動畫面:搭配開發者工具,更容易維護 程式邏輯架構...

2021-09-17 ‧ 由 Emi 分享
DAY 3

【Day02】JSX(JavaScript 語法擴充)

JSX 特點 全稱為 JavaScript Syntax Extension,即 JavaScript 語法擴充,是 React 獨特的樣板語言(templa...

2021-09-18 ‧ 由 Emi 分享
DAY 4

【Day03】渲染元素 Rendering Element

React 的核心之一是 JSX 語法, 這意味著整個網頁內容,包含 HTML 與 CSS, 基本上都是由 JS 產生的。 用 React 撰寫的程式中, 所有...

2021-09-19 ‧ 由 Emi 分享
DAY 5

【Day04】Component 與 Props

關於 Component 可理解為程式中彼此獨立、可重組、拆分、複用的一種積木單元 每個 Component 皆能完整描述自身長相(UI)和邏輯(JS) Re...

2021-09-20 ‧ 由 Emi 分享
DAY 6

【Day05】Data Flow 與 State

Data Flow 中文直譯為資料流, React 中文圈通常說法是 單向資料流/單一資料流, 如字面所述,表示 React 中 所有資料數據只能單向傳遞的機制...

2021-09-21 ‧ 由 Emi 分享
DAY 7

【Day06】生命週期 Lifecycle(Class Component)

React 元件擁有從產生、渲染 到被移除解放資源的各個階段 稱之為生命週期(Lifecycle)。 Class Component 生命週期 Mount:初...

2021-09-22 ‧ 由 Emi 分享
DAY 8

【Day07】事件處理 Handling Events

React 事件處理 React 和 HTML 事件處理的語法略有不同: HTML 的事件語法: <button onclick="activa...

2021-09-23 ‧ 由 Emi 分享
DAY 9

【Day08】條件渲染 Conditional Rendering

在 JSX 中,可以使用 JavaScript 中 if 陳述式 或條件運算子如 三元運算子(ternary operator) 來規範如何顯示、更新 UI。...

2021-09-24 ‧ 由 Emi 分享
DAY 10

【Day09】列表 List 與 key

簡單的 React 列表範例 const uli = { <li>1</li> <li>2</li>...

2021-09-25 ‧ 由 Emi 分享