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

學習時數:5 hr

Done

To Do @ this week


學習心得紀錄

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,引用 ReactReactDOM 套件,然後就可以使用相關的語法,利用 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

#React







你可能感興趣的文章

給自己看的 JS 進階-變數

給自己看的 JS 進階-變數

 [ 筆記 ] JavaScript 進階 05 - Execution Context - Scope Chain

[ 筆記 ] JavaScript 進階 05 - Execution Context - Scope Chain

Day04 你知道 setTimout、setInterval、requestAnimationFrame API 三者的關係嗎

Day04 你知道 setTimout、setInterval、requestAnimationFrame API 三者的關係嗎






留言討論