React styled components v5 (2021 edition)
What you'll 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
Course content
- 00:37Important: Before you begin this course
- Preview02:44
- Preview03:55
- Preview05:03
Requirements
- You should already know some simple ES6 syntax and already have worked with the React framework.
Description
**React styled components - COURSE UPDATE MARCH 2020**:
**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 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
Who this course is 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.
Featured review
![Bijay Singh](data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"%3E%3C/svg%3E){kind=avatar}
Instructor
- 4.4 Instructor Rating
- 2,449 Reviews
- 15,838 Students
- 7 Courses
Tom Phillips has been developing front end web and mobile apps in the United Kingdom for numerous years. In that time he has had to prepare and teach multiple courses on the latest cutting edge front end web frameworks to junior developers, as well as mentor them during their early days as junior developers. Through doing this, Tom found efficient methods to teach and break down common complex problems that many developers face when trying to get started with new frameworks, especially in such a rapidly changing field as front end web development. Now he's applying those methods to his Udemy courses!
Way back when Tom himself was a junior developer, he was fortunate enough to have been mentored by experts in the field. This allowed him to rapidly progress in his career and understand and architect multiple large projects in his time as an expert front end developer. Now Tom is passing on the buck and sharing his knowledge. Get the same mentoring that Tom received by enrolling on one of his courses and fast-track your understanding and knowledge in front end web development.