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







Related Posts

部署 (1) —— 建立 AWS EC2 主機及 SSH 連線

部署 (1) —— 建立 AWS EC2 主機及 SSH 連線

React

React

如何使用 K8S 自動化定期 CronJob 抓網路公開資料

如何使用 K8S 自動化定期 CronJob 抓網路公開資料






Comments