Day 150 (Week22), 2021/09/08 (Wednesday)

學習時數:6.5 hr

Done

  • [done] [FE302] React 基礎:styled-components

To Do @ this week


學習心得紀錄

Objective 客觀

今天把 styled-component 實戰跟著做一遍,做完後,就可以自己試著切看看了,不然總是在看 React 相關的 componentCSS 概念,沒有實作還是不太清楚,像是怎麼傳參數到 component、怎麼利用 component 切成很多小區塊來做。
另外,實作後,我發現像是 component 可以選擇要不要使用箭頭函式,然後命名的話是大寫鴕峰,下面三種 function 寫法都可以:

const TodoItem = function ({ size, content }) {
// 方法 2:function TodoItem({ size, content }) { 
// 方法 3:const TodoItem = ({ size, content }) => { 
  return (
     <TodoItemWrapper>
       <TodoContent size={size}>{content}</TodoContent>
       <todoButtonWrapper>
         <Button>編輯</Button>
         <Button>刪除</Button>
       </todoButtonWrapper>
       </TodoItemWrapper>
   )
}

今日還複習到 JavaScript 三元運算子及短路的寫法。

感受

一開始還摸不著頭緒要怎利用 component 切版,後來跟著做,就比較有頭緒了,不過還是要想一下怎麼切比較好,今日剛進入待辦清單的切版。

Decisional 決定行動

明天繼續切待辦清單的切版!

#styled-component #React







你可能感興趣的文章

[C#] 同網站下,不同應用程式在ASP.NET MVC 使用 Owin 驗證的登入登出問題

[C#] 同網站下,不同應用程式在ASP.NET MVC 使用 Owin 驗證的登入登出問題

CSS 起手式

CSS 起手式

[Web] 轉換 [icon svg] 為 [background-image]

[Web] 轉換 [icon svg] 為 [background-image]






留言討論