# 1.27 React
###### tags: `React`
## 零、目錄&待辦事項
[TOC]

## 壹、實例-3.輸入出生年月日，判斷是否超過18歲
* 日曆有相容性還有本地化的問題，input type = date safari瀏覽器不適用
* 用react-datepicker套件，安裝他吧!
* airbnb、螞蟻金服也有出日期的套件

## 貳、實例-待辦事項(Todo MVC)
### 一、補充：keypress、keydown差異
* KeyPress: 英數字(有字元)才會觸發
* KeyDown: 任何按鍵都會
* Enter比較特別，因為會跳一行，其實也是有字元

1. [比較 keydown, keypress, keyup 的差異](https://medium.com/@yitailin/%E6%AF%94%E8%BC%83-keydown-keypress-keyup-%E7%9A%84%E5%B7%AE%E7%95%B0-4e873ba17e81)
2. [Key and Character Codes vs. Event Types](https://www.w3.org/2002/09/tests/keys.html?)
3. [從 React 原始碼看 keyPress 與 keyDown 事件](https://blog.techbridge.cc/2019/03/23/react-keyboard-event/)

### 二、props的傳遞只會傳一層，父母層的props不會直接給孫子女層，子女層要再傳一次才會到孫子女層

## 參、HTML碼轉成JSX語法注意事項 #10

[github的issue10](https://github.com/eyesofkids/mfee11-react/issues/10)

## 肆、把專案加入CSS支援

[上課講義](https://github.com/eyesofkids/mfee11-react/blob/main/%E6%95%99%E6%9D%90/0127/cra-scss-bootstrap4.md)

1. 按照講義步驟安裝node-sass、bootstrap套件、更改檔名
2. bootstrap有jquery的動態效果，react沒有jquery，所以動態效果要另外安裝套件(開合、輪播都不行)
3. 下圖的src/style指的是styles內的custom.css


4. 把class換成className、有行內式的css要轉換成物件值的寫法
[github的issue10](https://github.com/eyesofkids/mfee11-react/issues/10)