React styled components / styled-components [V5 EDITION]

**将课程更新到 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 星– “我喜欢这门对我非常有用的课程，并帮助我最终了解了 styled-components 的工作原理。毫无疑问，我推荐这门课程，我将回到 Tom 的未来课程，他是一位优秀的教练。谢谢你！——亚历克斯·巴甫洛夫

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

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

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

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