Day 143

Day 143 (Week21), 2021/09/01 (Wednesday)

學習時數：5 hr

Done

• [done] w21 iT 邦幫忙鐵人賽：從 Hooks 開始，讓你的網頁 React 起來系列 Day01 ~ Day 05

To Do @ this week

• [] w21 React iT 邦幫忙鐵人賽：從 Hooks 開始，讓你的網頁 React 起來系列 Day01 ~ Day 30
• [ ]   w21 React [FE302]
• [ ]   w17 Heroku 部署

學習心得紀錄

Objective 客觀

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

今天複習 JavaScript 一定會用到的語法複習起來，複習了 template literals（樣版字面值）、arrow function（箭頭函式）、shorthand property names（物件屬性名稱縮寫）、destructuring assignment（解構賦值）、spread/rest syntax（展開其餘語法）。此時就很慶幸有乖乖跟著 ESLint 修改 JavaScript 的 code，常常要我改成箭頭函式、解構賦值，現在也比較熟練，剛開始時，我常常看不太懂也超不習慣箭頭函式跟解構賦值，展開跟其餘語法在前面學 JavaScript 才比較有碰到，目前還碰的比較少，相對地較不熟練，不過後面 React 應該會用到！希望會越來越熟練。

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

用 JavaScript 做一簡單計數器，前幾天在寫抽獎系統時，本來想寫 HTML DOM，但最後沒有把 DOM 放在抽獎系統裡，便也因此複習了一下 HTML DOM，在做這個的時候就上手很多。

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

什麼是 JSX？為此我還查了一下全名 JavaScript XML，在 Day04 有提到：「簡單的說，在 JSX 的加持之下，讓開發者可以把 JavaScript 內的用法與程式邏輯，直接套用到 HTML 的元素上，就是一個『強化版 HTML 』的概念！」另外還初步介紹了怎麼使用 JSX，引用 React 和 ReactDOM 套件，然後就可以使用相關的語法，利用 ReactDOM.render(JSX, HTML DOM)。

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

• 建立第一個 React 組件：
  • 把 JSX 內容包成一個 React 組件，就是利用箭頭函式將 JSX 內容傳出來。這樣就不會在使用 ReactDOM.render(JSX 內容, HTML DOM) 的時候 code 一大長串。
  • 代入 React 組件的方式就是當作 HTML 的標籤：<組件名稱 />
• 在 JSX 中帶入 CSS 樣式：
  • 在 JavaScript 中 class 是類別，有別於 HTML 跟 CSS 的 class。因為是將 HTML 寫在 JavaScript 內，所以這兩個會讓搞混，因此在 React 中，CSS 的 class 會改成 className，例如：const AdminContent = (<div className="container">...</div>, document.querySelector. ...)。
• 在 JSX 中帶入 inline-style
  • 在 JSX 內，CSS 的樣式，是放在 HTML 的 attribute 名字為 style 的地方，像是 <div style={}。
  • CSS 的樣式會設一個 object 放在裡面，然後再將此 inline-style 的 object 放入 HTML attribute 的 style 裡面。
  • 另外如果不想要另外建立一個 object 的話，也可以直接將 object 寫在 style 裡面，像是 <div style={{color: black}}，有兩個 {}，外層為 style 的，內層就是在 style 裡面放入一個 object，與額外建立一個 object 放 inline-style 樣式是一樣的概念。
• React 中的命名慣例：
  • 組件名稱：大寫鴕峰（例如：AdminHeader）
  • HTML 的屬性（attribute）：小寫鴕峰（例如：maxLength）
  • CSS 的屬性（attribute）：小寫鴕峰（例如：className、backgroundColor）

感受

後來還是想說先進 21 週，後面再來慢慢補部署的部分。

Decisional 決定行動

明天繼續鐵人賽～可以的話來研究一下 Heroku