This tutorial won that for me 🏆 I had issues with most of the stuff you showed and now everything is perfectly clear. What's more you got me motivated so that's another +
Hey Pedro! I am starting to learn react as a complete beginner and your video is helping me more than Udemy’s React course. Just finished the portfolio website following yours and now everything seems to make sense. Keep on doing awesome job. Keep the videos coming. Thanks million
15:56 You dont actually need the '&' symbol over there to show nested components. This is a CSS preprocessor called Scss, and it will automatically detect that you have nested the label inside the button. '&' is for copying the parent class name once again, for selectors like :hover, and :active, which dont work without the parent class name.
5:20 hahaha yes exactly what I was hoping for, just getting started with react and I was reluctant to use styled components due to it all being a string without auto-fill
& is called ampersand 😉 Literature major transitioning into tech. Great job! Thanks for posting. I'm collaborating with a friend and he asked me to use styled components instead of inline styling and now I feel like I can get started.
You can keep the tag, and put a styled div around it. My link. Then in the styled code you use the ".mytag" class selector to address the class and inject the CSS :)
at 20:20 the reason why you have to pass className as props might be because styled components generates random classNames for us when we style a component... So when you styled the Button component, you essentially styled element of html.. and styled component automatically generated a random className for when you created component... Which is why I think this might be the reason you have to de-structure className prop in Button component so we can apply the styles from random className generated by styled components. Hope this helps
I had the same query while watching the video. Thanks. Today I learned something new that after watching a video spend few mins to read through the youtube comments ;)
Thanks for video! Hiw to nest elopement in Styles ,like ul, li, a , hover ? In Sass nesting is easy but I couldn't understand how to do it with Stuled.
Thank you! I prefer styled-components becaause i believe it makes it easier for large companies to divide the work (ux/ui make the components and the frontend devs just use them). But both ways work well!
Well I watched your login with session video but i am getting issue on redirecting to profile dashboard so...I wish u will make solution on redirecting to profile dashboard after login much appreciate till yet.Thank You:-)
In react you can have a promise after the fetch request and use the useHistory hook in react router dom to redirect. I have a video explaining this: ua-cam.com/video/o__czqXJtqk/v-deo.html
mine doesnt work help please. its not reading any of my commands from styled. it also doesnt auto fill elements so im assuming my package is bad but it is definitely installed
to use it, you need to import the font you want into your index.html file. After importing (for example, from google fonts), you can use it anywhere in you app
This is the first guy I've seen in my life with an imac and a mechanical keyboard.
You deserve a million subs for sharing such a great knowledge ☺️
Thank you!
This tutorial won that for me 🏆
I had issues with most of the stuff you showed and now everything is perfectly clear. What's more you got me motivated so that's another +
Great to hear!
Nice job! FYI for anyone interested in what's going on under the hood, React is leveraging the Tagged Literals functionality of JavaScript.
No around the bush, No waste of time, Just Did Perfect Job
Hey Pedro!
I am starting to learn react as a complete beginner and your video is helping me more than Udemy’s React course. Just finished the portfolio website following yours and now everything seems to make sense. Keep on doing awesome job. Keep the videos coming.
Thanks million
Go for it :)
Amazing, so easy to understand! Tested this on typescript with a bit of googling to figure out the interface and all works great! Thanks pedro!
This was the best video explaining how styled components work. THANK YOU!
I'm so grateful because the first video that I see when first time I learn about styled components is yours video, thank you so much
Great to hear!
15:56 You dont actually need the '&' symbol over there to show nested components. This is a CSS preprocessor called Scss, and it will automatically detect that you have nested the label inside the button. '&' is for copying the parent class name once again, for selectors like :hover, and :active, which dont work without the parent class name.
thanks for sharing this!
MAN !!!!! You made it look so easy and ABSOLUTELY UNDERSTANDABLE!!!
Thank you so much. You are the best !!!
Excellent tutorial. I am ready to and already applying styled components to my project.
thank you very much
explained very well, i appreciate you going through the small nuances and giving us reference examples!
Thanks....man...this is what exactly I needed.....these days...you are like a savior in my react learning journey !
it is the easiest and the most clear explanation of style component..thank you bro🙏🙏🙏
Thank you very much! Glad you liked it!
@@PedroTechnologies agree, thank you very much
5:20 hahaha yes exactly what I was hoping for, just getting started with react and I was reluctant to use styled components due to it all being a string without auto-fill
If i need some skill's how to use, Pedro always uploaded already. Your best guide I ever met
Nice rundown of styled components
I agree :)
I love the way you've approached this topic! Well done, bro!
This is what i was looking for thanks mate
Glad I could help
& is called ampersand 😉 Literature major transitioning into tech. Great job! Thanks for posting. I'm collaborating with a friend and he asked me to use styled components instead of inline styling and now I feel like I can get started.
Loved the video. But in case you didn't know, styled-components uses SCSS. that's how it's providing all these extra functionalities.
How can I use the link with styled- Components?
You can keep the tag, and put a styled div around it. My link. Then in the styled code you use the ".mytag" class selector to address the class and inject the CSS :)
you can use that vscode plugin that help you rename your jsx tags
at 20:20 the reason why you have to pass className as props might be because styled components generates random classNames for us when we style a component...
So when you styled the Button component, you essentially styled element of html.. and styled component automatically generated a random className for when you created component...
Which is why I think this might be the reason you have to de-structure className prop in Button component so we can apply the styles from random className generated by styled components. Hope this helps
I had the same query while watching the video. Thanks. Today I learned something new that after watching a video spend few mins to read through the youtube comments ;)
Cheers dude, this is a great introduction to using styled-components. It's helped me a lot!
Seriously, thank you a lot for this video!
This makes code looks so clean
Yess! I absolutely love projects structured using styled components!
Nice, enjoyed your lectures please keep up with the good work.
one of th best video on styeld comp. i realy appriciate your effort
Thanks a lot 😊
So happy I found this channel. 💓
hey Pedro! could you please make a video on testing components? thanks.
Absolutely, will put that in the list!
Hi, thanks for that. How would you approach using CSS variables with Styled Components? So having a '--primary-color' for example
learnt a lot at first go with this tutorial. Kudos Man !
Great video! Very informative!
It's very good. I love Styled Components
Hey great tutorial. What's your opinion on this vs emotion?
So basically it follows the scss syntax to style our components... Right!? 😅😅
It's the best explanation for me, thank you very much!
That's a pure gold knowledge!
Thank you so much, you have answered so many questions I had. Thanks again.
Why styled-components extension didn't work on my project? Can you help me how to fix that?
Explained very well, I appreciate it, keep it up
Awesome video, and most useful so far, thank you man! :D
Glad it helped!
it's a good summary, thanks!
Thanks for video!
Hiw to nest elopement in Styles ,like ul, li, a , hover ?
In Sass nesting is easy but I couldn't understand how to do it with Stuled.
You made it easy...thank you
You're welcome 😊
Great video! Very informative! How would you say styled components compares to using CSS modules?
Thank you! I prefer styled-components becaause i believe it makes it easier for large companies to divide the work (ux/ui make the components and the frontend devs just use them). But both ways work well!
@@PedroTechnologies That makes sense, thanks!
Muito legal. Abriu muito a minha mente. Obrigado!
Thanks! Very useful content. Clear & concise.
really easy to understand and helpful thanks
Glad to hear that!
Clean and understandable! Thank you!
Great to hear!
Awesome! I also use this in every project :)
Very nice. But you need to upload video regarding node-sass scss compile to css.
Thank you! I will take a look at that!
Can you tell me which extendion is used to show the file size next to import statements...
Its called "import cost"
@@PedroTechnologies thanks 🙂
Good tutorial man. Loved it. Some of the concepts remind me of Sass.
best video for beginner
Super helpful, thanks!
Is this what I use for to syle my apps on andriod or ios?
You can use this for react native as well, so yes!
@@PedroTechnologies Thank you so much! Thank you!
Can you make a video with data virtualization such as graph ... with react js
Yes I was already planning on a video on data visualization, so it will come out soon!
Amazing as always, thank you 😊
Thank you!
Thank you so much... definitely subscribing
Amazing video! It helped me a lot!!
Glad you liked it!
Simple and very effective
Excellent.
Super helpful, thanks man!
im really curious how responsiveness can apply to styled components or media querys.
Thank you.
This was super helpful.... 🔥🔥🔥🔥
very nice explanation , thank you very much
which is better withStyles or Styled???
Styled :)
Very nice! it's really simple! Thank you! But what about animations, media queries and browser prefixes?
How do you handle media query on styled component
Well I watched your login with session video but i am getting issue on redirecting to profile dashboard so...I wish u will make solution on redirecting to profile dashboard after login much appreciate till yet.Thank You:-)
In react you can have a promise after the fetch request and use the useHistory hook in react router dom to redirect. I have a video explaining this: ua-cam.com/video/o__czqXJtqk/v-deo.html
mine doesnt work help please. its not reading any of my commands from styled. it also doesnt auto fill elements so im assuming my package is bad but it is definitely installed
very good video, thank you very much for sharing!
I loved the video you are such a good teacher! Can you make a video explaining how can I import fonts and use it in styled componets?
to use it, you need to import the font you want into your index.html file. After importing (for example, from google fonts), you can use it anywhere in you app
Yeah Styled Components is awesome ;)
I love it! I use it in every single project!
@@PedroTechnologies That's great
thnx sir this tutorial is very useful for me
great tutorial i subbed
awesome as always :-)
Thanks again!
Great video, Pedro how old are you?
Thank you! I am 19!
Anyone here can tell what plugin is using to show the size of the npm package ?
first line in 10:43 what is the green text? how i can see this in my code
would you recommend us to use styled components or CSS modules?
Styled Components!
20:42 I was once pulling out my hair for that exact thing why do we even need the className gosh, its just to waste devs' time.
Styled Component is the way people complicates styles using javascript instead of just understand how to make good CSS structures.
Can we use Style components with react-bootstrap?
Definitely he has a blood of legendary bucky roberts.
css in js or css modules which need choose for reactjs ?
Both are good, I like using styled components more!
Awesome ++++++++++++++ 🙂🙂
This is really good
can u share code that could b more helpful and it saves time.......i am happy with ur teaching.
thank you so much.
Always welcome
So good tutorial
Nice
Love the YT clip ! :)
Awesome content
Thanks a lot ❤
why my vscode is not suggesting css code completions?
solution: just added an extension
You rocked
nice bro good to help me