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
參加課程 ♥找優惠折扣碼?
也許你會有興趣
- React 前端開發學習地圖
- ★英語學習地圖 – 練好英文是最大的學習槓桿
- 如何找工作學習地圖 – 找工作不要靠運氣！
- 課程討論專區