[React 專案] 台北市健行步道

電腦版

網頁位址：https://juju-chu.github.io/taipei-hiking-remote/
GitHub：https://github.com/juju-chu/taipei-hiking-remote
實作解析：[React 專案] 台北市健行步道 — 實作解析

為何會選擇這個專案？

自己是個喜歡健走的人，但又喜歡探索不同的路徑，意外發現「臺北市資料大平臺」有提供健行步道的資訊，而且還有提供 API。

因此運用 React 搭配 Bootstrap，建出一個能用來查詢健行步道的平台。

邊做邊研究，總花費時間：約 11 小時。

使用了什麼技術？

使用到 React 框架搭配 Bootstrap，串接第三方 API，並能支援 RWD 響應式網站設計 (Responsive Web Design)。

iPhone X

運用 Bootstrap 設計 modal 讓點擊時能跳出完整資訊：

iPad pro

運用 React 的 state 搭配帶有參數的 API，實作搜尋功能：

iPad pro

哪裡花了最多時間？

設計和切版的部分花費較少時間。

在製作搜尋功能時花特別多時間，研究如何使用第三方 API，並設計使用者體驗。

過程中碰到什麼困難？如何克服？

在搜尋完 submit 後發現無法順利得到想要的結果。

透過觀察流程中的 console log，最終發現是因為點擊事件有瀏覽器的預設行為所造成。

只需加 e.preventDefault() 即可避免。