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

學習時數:6 hr

Done


學習心得紀錄

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,希望明天可以進入到待辦清單的實際功能。

#React #styled-component







你可能感興趣的文章

jQuery 常用語法

jQuery 常用語法

Git 版本控制(下)

Git 版本控制(下)

[FE302] React 基礎 ( hooks 版 ):React 基礎

[FE302] React 基礎 ( hooks 版 ):React 基礎






留言討論