React js how to add CSS styles 🎨

00:00:00 intro
00:00:20 Button component
00:01:32 external CSS
00:03:25 modular CSS
00:05:51 inline CSS
00:07:30 conclusion
// HOW TO STYLE REACT COMPONENTS WITH CSS
// (not including external frameworks or preprocessors)
// 1. EXTERNAL
// 2. MODULES
// 3. INLINE
#reactjs #javascript #tutorial

[@BroCodez]

// ---------- CSS STYLE SHEET ---------- .button{ background-color: hsl(200, 100%, 50%); color: white; padding: 10px 20px; border-radius: 5px; border: none; cursor: pointer; } // ---------- EXTERNAL ---------- function Button(){ return(Click me); } export default Button // ---------- MODULES ---------- import styles from './Button.module.css' function Button(){ return(Click me); } export default Button // ---------- INLINE ---------- function Button(){ const styles = { backgroundColor: "hsl(200, 100%, 50%)", color: "white", padding: "10px 20px", borderRadius: "5px", border: "none", cursor: "pointer", } return(Click me); } export default Button

[@JourneyNomoneyinvested]

Bro I appreciate you alot, I have one request ONlY one , I really want to see Laravel frame Work with php full course, and creating management system project with mysql laraval html and css This full course would blow the internet as it's the mostly used frame work for developing web system. Make it the next Course in the next days please

[@nemesisxl6736]

I just finished your 8 hours JavaScript course and JavaScript MDN, and I started to learn React, this course came at the right time! I hope you can make React tutorials more frequently though.

[@hunin27]

Hey, thanks bro! Again, it may seem like nothing, but what you are doing is amazing, especially for someone who is learning React like me. Thanks for everything bro. Lots of love from Italy ❤

[@Kersevtech]

Thank you, You been helping us a lot with your tutorials. You are the best Bro!

[@pkpkpkpkpk669]

Thank you for this! One thing I would like to point out for modular css, when you have a multi word class name (card-title, card-text, etc) you must use bracket notation to use the styles: TEXT If you try to access with {styles.card-text} you will get an error. Hope this helps!

[@TheWebboxchannel]

To me this was the most helpful video on this topic. Informative, consise, and quick explanations. Thank you so much ❤

[@vidhyasagargslv1766]

waiting for this video .... hope next video comes fast

[@KosaQDev]

Thank You So Much For Your Videos!

[@balusubramaniam2335]

very informative nice thank you for the video🙂

[@Smurfis]

Thanks for these tutorials me and my brother are trying to do a react project and I feel totally lost when I felt comfortable with html css and js

[@fenix2598]

wow nice

[@hunin27]

Now that I learned all of the ways to put CSS, I can say that I also prefer modules!

[@shivanshuhere]

noice 😁

[@user-vv2sv5sl9q]

great pro

[@razelfluff7125]

Your videos are so helpful! Can you make a video about luau?

[@nazmulhridoy]

😍

[@nikhiltiwari7371]

Please make videos about front end and backend frameworks

[@ChromeandClean]

Hey bro , have you ever thought about doing MATLAB

[@Amfrdluci-iz2yl]

Upload tutorial for tailwind css

[@Delicatamente]

huge thanks!

[@bryanalcantara7021]

fullcourse of react js please

[@AIZEN155]

Although I know React, I enjoy the videos