React 样式化组件/样式化组件 [V5 版本]

抛弃 CSS 样式表！在 JS 中学习 CSS 以使用样式组件库快速、干净地设置 React 组件的样式

讲师：Tom Phillips

双语IT资源独家Udemy付费课程，独家中英文字幕，配套资料齐全！

用不到1/10的价格，即可享受同样的高品质课程，且可以完全拥有，随时随地都可以任意观看和分享。

你将会学到的

增加你作为 React 开发人员的价值。
使用 CSS-in-JS styled-components 库转换或创建新的 React 应用程序。
使用样式化组件使用更新、更清洁、更高效的方法来样式化 React 应用程序。
使用带有样式组件的动画
使用道具创建组件变体（例如大/小/主要/次要按钮）
使用主题切换组件创建不同的主题以应用明暗主题
使用 Google 字体实现第三方字体
了解样式化组件如何与普通 React 组件和 React 钩子交互
创建移动优先的响应式布局

课程内容

7 个章节 • 29 个讲座 • 总时长 1 小时 58 分钟展开所有章节

介绍及安装4 个讲座 • 12 分钟

样式组件的基础知识5 个讲座 • 20 分钟

构建我们的应用程序 – 布局和标题6 个讲座 • 31 分钟

构建我们的应用程序 – 登录页面5 个讲座 • 29 分钟

带有样式组件和样式主题的变量和主题4 个讲座 • 16 分钟

先进的3 个讲座 • 9 分钟

资源+奖金2 个讲座 • 1 分钟

要求

你应该已经知道一些简单的 ES6 语法并且已经使用过 React 框架。

说明

**将课程更新到 React 样式组件的第 5 版。**

这个样式化组件课程是 React 开发人员的下一步，他们希望通过抛弃易碎的 CSS 类名称和结构、混乱的 CSS 导入和 CSS 类命名与他们的 React 应用程序冲突来增加他们作为前端开发人员的价值，而是想要拥抱使用CSS-in-JS Styled Components 库设计 React 应用程序的最佳方式！

styled-components 框架允许你在 JavaScript 中编写实际的 CSS。这意味着你可以使用你使用和喜爱的 CSS 的所有功能与样式化组件，包括（但不限于）媒体查询、所有伪选择器、嵌套等。

在这个样式化的组件课程中，我们将使用 create-react-app创建一个非常基本的 2 页移动优先应用程序。我们将使用样式化组件来设置整个应用程序的样式，包括应用全局样式、使用 Google 字体实现第三方字体、创建通用的移动优先和响应式布局、通过 props 为组件创建变体（例如大按钮或小按钮)，实现主题切换组件并在“浅色”和“深色”模式之间切换我们的应用程序，以及使用样式组件实现动画。

React 将传统的视图/视图模型方法用于 Web 开发，并将它们合二为一，同时仍然保持代码模块化和单一职责。Styled Components 可以看作是它的扩展，也将样式引入到 JS 文件中。它们都具有一对一的关系，因此只要它们保持模块化，就可以将它们组合起来。这个 React 风格的组件课程将帮助你了解这种方法的强大功能，并向你展示如何构建此类组件。

其他学生对这个 React Styled Components 课程的评价：

5/5 星– “不错的课程，它提高了我对 Styled-components 的理解。” –奥斯本图德

5/5 星– “我喜欢这门对我非常有用的课程，并帮助我最终了解了样式组件的工作原理。毫无疑问，我推荐这门课程，我将回到汤姆的未来课程，他是一位优秀的教练。谢谢你！——亚历克斯·巴甫洛夫

5/5 星– “我非常喜欢这门课程，汤姆对学生的问题非常敏感。没有复制粘贴代码，我们知道所有学生都不喜欢它。有很多新信息和现代方式来编写组件，我非常喜欢它，我会在我的项目中实现它 🙂 谢谢汤姆帮助我们！” – Kadek Pradnyana

5/5 星– “React 中样式化组件的精彩介绍。它通过了每个最常见的场景来帮助你开始构建。非常棒的课程！” –备忘录拉米雷斯

5/5 颗星– “对 React 组件样式化的 styled-components 方式的精彩介绍。” ——伊恩·泰特

5/5 星– “我不知道这是可能的。太棒了”（翻译） –亚历克斯