Day 151

Day 151 (Week22), 2021/09/09 (Thursday)

學習時數：6 hr

Done

• [done] [FE302] React 基礎：state 概念
• [done] w21 hw1 todo lilst 切版 （ + RWD）
  #### To Do @ this week
• [ ]   w21 React iT 邦幫忙鐵人賽：從 Hooks 開始，讓你的網頁 React 起來系列 Day01 ~ Day 05
• [ ]   w21 React [FE302]
• [done] w17 Heroku 部署

學習心得紀錄

Objective 客觀

昨天才剛開始切待辦清單，今天把待辦清單切好後，要繼續把 [FE302] 看下去。
今天在切版的時候，遇到幾個問題：svg 怎麼用在 React 上？怎麼把一條待辦清單包成 component？

svg 怎麼用在 React 上？

一開始查了滿多方法，包括 webpack 引入、styled-icons 的 npm 套件，最後使用的是 minify svg 並轉換成鴕峰的格式，最後再把 svg 的圖片以 component 的形式 import 到檔案裡。

待辦清單包成 component

<TodoCard>
  <TodoContent />
  <TodoButtons>
    <Buttons>編輯</Buttons>
    <Buttons>編輯</Buttons>
  </TodoButtons>
</TodoCard>

上面這些都是使用 styled-component 建立的，原本以為只要直接重新建立一個 TodoCard ，然後再 restyle（ styled(TodoCard)） 就可以了，然後就出錯了，後來是另外建立一個新的 component ，把這一大串包絲毫不差的包起來。

state

先前看了滿多的 state 概念，但是沒有實際做，還是不太懂，今天看了 [FE302] 的 state 部分。

感受

今天使用 styled-component 切版切滿久的，主要都是卡在 svg 這個部分。原本還想說拖延表單一起切一切，後來想想還是算了，如果一次都切完版，我想可能下週就印象模糊了。

早上預計要去練習開車，所以這兩天睡的有點少，眼睛就比較不舒服，還有一些鼻塞的過敏症狀出來。

Decisional 決定行動

繼續研究 state，希望明天可以進入到待辦清單的實際功能。