鐵人檔案
在這30天會使用Vite作為React本地開發的伺服器，並且使用UI生成式工具來產出視覺稿，接著會使用Ant Design來協助完成畫面切版，並在過程中熟悉React的開發技能，其中會藉由建立自己的行程清單以及操作自製地圖瀏覽景點等功能來帶大家了解如何進行狀態變數的管理，也會嘗試串氣象局的API，最後，再將專案部署至Vercel上．整個系列會涵蓋很多內容，而其中有很多知識點要獨立成一個完整30天的系列也都不是問題，所以本次鐵人賽主要針對重點做說明，並盡量說明詳細，若有說明不全的地方還請見諒．
Grid設計理念 Grid排版觀念-1 在Grid排版的系統中，是基於行(row)以及(col)來定義資訊區塊的，大致的工作原理如下： 通過row在水平方向建...
React Router React Router 是一個專門用於 React 應用中的路由管理庫。它允許你在SPA中輕鬆地設定多個不同的頁面，並根據 URL...
今天我們要來實作如何在左側垂直導航欄中使用 NavLink 來切換不同的頁面， 1. 安裝 react-router-dom 延續昨天的內容，如果還沒安裝re...
這篇文章將指導您如何在 React 應用中創建一個可收合的導航欄。該導航欄在縮合時僅顯示圖標，展開時顯示完整的圖標和標題，提升使用者體驗。 目標 我們的目標是實...
目標 在這篇教學中，我們將學習如何在 React 應用中使用 Ant Design 的 FloatButton 元件來實現點擊導航到一個新的頁面。在這個範例中，...
計畫趕不上變化，最後15天的標題與內容會依情況做更改，在這裡先跟各位說聲抱歉。那回歸正題，說到旅遊網站那肯定少不了地圖吧，但現在許多圖API都是需要付錢的而且要...
昨天我們介紹了基本的Leaflet用法，今天我們要把JSON檔中的景點資訊匯入到MapItem中，那這邊先確認JSON檔景點資訊中都有包含經緯度的資訊(posi...
目前在地圖中可以看到，許多景點的Marker，但點擊後只會出現簡單的地名而已，這樣看起來非常的單調，在今天，我們想把這個Marker的彈跳視窗進行美化。 1.將...
在購物網站、瀏覽器、地圖等等地方搜尋欄是隨處可見的東西，在這邊我們要教大家如何在地圖中利用Antd的AutoComplete來實踐搜尋功能。當我們按下enter...
在現代前端應用程式中，當資料流變得複雜時，狀態管理變得非常重要。Redux是一個流行的JavaScript狀態管理工具，它讓應用的狀態管理變得可預測且易於維護。...
