推薦序
序

[Chapter 1] 了解軟體前後端概念、各式專有名詞與開發流程
Frontend / Backend / MERN / Development Process
一、軟體開發前端與後端概念
二、MERN 開發系統名詞解釋
三、K.o.Booking 實作開發流程圖

[Chapter 2] 架設環境、npm 指令與建立 React App
create-react-app / React App
一、了解並使用 Npm
二、使用 CMD/Terminal 指令
三、了解 React App 資料夾結構

[Chapter 3] SCSS 與 Component 首頁概念圖與 UI 實作
SCSS / CSS / SASS / UI
一、CSS Style Sheet Language 介紹
二、了解產品 Component 配置與 UI 分析
三、Header SearchBar 重點製作

[Chapter 4] useState 介紹與其條件搜尋功能
useState / SearchBar / Calendar / Operator
一、useState hook 與 React Hook
二、製作 Calendar 彈跳視窗
三、&&, ? : 運算子，React 的條件子句
四、搜尋欄資料連動使用者動作
五、製作 Conditon 彈跳視窗
六、製作加減函數 useStateData 運算
七、資料連動 Input onChange 用法

[Chapter 5] 介面訂房網的功能開發與最佳實作
Best Practices / Implementation
一、使用 React 和 Map 方法快速構建迴圈
二、探索 React 中 Map 的高效迴圈
三、獨立模組製作與 React props
四、PostCards 組件 Array.slice 用法
五、熱門產品排行
六、Footer 與全球註冊 Banner

[Chapter 6] Hotels List Page 製作與 Page 分頁資料連接
react-router-dom / Hotels List Page
一、react-router-dom 使用方式
二、useNavigate 分頁的資料連動應用

[Chapter 7] useRef 與 Gsap 介紹 Hotel Page 與 Grid
Hotel Page / CSS Grid / useRef / Animation
一、hotel Page UI 製作
二、CSS Grid 介紹與應用
三、useRef 與 Gsap 介紹
四、撰寫 hover 函數

[Chapter 8] 後端篇章 Node.js API 串接資料庫實作
MongoDB / RestFul API / Node.js
一、了解何謂 API 運作原理與實作
二、MongoDB 連接本地
三、async function 與 try & catch 實作

[Chapter 9] API 串接、建立 Schema 與了解 CRUD
Api / Schema / CRUD
一、API route 連接express.router 運用
二、了解CRUD 並上傳與第一筆資料
三、了解insomnia 與如何實作

[Chapter 10] 讀取、更新、修改、刪除 API 建立
API / CRUD / insomnia
一、insomnia 環境變數建置
二、( req, res, next ) next 等多種用法
三、apiControllers 不斷分類（Controllers）

[Chapter 11] Room / Hotel 非關聯式資料串接應用
Room / Hotel / NoSQL Data
一、完成 hotelsApi，抓取所有住宿資料
二、RoomApi 的 NoSql 類串接資料方式

[Chapter 12] User 註冊、登入常見會員制 API
useApiRoutes / AuthApiRoutes
一、完成 userApi 註冊、登入並為授權做準備
二、認識 bcrypt 並加密使用者密碼
三、API 註冊時的一些條件實作
四、後台管理會員 CRUD 會員資料

[Chapter 13] 會員制授權認識 Cookie 與 JWT
Cookie / JWT / Token / Admin
一、JWT（_____JSON Web Token）介紹
二、loginAPI 登入產生Token 與 Cookie 紀錄
三、使用 Token 來處理 API 授權動作 jwt.verify
四、callback function 名稱解釋
五、token 權限在 insomnia 測試

[Chapter 14] 前、後端串接 ClientSide API 與 UI 介面連接
Connect / Axios / useEffect / Proxy
一、API 與 ClientSide 網站 UI 介面連接
二、全端動態網站啟動流程
三、axios 介紹，前端串接後端 API
四、useEffect 介紹與使用
五、proxy 與同源設置與全端串接

[Chapter 15] NoSQL 資料爬梳應用 Filter 與 Query
Filter / Query / Req / Res
一、統計資料庫的幾間住宿 API 串接與爬梳條件
二、req.query 與 Array 排列查詢
三、串接新 API 並再次練習 props 傳入資料
四、產品排行榜 API 應用

[Chapter 16] Context API 教學實作前台建立會員制
ContextAPI / Reducer / Auth
一、認識 Context API 並建立會員制
二、Context API 與 Redux 差異
三、串接 login 與 register 頁面 LoginContextApi
四、setError 設置註冊等錯誤回報訊息
五、建立 LoginContextApi 與其應用
六、了解 Reducer 在 Context 的作用
七、switch case 解釋與設立 constants 用意
八、JSON.stringify 與 JSON.parse

[Chapter 17] Reducer 與 dispatch 應用
Provider / Reducer / Dispatch
一、Context API 的 dispatch 操作了解
二、利用 dispatch 上傳 User 資料
三、dispatch 抓取 user 資料
四、optionsContextApi 設立，儲存用戶操作
五、資料存於 localStorage 的契機
六、dispatch 我們使用者行為操作資料

[Chapter 18] SearchItem 搜尋欄查詢真實資料的實作
Query / useFetch / SearchItem / Skeleton Loading
一、query 的各種混合應用
二、useFetch 的使用
三、拆分 SearchItem 框架資料組成
四、設立 fetchDataUrl 的 state
五、skeleton loading 的 ListItem 載入畫面
六、最高價格與最低價格搜尋 API

[Chapter 19] Reservation 儲存客戶行為
optionsContext / Reservation
一、將真實飯店資料連動到 hotelPage
二、製作空房情況 UI 設計與串接 room 顯示資料
三、顯示訂房時間與相關人數條件

[Chapter 20] 建立 Order 訂單完成訂房手續
Order / Reservation / Mui / FramerMotion
一、訂房操作限制，查詢時間防呆機制
二、Mui 與 framerMotion 特效使用
三、設立新的 model，Order 訂房下單準備
四、insomnia 的 Order API 測試
五、使用 axios 回到前台 UI 做串接
六、CheckBox 函數製作，RoomNumber useState

[Chapter 21] 完成訂房功能
Order / Reservation
一、完成訂單的送出 axios.post
二、useState 的 re-render 執行時間與 useEffect 配合
三、new Date 與 getTime 宣告的全域變數問題
四、updatedRoomDates API 上傳日期區間
五、UI 上傳訂房日期並設置同時段不能再訂房
六、完成的下單檢測

推薦序
序

[Chapter 1] 了解軟體前後端概念、各式專有名詞與開發流程
Frontend / Backend / MERN / Development Process
一、軟體開發前端與後端概念
二、MERN 開發系統名詞解釋
三、K.o.Booking 實作開發流程圖

[Chapter 2] 架設環境、npm 指令與建立 React App
create-react-app / React App
一、了解並使用 Npm
二、使用 CMD/Terminal 指令
三、了解 React App 資料夾結構

[Chapter 3] SCSS 與 Component 首頁概念圖與 UI 實作
SCSS / CSS / SASS / UI
一、CSS Style Sheet Language 介紹
二、了解產品 Component 配置與 UI 分析
三、Header SearchBar 重點製作

[Chapter 4] useState 介紹與其條件搜尋功能
useState / SearchBar / Calendar / Operator
一、useState hook 與 React Hook
二、製作 Calendar 彈跳視窗
三、&&, ? : 運算子，React 的條件子句
四、搜尋欄資料連動使用者動作
五、製作 Conditon 彈跳視窗
六、製作加減函數 useStateData 運算
七、資料連動 Input onChange 用法

[Chapter 5] 介面訂房網的功能開發與最佳實作
Best Practices / Implementation
一、使用 React 和 Map 方法快速構建迴圈
二、探索 React 中 Map 的高效迴圈
三、獨立模組製作與 React props
四、PostCards 組件 Array.slice 用法
五、熱門產品排行
六、Footer 與全球註冊 Banner

[Chapter 6] Hotels List Page 製作與 Page 分頁資料連接
react-router-dom / Hotels List Page
一、react-router-dom 使用方式
二、useNavigate 分頁的資料連動應用

[Chapter 7] useRef 與 Gsap 介紹 Hotel Page 與 Grid
Hotel Page / CSS Grid / useRef / Animation
一、hotel Page UI 製作
二、CSS Grid 介紹與應用
三、useRef 與 Gsap 介紹
四、撰寫 hover 函數

[Chapter 8] 後端篇章 Node.js API 串接資料庫實作
MongoDB / RestFul API / Node.js
一、了解何謂 API 運作原理與實作
二、MongoDB 連接本地
三、async function 與 try & catch 實作

[Chapter 9] API 串接、建立 Schema 與了解 CRUD
Api / Schema / CRUD
一、API route 連接express.router 運用
二、了解CRUD 並上傳與第一筆資料
三、了解insomnia 與如何實作

[Chapter 10] 讀取、更新、修改、刪除 API 建立
API / CRUD / insomnia
一、insomnia 環境變數建置
二、( req, res, next ) next 等多種用法
三、apiControllers 不斷分類（Controllers）

[Chapter 11] Room / Hotel 非關聯式資料串接應用
Room / Hotel / NoSQL Data
一、完成 hotelsApi，抓取所有住宿資料
二、RoomApi 的 NoSql 類串接資料方式

[Chapter 12] User 註冊、登入常見會員制 API
useApiRoutes / AuthApiRoutes
一、完成 userApi 註冊、登入並為授權做準備
二、認識 bcrypt 並加密使用者密碼
三、API 註冊時的一些條件實作
四、後台管理會員 CRUD 會員資料

[Chapter 13] 會員制授權認識 Cookie 與 JWT
Cookie / JWT / Token / Admin
一、JWT（_____JSON Web Token）介紹
二、loginAPI 登入產生Token 與 Cookie 紀錄
三、使用 Token 來處理 API 授權動作 jwt.verify
四、callback function 名稱解釋
五、token 權限在 insomnia 測試

[Chapter 14] 前、後端串接 ClientSide API 與 UI 介面連接
Connect / Axios / useEffect / Proxy
一、API 與 ClientSide 網站 UI 介面連接
二、全端動態網站啟動流程
三、axios 介紹，前端串接後端 API
四、useEffect 介紹與使用
五、proxy 與同源設置與全端串接

[Chapter 15] NoSQL 資料爬梳應用 Filter 與 Query
Filter / Query / Req / Res
一、統計資料庫的幾間住宿 API 串接與爬梳條件
二、req.query 與 Array 排列查詢
三、串接新 API 並再次練習 props 傳入資料
四、產品排行榜 API 應用

[Chapter 16] Context API 教學實作前台建立會員制
ContextAPI / Reducer / Auth
一、認識 Context API 並建立會員制
二、Context API 與 Redux 差異
三、串接 login 與 register 頁面 LoginContextApi
四、setError 設置註冊等錯誤回報訊息
五、建立 LoginContextApi 與其應用
六、了解 Reducer 在 Context 的作用
七、switch case 解釋與設立 constants 用意
八、JSON.stringify 與 JSON.parse

[Chapter 17] Reducer 與 dispatch 應用
Provider / Reducer / Dispatch
一、Context API 的 dispatch 操作了解
二、利用 dispatch 上傳 User 資料
三、dispatch 抓取 user 資料
四、optionsContextApi 設立，儲存用戶操作
五、資料存於 localStorage 的契機
六、dispatch 我們使用者行為操作資料

[Chapter 18] SearchItem 搜尋欄查詢真實資料的實作
Query / useFetch / SearchItem / Skeleton Loading
一、query 的各種混合應用
二、useFetch 的使用
三、拆分 SearchItem 框架資料組成
四、設立 fetchDataUrl 的 state
五、skeleton loading 的 ListItem 載入畫面
六、最高價格與最低價格搜尋 API

[Chapter 19] Reservation 儲存客戶行為
optionsContext / Reservation
一、將真實飯店資料連動到 hotelPage
二、製作空房情況 UI 設計與串接 room 顯示資料
三、顯示訂房時間與相關人數條件

[Chapter 20] 建立 Order 訂單完成訂房手續
Order / Reservation / Mui / FramerMotion
一、訂房操作限制，查詢時間防呆機制
二、Mui 與 framerMotion 特效使用
三、設立新的 model，Order 訂房下單準備
四、insomnia 的 Order API 測試
五、使用 axios 回到前台 UI 做串接
六、CheckBox 函數製作，RoomNumber useState

[Chapter 21] 完成訂房功能
Order / Reservation
一、完成訂單的送出 axios.post
二、useState 的 re-render 執行時間與 useEffect 配合
三、new Date 與 getTime 宣告的全域變數問題
四、updatedRoomDates API 上傳日期區間
五、UI 上傳訂房日期並設置同時段不能再訂房
六、完成的下單檢測

推薦序
序

[Chapter 1] 了解軟體前後端概念、各式專有名詞與開發流程
Frontend / Backend / MERN / Development Process
一、軟體開發前端與後端概念
二、MERN 開發系統名詞解釋
三、K.o.Booking 實作開發流程圖

[Chapter 2] 架設環境、npm 指令與建立 React App
create-react-app / React App
一、了解並使用 Npm
二、使用 CMD/Terminal 指令
三、了解 React App 資料夾結構

[Chapter 3] SCSS 與 Component 首頁概念圖與 UI 實作
SCSS / CSS / SASS / UI
一、CSS Style Sheet Language 介紹
二、了解產品 Component 配置與 UI 分析
三、Header SearchBar 重點製作

[Chapter 4] useState 介紹與其條件搜尋功能
useState / SearchBar / Calendar / Operator
一、useState hook 與 React Hook
二、製作 Calendar 彈跳視窗
三、&&, ? : 運算子，React 的條件子句
四、搜尋欄資料連動使用者動作
五、製作 Conditon 彈跳視窗
六、製作加減函數 useStateData 運算
七、資料連動 Input onChange 用法

[Chapter 5] 介面訂房網的功能開發與最佳實作
Best Practices / Implementation
一、使用 React 和 Map 方法快速構建迴圈
二、探索 React 中 Map 的高效迴圈
三、獨立模組製作與 React props
四、PostCards 組件 Array.slice 用法
五、熱門產品排行
六、Footer 與全球註冊 Banner

[Chapter 6] Hotels List Page 製作與 Page 分頁資料連接
react-router-dom / Hotels List Page
一、react-router-dom 使用方式
二、useNavigate 分頁的資料連動應用

[Chapter 7] useRef 與 Gsap 介紹 Hotel Page 與 Grid
Hotel Page / CSS Grid / useRef / Animation
一、hotel Page UI 製作
二、CSS Grid 介紹與應用
三、useRef 與 Gsap 介紹
四、撰寫 hover 函數

[Chapter 8] 後端篇章 Node.js API 串接資料庫實作
MongoDB / RestFul API / Node.js
一、了解何謂 API 運作原理與實作
二、MongoDB 連接本地
三、async function 與 try & catch 實作

[Chapter 9] API 串接、建立 Schema 與了解 CRUD
Api / Schema / CRUD
一、API route 連接express.router 運用
二、了解CRUD 並上傳與第一筆資料
三、了解insomnia 與如何實作

[Chapter 10] 讀取、更新、修改、刪除 API 建立
API / CRUD / insomnia
一、insomnia 環境變數建置
二、( req, res, next ) next 等多種用法
三、apiControllers 不斷分類（Controllers）

[Chapter 11] Room / Hotel 非關聯式資料串接應用
Room / Hotel / NoSQL Data
一、完成 hotelsApi，抓取所有住宿資料
二、RoomApi 的 NoSql 類串接資料方式

[Chapter 12] User 註冊、登入常見會員制 API
useApiRoutes / AuthApiRoutes
一、完成 userApi 註冊、登入並為授權做準備
二、認識 bcrypt 並加密使用者密碼
三、API 註冊時的一些條件實作
四、後台管理會員 CRUD 會員資料

[Chapter 13] 會員制授權認識 Cookie 與 JWT
Cookie / JWT / Token / Admin
一、JWT（_____JSON Web Token）介紹
二、loginAPI 登入產生Token 與 Cookie 紀錄
三、使用 Token 來處理 API 授權動作 jwt.verify
四、callback function 名稱解釋
五、token 權限在 insomnia 測試

[Chapter 14] 前、後端串接 ClientSide API 與 UI 介面連接
Connect / Axios / useEffect / Proxy
一、API 與 ClientSide 網站 UI 介面連接
二、全端動態網站啟動流程
三、axios 介紹，前端串接後端 API
四、useEffect 介紹與使用
五、proxy 與同源設置與全端串接

[Chapter 15] NoSQL 資料爬梳應用 Filter 與 Query
Filter / Query / Req / Res
一、統計資料庫的幾間住宿 API 串接與爬梳條件
二、req.query 與 Array 排列查詢
三、串接新 API 並再次練習 props 傳入資料
四、產品排行榜 API 應用

[Chapter 16] Context API 教學實作前台建立會員制
ContextAPI / Reducer / Auth
一、認識 Context API 並建立會員制
二、Context API 與 Redux 差異
三、串接 login 與 register 頁面 LoginContextApi
四、setError 設置註冊等錯誤回報訊息
五、建立 LoginContextApi 與其應用
六、了解 Reducer 在 Context 的作用
七、switch case 解釋與設立 constants 用意
八、JSON.stringify 與 JSON.parse

[Chapter 17] Reducer 與 dispatch 應用
Provider / Reducer / Dispatch
一、Context API 的 dispatch 操作了解
二、利用 dispatch 上傳 User 資料
三、dispatch 抓取 user 資料
四、optionsContextApi 設立，儲存用戶操作
五、資料存於 localStorage 的契機
六、dispatch 我們使用者行為操作資料

[Chapter 18] SearchItem 搜尋欄查詢真實資料的實作
Query / useFetch / SearchItem / Skeleton Loading
一、query 的各種混合應用
二、useFetch 的使用
三、拆分 SearchItem 框架資料組成
四、設立 fetchDataUrl 的 state
五、skeleton loading 的 ListItem 載入畫面
六、最高價格與最低價格搜尋 API

[Chapter 19] Reservation 儲存客戶行為
optionsContext / Reservation
一、將真實飯店資料連動到 hotelPage
二、製作空房情況 UI 設計與串接 room 顯示資料
三、顯示訂房時間與相關人數條件

[Chapter 20] 建立 Order 訂單完成訂房手續
Order / Reservation / Mui / FramerMotion
一、訂房操作限制，查詢時間防呆機制
二、Mui 與 framerMotion 特效使用
三、設立新的 model，Order 訂房下單準備
四、insomnia 的 Order API 測試
五、使用 axios 回到前台 UI 做串接
六、CheckBox 函數製作，RoomNumber useState

[Chapter 21] 完成訂房功能
Order / Reservation
一、完成訂單的送出 axios.post
二、useState 的 re-render 執行時間與 useEffect 配合
三、new Date 與 getTime 宣告的全域變數問題
四、updatedRoomDates API 上傳日期區間
五、UI 上傳訂房日期並設置同時段不能再訂房
六、完成的下單檢測