iT邦幫忙

鐵人檔案

2024 iThome 鐵人賽
回列表
Modern Web

30天打造個人簡易旅遊網站 系列

在這30天會使用Vite作為React本地開發的伺服器,並且使用UI生成式工具來產出視覺稿,接著會使用Ant Design來協助完成畫面切版,並在過程中熟悉React的開發技能,其中會藉由建立自己的行程清單以及操作自製地圖瀏覽景點等功能來帶大家了解如何進行狀態變數的管理,也會嘗試串氣象局的API,最後,再將專案部署至Vercel上.整個系列會涵蓋很多內容,而其中有很多知識點要獨立成一個完整30天的系列也都不是問題,所以本次鐵人賽主要針對重點做說明,並盡量說明詳細,若有說明不全的地方還請見諒.

鐵人鍊成 | 共 30 篇文章 | 2 人訂閱 訂閱系列文 RSS系列文
DAY 21

Day 21:使用Redux完成收藏功能

在昨天我們介紹了基本的Redux概念,那今天就要來實現一樣是很常見的收藏功能,當我們按下愛心後,可以在另一個favorite的頁面中看到剛剛加入收藏的景點,那廢...

2024-10-04 ‧ 由 ntuedtd113 分享
DAY 22

Day 22:使用Redux建立一個旅遊行程(一)

昨天我們剛把收藏功能給實現了,對於Redux的使用也可以算是有初步的認識了,今天要來實作建立行程的按鈕,一樣是透過Redux來實現,但這部份我們會分成三天,第一...

2024-10-05 ‧ 由 ntuedtd113 分享
DAY 23

Day 23:使用Redux建立一個旅遊行程(二)

昨天我們先把樣子畫好了,今天就來實踐新增行程這項功能吧,一樣先把slice、reducer等redux相關的東西先定義好,那我們就開始吧! 1.定義Redux架...

2024-10-06 ‧ 由 ntuedtd113 分享
DAY 24

Day 24:使用Redux建立一個旅遊行程(三)

在昨天我們已經可以新增一個行程了,在今天我們要實現把景點加入到該行程的功能,那一開始我們一樣先定義一下redux架構。 1.定義Redux架構: 新增一個add...

2024-10-07 ‧ 由 ntuedtd113 分享
DAY 25

Day 25:Draggable-拖曳畫面中的物件

今天要來實做拖曳畫面中的物件,原本我們預計是使用React-beautiful-dnd這個套件,但由於現在React 18不支援strict mode,拖曳中會...

2024-10-08 ‧ 由 ntuedtd113 分享
DAY 26

Day 26:利用redux-persist暫存瀏覽器資料

Redux-Persist 是一個函式庫,它的主要功能是將 Redux store 中的狀態持久化到本地儲存(如瀏覽器的 localStorage 或sessi...

2024-10-09 ‧ 由 ntuedtd113 分享
DAY 27

Day 27:常用Debug工具分享

在現代的前端開發中,React 和 Redux 已經成為構建複雜應用的主流技術。然而,隨著應用的增大和複雜度的提升,調試和維護代碼變得愈加重要。為此,開發者需要...

2024-10-10 ‧ 由 ntuedtd113 分享
DAY 28

Day 28:將個人網站佈署到Vercel

在現代網頁開發中,將網站快速且高效地部署到互聯網上是每位開發者的目標之一。Vercel 作為一個強大的部署平台,提供了簡單易用的工具,幫助開發者輕鬆地將應用程式...

2024-10-11 ‧ 由 ntuedtd113 分享
DAY 29

Day 29:React Leaflet進階功能簡介

雖然我們功能已經差不多了但也僅此與前端的功能,若要變成更完整的一個專案可以再加入PWA、後端登入、將景點儲存在資料庫等等,又或是將地圖套件做得更完整,礙於時間限...

2024-10-12 ‧ 由 ntuedtd113 分享
DAY 30

Day 30:鐵人賽專案總回顧

今天是鐵人賽的最後一天,在這30天中我們嘗試用了Galileo AI完成設計稿、react建立一個專案、使用antd完成基本畫面的刻板、leaflet放入地圖、...

2024-10-13 ‧ 由 ntuedtd113 分享