# **react 張至寧1212**

*講義*
https://github.com/eyesofkids/mfee31-react/tree/main/textbook/handouts/react-cra-config/CRA-eslint-prettier

# react執行結果檔案(App.js)裡的程式碼

import XXXX from './1212/7-jsx/XXXX'

function App() {
  return (
    <>
      <XXXX />
    </>
  )
}

export default App

# map
*100%會用到的語法map*
只有陣列可以用 物件類型不可!


映射(應對)
callback運算後回傳結果之集合

*只有這四種循環語法(針對集合式資料查詢一遍)
* 1.loop 迴圈 (for迴圈)
* 2.iterate 跌代 (map、foreach..)
* 很新喔!
* 3.traval 遍歷(針對物件)
* 4.recursion 遞迴

集合式的資料
EX:
* 1.呈現商品的資料
* 2.呈現活動的資料
* 3.訂單的資料
* 4.新聞

# key加在哪?用途?
`"主鍵"的概念`
https://zh-hant.reactjs.org/docs/lists-and-keys.html

 {/* key值的選擇
            1. 資料來自資料庫，優先使用資料庫中的key(主鍵/外鍵)當key值
            2. 資料並非來自資料庫，可在資料初始化時使用uuid或nanoid等函式庫產生key值，注意*不要*寫在元件的return(即render)中
            3. 資料為靜態資料(意指在應用程式執行中完全不會更動)時，才能使用索引值當key值
         */}

** 有map的地方才要加key,沒有map的地方不要加key**``
>
* key加在map最近的地方

# Json格式是什麼
從資料庫抓到資料後傳到伺服器端的資料交換格式
> 世界上8成以上使用
> 另一種為XML,多為大型系統使用

# Condition 條件陳述式
某個條件之下才會出現的狀況
`Ex:按下某個按鈕才會出現購物車等`

* if else
* switch 對某個值做判斷

# Truthy/Falsy要背


開頭盡量改寫成布林值

Ex

const count=0
count && 123

改寫如下

count !== 0 && 123`(不等於0)
or
count > 0 && 123
or
!! count && 0 && 123 (強制轉布林)

**&& 邏輯與 (And)真的往下走**

true&&true` 
true

`true&&false` 
false

`true&&1&&'Hello'
'hello'

true && 1 &&-0 && 'hello'
'-0'

|| 邏輯或 (OR)假的往下走

`true||false` 
true

true||true` 
true

`false||false` 
false

0 || NaN || "" || [] || -0 || false
[]

!!(0 || NaN || "" || [] || -0 || false)
true 強制轉布林值

! (not)

# 常數vs變數

常數的值無法再改變
常數可用於複合資料類型(陣列、物件)
不可做指定運算

Ex
`
> const a1=[1,2,3,4]
>
> 如果要改變所有值1的話
>
> a1[0]=9999
> 這不是做指定運算
> 改變大樓裡的住戶,不會改變大樓的地址
> 9999
>
> a1
> (4)[9999,2,3,4]

所以常數是記憶大樓住址的概念 並不是其中的值
常數?變數?誰先 => 常數優先