iT邦幫忙

2026 iThome 鐵人賽

DAY 5
0

今天主要學習如何使用 CSS Style 優化 React App 的介面,讓原本簡單無趣的版面變得更加豐富。
我主要調整了配色、間距、圓角、框線、按鈕以及 Hover 互動效果。
https://ithelp.ithome.com.tw/upload/images/20260906/20183949bXFRoTEgaF.jpg
https://ithelp.ithome.com.tw/upload/images/20260906/20183949mry8bpUooy.jpg
但其實我對React 的畫面是怎麼產生的也不是很清楚,於是我問AI我該怎麼看哪些程式碼?
才了解…
React 的畫面主要寫在 return (...) 裡面,它使用 JSX 來描述網頁結構
把 JSX 想成「HTML + JavaScript」:

UI 美化不只是改顏色,而是透過尺寸、間距、圓角、框線、陰影與互動效果,讓介面更容易使用,也更有完整 App 的感覺。
下面是我第五天的成果展示:
https://ithelp.ithome.com.tw/upload/images/20260906/20183949lOt4rO6RoZ.jpg


上一篇
Day 4|加入表單防呆與分類標籤
下一篇
Day 6|從資料保存到 Bug 排查:記帳 App 的問題解決
系列文
Vibe Coding 實戰手冊:30 天打造具備預算控管與數據視覺化的 React 記帳應用9
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言