|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/react-styled-components/
课程评论：没有评论
**课程名称：** React styled components / styled-components [V5 EDITION] **课程概述：** 本课程已更新至 styled-components v5 版本，专为希望提升前端开发技能的 React 开发者设计。通过学习 styled-components，你可以告别容易出错的 CSS 类名和结构、混乱的 CSS 导入以及 CSS 类名冲突，转而拥抱 styled-components 这个 CSS-in-JS 库，它是 React 应用的最佳样式解决方案。 styled-components 允许你在 JavaScript 中直接编写 CSS，这意味着你可以使用 CSS 的各种特性，如媒体查询、伪选择器、嵌套等。 在本课程中，我们将使用 `create-react-app` 创建一个基础的两页移动优先应用程序。我们将全程使用 styled-components 进行样式设计，包括： * 应用全局样式 * 使用 Google Fonts 集成第三方字体 * 创建通用的移动优先和响应式布局 * 通过 props 创建组件变体（例如，大/小按钮） * 实现主题切换组件，在“浅色”和“深色”模式之间切换应用 * 使用 styled-components 实现动画效果 React 将传统的视图/视图模型方法融为一体，同时保持代码的模块化和单一职责。styled-components 可以看作是对 React 的扩展，将样式也引入到 JS 文件中。它们之间存在一对一的关系，因此将它们结合起来是合乎逻辑的，前提是保持代码的模块化。 本课程将帮助你理解这种方法的强大之处，并展示如何构建此类组件。 **其他学员评价：** * 5/5 星 - “很棒的课程，它加深了我对 Styled-components 的理解。” - Osborne Tunde * 5/5 星 - “我非常喜欢这门课，它对我极其有用，帮助我最终理解了 styled-components 的工作原理。毫无疑问，我推荐这门课程，并且我还会继续学习 Tom 的其他课程，他是位杰出的讲师。谢谢！” - Alex Pavlov * 5/5 星 - “我非常喜欢这门课程，Tom 对学生的问题反应非常及时。没有复制粘贴的代码，这是我们所有学生都不喜欢的。课程提供了大量新信息和编写组件的现代化方法，我非常喜欢，并且将在我的项目中实施！谢谢 Tom 的帮助！” - Kadek Pradnyana * 5/5 星 - “对 React 中的 styled components 是一个很棒的介绍。它涵盖了最常见的场景，帮助你开始构建。非常棒的课程！” - Memo Ramirez * 5/5 星 - “这是对 styled-components 样式化 React 组件方式的一个很好的介绍。” - Ian Taite * 5/5 星 - “我真不知道这是可能的。太棒了！” (翻译) - Alex **教学大纲：** 无
**Updated course to version 5 of React styled-components.**This styled-components course is the next step for React developers who want to increase their value as a front-end developer by ditching flaky CSS class names and structures, messy CSS imports and CSS class naming conflicts with their React apps and instead want to embrace the best way of styling React apps, with the CSS-in-JS Styled Components library! The styled-components framework lets you write actual CSS in your JavaScript. This means you can use all the features of CSS you use and love with styled components, including (but by far not limited to) media queries, all pseudo-selectors, nesting, etc.In this styled components course we'll be creating a very basic 2 page mobile-first app using create-react-app. We'll be using styled components to style our entire app, including applying global styles, implementing third party fonts using Google fonts, creating a common mobile-first and responsive Layout, creating variations for components via props (for example a large or small Button), implementing a theme toggle component and switching our app between 'light' and 'dark' mode, as well as implementing animations with styled components.React took the traditional view / viewmodel approach to web development and combined them both into one, while still keeping code modular and single responsibility. Styled Components can be seen as an extension of that, bringing the styling into the JS file as well. They all have one to one relationships, so it makes sense to combine them as long as they're kept modular. This React styled components course will help you understand the power of this approach and show you how to build such components.What other students are saying about this React Styled Components course:5/5 stars - "Nice course, It improved my understanding of Styled-components." - Osborne Tunde5/5 stars - "I loved the course that was extremely useful for me and helped me finally understand how styled-components works. Without any doubt, I recommend this course and I will go back to the future courses of Tom who is an excellent instructor. Thank you!" - Alex Pavlov5/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 Pradnyana5/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 Ramirez5/5 stars - "A great intro to the styled-components way of styling React components." - Ian Taite5/5 stars - "I did not know that this is possible. Amazing" (translated) - Alex
