How To Code With Styled Components and React.js

In this tutorial I am showing you guys how I like to use styled components with my react projects. Please Like and Subscribe for more content.

Code:

Social Links:

New to the channel?

[TryX]

I was watching someone use these a while ago and thought "this looks weird..." This banger tutorial showed me the complete opposite!

[alexanderbraun]

didn't expect to hear about reply all in a styled-components tutorial :)

[gig]

Great tutorial, i saw many tutorial and never got how to use styled components until now... Thanks Bro...

[piotrn]

Man, you're amazing. How long does it took you to be at the point where you are at? I'm also learning by my own to code and trying to find my first dev job asap. Do you also teach people how to build websites from scratch trough courses or something? Cheers!

[jey]

nice!! I would like to see more lectures!

[hamidbakhtiari]

hi!
thank for the video
could you upload 720 30fps too?

and please zoom in a little bit in your IDE, that could help

[jithinolickal]

Your videos are awesome. But it would be good if you zoom in the display while typing/showing code. It too difficult to see them now. Anyway great work man. Waiting for more react+animation+gsap+practice contents.

[akaruzo]

Great as always, thank you so much!

I have a few questions:
1- Inside of the row class styled, I noticed that you typed in align-center; center; .. was it a typo? or it actually does something?

2- I read the styled components docs the other day, and I found that they provide a ThemeProvider for theming and global styling, my question is: which approach is a better one? using ThemeProvider or using an object and pass it down to styles?

[adanrodriguez]

I was told styled components are great but not the tool for complex animations. What’re the best libraries for animating combined with styling?

[adamtak]

So should props be used when changing simple things between buttons or can I use the prop to change the button into a wildly different thing with different sizing, and hover animations? My site now has a login/register/submit buttons and they look really different (my login button has like 30 lines more css than my register because of a cool hover effect I added to it) but they also have some similarities between them. Right now I just have duplicated code and they all have unique component names. I would much prefer to do it this way though since it's cleaner.

[fabianbrash]

Great video I'm new to react, is the .js needed in the import statement? Would "import { color } from ./styles/elements" have worked??

[jarrettkong]

You should check out ThemeProvider, it's definitely the "correct" way to handle colors for this package.

[stackdeveloper]

Is it a good choice if I put all my styled components in a separate styled.js file and import those styled components to my App component ?

[yogendrasaxena]

can't see anything, then whats the point of making this video?