iT邦幫忙

鐵人檔案

2024 iThome 鐵人賽
回列表
Modern Web

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

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

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

Day 1 : 專案介紹

自我介紹 大家好,我是正在就讀國北教大玩遊所碩士一年級的學生,本次鐵人賽我將要製作一個簡單的旅遊規劃網站,在這30天我會使用Vite作為React本地開發的伺服...

2024-09-14 ‧ 由 ntuedtd113 分享
DAY 2

Day 2 :環境建置

搭建一個Vite項目 在開始之前,先附上Vite的官網,關於Vite的詳細資訊,有興趣可以點進去查閱!Vite | Next Generation Fronte...

2024-09-15 ‧ 由 ntuedtd113 分享
DAY 3

Day 3 : 常用的Git指令

今天要來說明如何在終端機下Git指令讓我們可以把本地端的程式碼上傳至Github上,另外也會補充幾個在vscode中實用的版本管理延伸模組,那我們就開始吧! 步...

2024-09-16 ‧ 由 ntuedtd113 分享
DAY 4

Day 4 :Galileo AI

Galileo AI 在生成設計方面,Galileo AI具有Text to UI以及Image to UI兩種方式. 另外,不管是Text to UI或Ima...

2024-09-17 ‧ 由 ntuedtd113 分享
DAY 5

Day 5 : Uizard AI

Uizard Uizard提供4種生成設計的方式,每種都可以選擇要生成電腦、平板或是手機版本的.其中start from screenshot是要課金才能使用的...

2024-09-18 ‧ 由 ntuedtd113 分享
DAY 6

Day 6: UI定稿及設計Sitemap

在經過Day 4以及Day 5生成的畫面後,我決定以Galileo AI 為參考模板,直接將Galileo AI複製至Figma.並且進行修改,雖然我不是專業U...

2024-09-19 ‧ 由 ntuedtd113 分享
DAY 7

Day 7 :React Components概念

模組化開發 為什麼需要模組化?對我而已,模組化開發的核心概念就是「化繁為簡」.什麼意思呢?以下舉幾個模組化開發的特點: 重複使用性:我們可以將一個看似大而冗長...

2024-09-20 ‧ 由 ntuedtd113 分享
DAY 8

Day 8 :在React中使用CSS Module

CSS 框架 運有CSS框架有非常多的好處,最顯而易見地就是提供了許多現成的格式元件、類別,幫助提升開發效率.常見的css框架有Bootstrap、Tailwi...

2024-09-21 ‧ 由 ntuedtd113 分享
DAY 9

Day 9 :在React使用元件參數props

元件參數props props是React提供的物件,讓我們可以將父元件的資料傳遞給子元件.props能傳遞的資料類型包含字串、數值、陣列、物件,而要特別強調的...

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

Day 10 :JSON資料處理

JSON的架構 JSON(JavaScript Object Notation)顧名思義,基本上就是 JavaScript 的物件形式,可以在 JSON 之內加...

2024-09-23 ‧ 由 ntuedtd113 分享