Day 146 (Week21), 2021/09/04 (Saturday)

學習時數：5 hr

Done

• [done] w21 React component, props

To Do @ this week

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

學習心得紀錄

Objective 客觀

UseState 觀念

看 iT 邦幫忙鐵人賽：從 Hooks 開始，讓你的網頁 React 起來系列 有提到第一個 Hooks —— UseState 的概念，然後在 [RE302] React 基礎也有看到，在鐵人賽系列是從 React 的 UseState 的語法談起，不過在 [RE302] React 基礎是從比較根本的地方談起，會比較曉得緣由。其實 State （狀態）在 React 也可以看程式「資料 data」來理解。

props & component

其實一開始碰到 React component（組件）時，還有一點像是先將資訊輸入腦袋裡，慢慢消化的感覺，過了幾天，其實還是不大懂，後來從 iT 鐵人賽熟悉用法、[FE302]概念描述、Components 與 Props重述概念。
然後又碰到了一個叫做 props 的屬性，其實就是 properties，如果 component 要輸入參數的話，就是輸入 props，然後再在 component 裡面，可以以假設 props.name 的方式想要代入參數。

function Welcome(props) {
  return (
    <h1>Hello!!! {props.name}.</h1>
  )
}

const element = <Welcome name="Sara" />;
ReactDOM.render(
  <Welcome name="Sara" />,
  document.getElementById('root')
);
印出大概如下：

Hello!!! Sara.

在使用 component 時，這種自定義的 component（有屬性的參數為 name='Sara'）。

感受

稍微略略看過了一些 React 的概念還有實作，其實有一點模糊，後來還是覺得需要跟著做才會有跟著在理解，然後去補足中間不太懂的概念。

Decisional 決定行動

偷懶了幾天的 Heroku 希望明天可以看是要換一個方法部署還是找出 Heroku 的問題，然後繼續 w21 React 。