React styled components / styled-components [V5 EDITION]
React styled components / styled-components [V5 EDITION], available at $64.99, has an average rating of 4.69, with 30 lectures, based on 1106 reviews, and has 11186 subscribers.
You will learn about Increase your value as a React developer. Convert or create new React apps using the the CSS-in-JS styled-components library. Style React apps using a newer, cleaner, and more efficient method with Styled Components. Use Animations with styled components Create component variations using props (e.g. large / small / primary / secondary Button) Create different themes with a theme toggle component to apply a light & dark theme Implement third party fonts using Google fonts Learn how styled components can interact with ordinary React components & React hooks Create a mobile-first responsive layout This course is ideal for individuals who are React developers using traditional styling with CSS or SASS stylesheets who want to learn a better and cleaner approach; using the CSS-in-JS React styled-components library. It is particularly useful for React developers using traditional styling with CSS or SASS stylesheets who want to learn a better and cleaner approach; using the CSS-in-JS React styled-components library.
Enroll now: React styled components / styled-components [V5 EDITION]
Summary
Title: React styled components / styled-components [V5 EDITION]
Price: $64.99
Average Rating: 4.69
Number of Lectures: 30
Number of Published Lectures: 30
Number of Curriculum Items: 30
Number of Published Curriculum Objects: 30
Original Price: $19.99
Quality Status: approved
Status: Live
What You Will Learn
- Increase your value as a React developer.
- Convert or create new React apps using the the CSS-in-JS styled-components library.
- Style React apps using a newer, cleaner, and more efficient method with Styled Components.
- Use Animations with styled components
- Create component variations using props (e.g. large / small / primary / secondary Button)
- Create different themes with a theme toggle component to apply a light & dark theme
- Implement third party fonts using Google fonts
- Learn how styled components can interact with ordinary React components & React hooks
- Create a mobile-first responsive layout
Who Should Attend
- React developers using traditional styling with CSS or SASS stylesheets who want to learn a better and cleaner approach; using the CSS-in-JS React styled-components library.
Target Audiences
- React developers using traditional styling with CSS or SASS stylesheets who want to learn a better and cleaner approach; using the CSS-in-JS React styled-components library.
**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 lovewith 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-firstapp 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 Tunde
5/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 Pavlov
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
Course Curriculum
Chapter 1: Introduction and installation
Lecture 1: Important: Before you begin this course! (Github repo etc)
Lecture 2: Introduction to React styled-components
Lecture 3: Udemy ratings & reviews
Lecture 4: Comparing other CSS-in-JS libraries
Lecture 5: Installing styled components + relevant plugins and tips
Chapter 2: Basics of styled-components
Lecture 1: Creating our first React styled-component
Lecture 2: Adding global styles using createGlobalStyle + adding Google fonts
Lecture 3: Conditional styles based on props
Lecture 4: How styled components works "under the hood"
Lecture 5: Bulk styles using the styled-components "css" helper
Chapter 3: Building out our app – layout & header
Lecture 1: Installing react-router-dom and adding our home and login routes
Lecture 2: Creating the page layout and header components
Lecture 3: Styling normal React components + extending existing styled component styles
Lecture 4: Styling links based on routes (with useLocation hook from react-router-dom)
Lecture 5: Media queries using styled components
Lecture 6: useState React hook with menu icon + event handlers with styled-components
Chapter 4: Building out our app – login page
Lecture 1: Creating the Input styled component
Lecture 2: Creating a PasswordInput styled component with the attrs helper
Lecture 3: Implementing the show / hide password toggle
Lecture 4: Adding the buttons and loading / submit state to the form
Lecture 5: Animation with styled components using the keyframes helper (loading spinner)
Chapter 5: Variables & theming with styled components and styled-theming
Lecture 1: Themes and variables basics
Lecture 2: Creating the theme toggle styled component
Lecture 3: Finishing the toggle theme with useContext and ThemeContext
Lecture 4: Updating GlobalStyles and menus to use theme colors
Chapter 6: Advanced
Lecture 1: Referencing a styled component within another styled component
Lecture 2: Interpolating functions to clean up style logic
Lecture 3: Using PropTypes with styled components
Chapter 7: Resources
Lecture 1: Github Repository
Lecture 2: BONUS
Instructors
-
Tom Phillips
Fast-paced information-dense courses for busy web developers -
WebDevEducation (Tom Phillips)
Fast-paced information-dense courses for busy web developers
Rating Distribution
- 1 stars: 4 votes
- 2 stars: 11 votes
- 3 stars: 107 votes
- 4 stars: 382 votes
- 5 stars: 602 votes
Frequently Asked Questions
How long do I have access to the course materials?
You can view and review the lecture materials indefinitely, like an on-demand channel.
Can I take my courses with me wherever I go?
Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!
You may also like
- Top 10 Video Editing Courses to Learn in November 2024
- Top 10 Music Production Courses to Learn in November 2024
- Top 10 Animation Courses to Learn in November 2024
- Top 10 Digital Illustration Courses to Learn in November 2024
- Top 10 Renewable Energy Courses to Learn in November 2024
- Top 10 Sustainable Living Courses to Learn in November 2024
- Top 10 Ethical AI Courses to Learn in November 2024
- Top 10 Cybersecurity Fundamentals Courses to Learn in November 2024
- Top 10 Smart Home Technology Courses to Learn in November 2024
- Top 10 Holistic Health Courses to Learn in November 2024
- Top 10 Nutrition And Diet Planning Courses to Learn in November 2024
- Top 10 Yoga Instruction Courses to Learn in November 2024
- Top 10 Stress Management Courses to Learn in November 2024
- Top 10 Mindfulness Meditation Courses to Learn in November 2024
- Top 10 Life Coaching Courses to Learn in November 2024
- Top 10 Career Development Courses to Learn in November 2024
- Top 10 Relationship Building Courses to Learn in November 2024
- Top 10 Parenting Skills Courses to Learn in November 2024
- Top 10 Home Improvement Courses to Learn in November 2024
- Top 10 Gardening Courses to Learn in November 2024