技術 【Day27】ChatGPT請教教我：React進階（五）- Style管理！styled-components！

各位，從Day1至今為止，我們討論前端內容或React內容的時候幾乎沒有討論到要怎麼處理元件的樣式 （Style）只在Day6輕描淡寫的提到css檔引入，以及在...

技術 Day 23 - 為什麼要用 Styled-components

前言 今天要來討論比較不一樣的主題，因為還是以 React 生態系為主，經常會用到元件化的開發方式，常常把關注點放在 HTML 與 JS 如何搭配，卻比較少討論...

技術 [Day 27 - 小試身手] Todolist with React (2)

在上一章Todolist with React (1)，建立了專案環境、並且拆離 UI 設定好所有 Component 後，現在就讓我們使用套件 Styled...

技術 DAY25-問答頁面設計

前言： 幾個基本的頁面都設計得差不多啦～這次的挑戰也快接近尾聲了！今天就讓阿森來介紹一個有點小特效的問答頁面要怎麼寫吧！ 效果： 可以看到當我們滑下來的時候...

技術 [Day 24 - Modern CSS] 在JS中寫CSS，神套件Styled-components

要如何在 React 中撰寫 CSS，為元素添加樣式？目前的方法有 Inline-Style、CSS Modules...，其中一個方法就是很多人使用的 Sty...

技術 DAY24-資訊卡頁面設計

前言： 昨天我們介紹了一個普通的資訊頁面是如何完成的，今天我們要來介紹另一個很常用到的頁面種類，資訊卡頁面！ 那廢話不多說，先來看看效果吧！ 長這樣： 再來...

技術 DAY23-一般頁面設計

前言： 做完網站最基本的導覽功能後，接下來要進入的就是我們的頁面了！在製作頁面的同時，阿森也會善用React的特性，也就是製造出重複利用性高的元件，像是製作一...

技術 DAY16-Style Components

前言： 今天我們要來介紹React裡很強大的一個工具！沒錯就是Style Components！廢話不多說，我們直接開始吧！ 這是什麼鬼東東： Style C...

技術 DAY15-React to React

前言： 上一篇我們講了如何建立你的第一個React網頁，那今天阿森會介紹我們寫網頁會用到怎樣的架構，就讓我們開始吧！ 示範網頁： 這裡就拿我之前寫過的網也來當...

技術 【Day.30】React進階 - Styled-Components: React的CSS解決方案 | 系列總結

(2024/04/06更新) 因應React在18後更新了許多不同的語法，更新後的教學之後將陸續放在 新的blog 中，歡迎讀者到該處閱讀，我依然會回覆這邊的...

技術 Day 23：批改系統網頁 (5) - 利用 styled-components 與 Bootstrap 美化網頁

昨天我們成功地從資料管理系統拉取了資料放在網頁上顯示，但由於目前的網頁實在還是太醜，再繼續將其他資料抓下來之前，就讓我們先來將網頁美化一下吧！ CSS 語言...

達標好文 技術 [Day 15 - 即時天氣] 就是這個畫面 - 使用 Emotion 為組件增添 CSS 樣式

感謝 iT 邦幫忙與博碩文化，本系列文章已出版成書「從 Hooks 開始，讓你的網頁 React 起來」，首刷版稅將全額贊助 iT 邦幫忙鐵人賽，歡迎前往購書...