iT邦幫忙

鐵人檔案

2025 iThome 鐵人賽
回列表
Modern Web

重溫 React 官方文件回到最初的起點 系列

React 這幾年都是許多公司用來開發網頁的一大框架之一,即使一直有不管是新的還是舊的競爭者出現,React 的使用率依然是滿高的。我自己所在的公司與平常自行開發的 Side Project 也是用 React 為主要工具。這次鐵人賽就想重讀 React 的官方文件,也讓自己再重新複習一下 React 的各種基礎,在分享的同時也希望讓自己的基本功更紮實。

參賽天數 24 天 | 共 24 篇文章 | 1 人訂閱 訂閱系列文 RSS系列文
DAY 1

Day 01 - 前言

這是連續第三年參加鐵人賽,這次跟以往不同的棒球數據分析不同,選擇了跟網頁開發比較相關的主題。原因是我其實本來的正職就是網頁前端工程師,所以網頁開發是我更熟悉的部...

2025-09-15 ‧ 由 lihsuanh 分享
DAY 2

Day 02 - 快速開始

今天主要閱讀的內容,會是 React 官網裡的 快速開始 (Quick Start) 頁。但在開始閱讀之前,會想簡單介紹一下我所知道的 React。 React...

2025-09-16 ‧ 由 lihsuanh 分享
DAY 3

Day 3 - Importing 和 Exporting Component

昨天簡單了介紹一下 React,跟之後會使用到的線上測試環境。今天會接下來介紹 React 裡的 import 跟 export。然後我後來發現 快速開始 裡的...

2025-09-17 ‧ 由 lihsuanh 分享
DAY 4

Day 04 - Writing Markup with JSX

在 Day 02 有提到 React Component 會是一個 function 並且回傳 JSX 格式,今天就會來介紹什麼是 JSX,並且他跟一般的 Ht...

2025-09-18 ‧ 由 lihsuanh 分享
DAY 5

Day 05 - 在 JSX 中使用 JavaScript 的大括號

在昨天的文章中介紹了 JSX 的基本用法,並且知道了 React Component 是會把架構、外觀、互動結合在一起使用 JavaScript 來完成的地方。...

2025-09-19 ‧ 由 lihsuanh 分享
DAY 6

Day 06 - 傳遞 Prop 到 Comonent - part 1

昨天的文章介紹了在 JSX 上面使用參數,而我們也可以在我們客制化的 Component 傳入參數或數值使用。而這些傳遞的東西在 React 就會叫做 prop...

2025-09-20 ‧ 由 lihsuanh 分享
DAY 7

Day 07 - 傳遞 Prop 到 Comonent - part 2

處理多個 props 傳入 繼續補充昨天的內容,昨天知道了如何把 props 傳入 Component 裡面並且在 Component 裡面使用他們。但有時候...

2025-09-21 ‧ 由 lihsuanh 分享
DAY 8

Day 08 - 條件式 Rendering

今天要來介紹也是在寫 React 的時候非常容易用到的功能,那就是 條件式渲染(Conditional Rendering)。這邊的渲染(Render),就是在...

2025-09-22 ‧ 由 lihsuanh 分享
DAY 9

Day 09 - Rendering 列表

之前我們在前面的篇章知道了如何使用 大括號 {} 來幫助我們顯示變數資料。而有時候我們會想顯示不只一項資料,而是從擁有數個 值 得 陣列(Array) 中,顯示...

2025-09-23 ‧ 由 lihsuanh 分享
DAY 10

Day 10 - 保持 Component 的 Pure

今天要來介紹一個我們在寫 React Component 很重要的觀念,就是讓 Component 保持純淨(Pure)。前面的文章就有提到在寫 Compone...

2025-09-24 ‧ 由 lihsuanh 分享