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

學習時數:5 hr

Done

  • [done] w21 React component, props

To Do @ this week


學習心得紀錄

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 。

#React #Hooks #Component #Props







Related Posts

Leetcode 刷題 pattern - Top K elements

Leetcode 刷題 pattern - Top K elements

[ 筆記 ] 交換資料 - XMLHttpRequest、CORS、JSONP

[ 筆記 ] 交換資料 - XMLHttpRequest、CORS、JSONP

機器人作業系統ROS

機器人作業系統ROS






Comments