Day 150

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

學習時數：6.5 hr

Done

[done] [FE302] React 基礎：styled-components

To Do @ this week

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

學習心得紀錄

Objective 客觀

今天把 styled-component 實戰跟著做一遍，做完後，就可以自己試著切看看了，不然總是在看 React 相關的 component、CSS 概念，沒有實作還是不太清楚，像是怎麼傳參數到 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 三元運算子及短路的寫法。