網頁技術實驗室 - 使用 React 來製作書店介面，改寫 Vue 範例！

最近老闆在熟悉跟學 React 中，趁著學習研究的時間，
來看看怎麼把之前 Vue 課程的範例改成 React 的版本跟體驗兩個框架的實作，

這次直播把 Vue 3 轉到 React 時改寫的 Coding 實作，把原本在網頁課程的Vue 博客來範例，改寫成 React Functional Component ，整合使用最近探索的 codesandbox / react functional component / immutability-helper / classNames / react-bootstrap 等功能，課程範例改寫成 react 的版本～提供有興趣的朋友參考，如果有什麼想法或建議歡迎交流。

這次要改寫的原始Vue範例：
https://codepen.io/frank890417/pen/bwrRYM?editors=0010

實作成果：
https://codesandbox.io/s/hopeful-shockley-v33jib

0:00 閒聊
2:30 之前課程 Vue 出來的書店
6:50 Codesendbox 像進階版本的 Codepen
7:07 Add dependencies
7:40 Emmet
8:50 複製之前專案中書籍的資料
9:30 map 出資料
12:30 boostrap & @popperjs
14:10 搜尋功能 在 React 做雙向綁定：useState()
17:00 useEffect() 類似 vue 的 computed
20:11 顯示搜尋結果
21:02 切出 component
22:34 切換顯示優惠價
25:10 畫面上的資料移除
30:15 用 Immutability Helpers 做畫面上的資料移除
34:10 開關優惠價
35:48 如何動態的 toggle 優惠價
40:00 用 Immutability Helpers 的 update 和 $toggle 更新資料狀態
43:46 用 classnames 函式庫做 css 的 toggle
53:58 不是 e.target.value 是用 e.target.checked 抓到 input 的狀態
55:41 用 classnames 和 useState 的差別
58:00 React boostrap
1:03:24 小結
1:05:55 分享React chakra
1:06:29 問答：對於 React 和 Vue 3 的看法
1:08:50 問答：Svelte 也蠻多人在用
1:11:11 問答：Vue 3 script setup
1:13:30 問答：還有在用 pug 嗎
1:17:20 問答：VScode的 Vue 3 setup 範例
1:24:11 宣傳：本週五直播如何在 web 3 用 React 和 NFT 合約做互動
1:25:10 分享：React motion 函式庫
1:25:50 宣傳：一次看懂 JS 的未來
1:27:21 問答：Framer motion 和 React motion 是類似的嗎