React 樣式組件/樣式組件 [V5 版本]

Contents

丟棄 CSS 樣式表吧！在 JS 中學習 CSS，使用樣式組件(styled-components)程式庫快速和乾淨地設計 React 組件樣式

從這 2 小時的課程，你會學到

增加你身為一個 React 開發者的價值
使用 CSS-in-JS 樣式組件程式庫轉換或創造新的 React 應用程式
使用更新、更乾淨和更有效的樣式組件方法來樣式化 React 應用程式
運用樣式組件做動畫
採用 props ( (e.g. large / small / primary / secondary Button) )創造組件變化
用主題切換( theme toggle )組件創造不同的主題以應用到一個明與暗的主題
使用谷歌字型實現第三方字型
學習樣式組件可以如何和一般的 React 組件和 React hooks 互動
創建一個以行動優先的響應式佈局

要求

您應該已經知道一些簡單的 ES6 語法，並且已經在使用 React 框架工作了

課程說明

這個課程是 React 開發者的下一個步，他們希望通過拋棄不穩定的 CSS 類別名稱和結構、混亂的 CSS 匯入和 CSS 類別命名衝突與他們的 React 應用程式衝突，而是擁抱最好的 React 應用程式樣式設計方法，並且與 CSS-in-js 樣式組件程式庫一起使用！

這個樣式組件(styled-components )框架可以讓你在 JavaScript 中編寫實際的 CSS。這意味著你可以使用你最喜歡的 CSS 的所有特性，包括(但是不限於)媒體查詢，所有的pseudo-selectors，nesting等。

React 將傳統的view/ view model 方法應用於 web 開發，並將它們合併為一個，同時仍保持程式碼模組化和單一責任。樣式組件可以看作是這個的一個擴充套件，同時將樣式也帶入 JS 檔案。他們都有一對一的關係，所以只要它們是模組化的，將它們結合起來是有意義的。本課程將幫助您理解這種方法的力量，並向您展示如何建構這些組件。

其他學生對這門課程的評價是:

★★★★★ 5/5 stars – “I love this course so much, Tom is very responsive with the student question. No copy paste code, that we know all students doesn’t like it. There’s so many new information and a modern way to write a components, I like it so much and I will implement it to my projects 🙂 Thank you Tom for helping us !” – Kadek Pradnyana

★★★★★ 5/5 stars – “A great introduction to styled components in React. It goes through each of the most common scenarios to help you start building. Excellent course!” – Memo Ramirez

★★★★★ 5/5 stars – “A great intro to the styled-components way of styling React components.” – Ian Taite

★★★★★ 5/5 stars – “I did not know that this is possible. Amazing” (translated) – Alex

目標受眾

使用傳統樣式 CSS 或 SASS 樣式表的 React 開發人員，他們想學習更好更乾淨的方法; 使用 CSS-in-js React 樣式組件庫

講師簡介

Tom Phillips 前端網頁專家和行動開發者 ( 更多講師主講課程介紹 )

多年來，Tom Phillips 一直在英國開發前端網頁和行動應用程式。在這段時間裡，他不得不為初級開發人員準備並教授最新的前端網頁框架的多門課程，並在初級開發人員的早期指導他們。通過這樣做，Tom 找到了有效的方法來教授和打破許多開發人員在嘗試開始新框架時所面臨的常見複雜問題，特別是在這樣一個迅速變化的領域，作為前端網頁開發。現在他把這些方法應用到他的 Udemy 課程中了！

早在 Tom 自己還是個初級開發人員的時候，他很幸運地受到了這個領域專家的指導。這使得他在職涯中得到了迅速的進步，並且在他作為專家的前端開發人員的時候理解和建構了多個大型專案。現在 Tom 正在扮演專家的角色與責任，分享他的知識。通過參加 Tom的一門課程，獲得與 Tom 一樣的指導並在前端網頁開發中快速追蹤你的理解和知識。

英文字幕：有

想要了解如何將英文字幕自動翻譯成中文? 請參考這篇 How-To

點選這個✨優惠連結✨ 課程特價 | Udemy 永久擁有課程 NT330 起( 在電腦瀏覽器登入，點選“優惠連結”後再回想要的課程介紹中點選“報名參加課程”即可取得）
Udemy 現在越來越多課程有中文字幕，請參考 Soft & Share 中文線上課程
手機上點選優惠連結看到的價格比電腦上看到的貴
＄代表當地貨幣, 如在台灣為 NT
點選”報名參加課程”有可能因瀏覽器 cookies 轉久一點或回報錯誤而無法連上，請稍等刷新或重新點選就會出現