[React 專案] 台北市健行步道 — 實作解析
這篇要來分享我是如何從無到有設計並實作出「台北市健行步道」。
網頁位址：https://juju-chu.github.io/taipei-hiking-remote/
GitHub：https://github.com/juju-chu/taipei-hiking-remote
心得文：[React 專案] 台北市健行步道
邊做邊研究，總花費時間：約 11 小時。
Components 規劃
先將 Components 規劃好後，就能從主頁 Hiking.js 開始製作：
其中四個組件各自實作在不同的 js 檔：
- Header.js
- Search.js
- Paths.js
- Pagination.js
切版
直接套用 Boostrap 4 切版。
自己當 UI 設計師，所以加上調整造型和色彩選擇，用一個早上完成。
API 串接（useState, useEffect）
在 Paths.js 需要串接第三方 API 取得健行步道的資料，資料來源：臺北市資料大平臺。
在最外層 Hiking.js 的 useEffect 用非同步的方式擷取資料：
＊使用到 React 的 hook：useState 和 useEffect，需 import 進來。
在另一個檔案設定 API 資訊，方便維護：
若需要更改主機位址，或是更改一面想呈現的路徑數（PATHS_PER_PAFE），都直接在這邊修改。
有關於 API 能下的參數，是參照 臺北市資料大平臺 網站內的說明。
Props 資料給子元件
讀取到的資料用 props 的方法，傳遞給子元件 <Paths> 和 <Pagination>：
Paths.js 收到後，整理好資料再往下傳給子元件 <Path>：
Modal — 點擊跳出完整資訊
運用 useState 更改資料 show 的狀態：
搜尋功能
接收從父元件 Hiking.js 傳來的兩個 useState：
在子元件 Search.js 的紅色框框是與 input 元素的值連動，綠色框框是使用者按下「送出」後執行：
＊在 React 必須明確地呼叫 preventDefault 才能避免點擊事件的預設行為。
詳細說明參考：[官網學 React] Docs：事件處理
當執行父元件傳遞下來的兩個 props，更改了 page 和 keyword 的值，讓 useEffect 的第二個參數 dependencies 被改變了，因此會驅動父元件的 useEffect，重新呼叫 API 讀取資料：
頁碼
父元件 Hiking.js 傳遞資源給子元件 Pagination.js：
子元件 Pagination.js 收到 props 後，計算出總頁數（pageNumber）和頁碼表（pageList）：
點擊頁碼時，運用父元件傳來的 setPage，更改父元件的 page 資訊讓畫面和頁碼都刷新：
RWD
運用 flexbox 讓畫面隨著 viewport 尺寸而流動：
CSS 使用 inline-style
完成！
從無到有的運用 React 搭配 Bootstrap 實作出的一個小專案。
還有可以繼續優化的地方，例如等待第三方 API 讀取資料的時候可以設計 loading 的過場。
使用者體驗的部分還有很多可以再優化。