iT邦幫忙

鐵人檔案

2023 iThome 鐵人賽
回列表
Modern Web

30 days of React 系列

30天的React學習記錄

鐵人鍊成 | 共 30 篇文章 | 9 人訂閱 訂閱系列文 RSS系列文 團隊好想工作室 v7.0
DAY 1

Day 1 - 系列簡介

前言 這是30天的React初學者在沒有學過其他框架的背景下進行的學習過程紀錄,請當作一般的學習筆記來閱讀。預備知識為HTML、CSS以及JavaScript。...

2023-09-16 ‧ 由 yuu 分享
DAY 2

Day 2 - 理解 JSX

今天來學習JSX,主要學習的內容為: 理解JSX是什麼 使用JSX的原因 JSX的運作 如何使用JSX JSX是什麼 在談JSX 前,先談談componen...

2023-09-17 ‧ 由 yuu 分享
DAY 3

Day 3 - JSX的花括號

昨天我們談了基礎的JSX的規則,這次我們來看看JSX當中的花括號是怎麼使用的呢?今天會討論到的議題: 使用花括號的功能 如何理解花括號 double花括號的使...

2023-09-18 ‧ 由 yuu 分享
DAY 4

Day 4 - React 元件初探

今天要來學習元件,要探索的內容有: React component簡介 如何創建component 如何使用component 瀏覽器如何認知 React...

2023-09-19 ‧ 由 yuu 分享
DAY 5

Day 5 - 建立元件之間的聯繫:匯出與引入

上一篇學習了基礎的元件使用,那麼元件之間該如何串聯,一起使用呢?今天要來學習: 匯出與引入如何運作 匯出元件的二種方法 匯出與引入元件 我們可以透過匯出(e...

2023-09-20 ‧ 由 yuu 分享
DAY 6

Day 6 - 傳遞Props

今天進入props的學習,會討論以下的議題: 什麼是props 如何使用props 將JSX作為props傳遞 什麼是props 在 React 中,pro...

2023-09-21 ‧ 由 yuu 分享
DAY 7

Day 7 - 條件式渲染 (Conditional Rendering)

條件式渲染(conditional rendering) 讓我們能夠在特定的條件來動態地渲染不同的元件或內容。譬如在JavaScript 學習過的的 if… e...

2023-09-22 ‧ 由 yuu 分享
DAY 8

Day 8 - 渲染清單

昨天我們透過條件式渲染讓電影清單能夠依據電影名稱顯示相對應的資料,也能直接在object中新增資料來維護,但這還差一點,這還沒有達到毋須修改元件結構自動渲染。今...

2023-09-23 ‧ 由 yuu 分享
DAY 9

Day 9 - key

昨天我們在製作電影卡片元件,雖然畫面看起來沒問題但編輯器跳出了🚨 這個是什麼意思呢?在React中當我們使用到array item時,應該給每一個array i...

2023-09-24 ‧ 由 yuu 分享
DAY 10

Day 10 - 保持元件純淨

今天要來學習在設計元件時有哪些要點,以及如何避免寫出「不乾淨」的元件。 純淨的元件 製作元件時的大重點:保持元件的純淨 (Keeping Components...

2023-09-25 ‧ 由 yuu 分享