CSS Styles in React JS | Learn ReactJS

[@DaveGrayTeachesCode]

This short tutorial presents several ways to apply CSS styles to your React components. Applying CSS to JSX can be a little different than applying CSS to HTML. We'll explore applying individual stylesheets per React component, applying one larger stylesheet for the full application, appyling inline CSS in JSX, and look at a popular package for styling components. If you are new to Javascript, I suggest starting with my full 8 hour Javascript tutorial here: kzbin.info/www/bejne/e5eknWyYrN-JkM0

[@himanshugaikwad4998]

This is my 4th video in a row, and im liking ur every videos as i go along. Thnx making for this premium quality content for free, im really loving this series. I have shared it to my friends too. u r amazing Dave, keep up the good works.

[@DaveGrayTeachesCode]

Thank you, Himanshu! 🙏🙏

[@redlense4]

Dave, I really like your tutorials. You explain everything thoroughly. Just subbed. Thanks!

[@DaveGrayTeachesCode]

Thank you!

[@ahmad-murery]

I always appreciate short videos which I can easily find time to watch and get exactly what you're looking for and most importantly require less power (at least for me). There will be a part 2 for CSS in React JS if I'm not mistaken, Thanks Dave,

[@DaveGrayTeachesCode]

Thanks Ahmad. Yes, not too much needed to introduce CSS styles for JSX. This should get beginners going but more could be added in the future. 😃

[@ahmad-murery]

@@DaveGrayTeachesCode Sure, I hope things get better for everyone so we can reach the future safely

[@khaledbenshible2657]

Excellent stuff ,I find this tutorial very helpful thank u indeed

[@DaveGrayTeachesCode]

Great to hear!

[@min0234]

I find this tutorial super helpful and better than some of the udemy courses out there. I appreciate your videos!

[@DaveGrayTeachesCode]

Glad you like them!

[@ghostpieces2362]

Super easy to follow your instruction. Thank you

[@DaveGrayTeachesCode]

You're welcome! 🙏

[@mirlanurzhanov]

You are doing great job thanks!!! Keep going!

[@DaveGrayTeachesCode]

Thank you! 💯

[@anshultamrakar6210]

hey Dave I am currently following your JS course and find it really helpful, Thanks : )

[@DaveGrayTeachesCode]

That's great! Thanks for the feedback and for following my channel. 🙏🚀

[@roshanleembu3017]

Thanks dave!! for the video.☺️🙏❤️

[@DaveGrayTeachesCode]

You're welcome! 🙏

[@midouwebdev2224]

Thanks Dave ! 🙏🏻

[@DaveGrayTeachesCode]

You're welcome! 💯

[@analistadesistemas]

Sir, what's the best CSS practices for a real project?

[@jecajSudbine]

Excellent stuff! If you are developer and you want to learn JS/React, This is the channel for you! Btw, Dave can you make tutorial on how to work with Rsuite and React.

[@DaveGrayTeachesCode]

Thanks for the suggestion - I'll check that out!

[@chandruloganathan3725]

Thanks a lot

[@DaveGrayTeachesCode]

You're welcome!

[@Rajakumar-yg4nc]

Hi Dave, sometimes we declare a variable inside the function scope (just above the return keyword ) but other time we declare outside of the return (just below the import statement) ,what's the difference and how to know where to declare a variable ? time stamp-3:23

[@DaveGrayTeachesCode]

Thanks for asking Raja. I need to see a specific example of where you are declaring a variable just below the import statements and outside of the functional component? The example you linked to shows the headerStyle variable declaration within the functional Header component and above the return statement. This example shows where variables would typically be declared.

[@Rajakumar-yg4nc]

@@DaveGrayTeachesCode thanks for replying, we do declare variable outside of the component , I have doubt that how to know when to declare outside or when to declare inside

[@DaveGrayTeachesCode]

@@Rajakumar-yg4nc Thank you. I understand your question. I do not see where a variable is declared outside of a component. Can you give me an example? The example you provided shows declaring the variable inside the component. The import statements in App.js are outside the component.

[@Rajakumar-yg4nc]

Thanks for replying, my question is not relating to the example you took I'm the video , it's a general question that in any .js file in react we can declare variable outside of function or inside too , then how to know where to declare a variable ?

[@DaveGrayTeachesCode]

@@Rajakumar-yg4nc thank you for helping me understand your question. As you can see from my tutorial, I do not declare variables outside of the functional components. If you do, you are creating a global variable. In general, it is best to not do that and keep your declarations inside the scope of the function. This answer applies to not only React, but also to all Javascript. I have a tutorial about understanding scope that may help explain further: kzbin.info/www/bejne/lXacZ4psntt7pMk

[@HaidaryarW]

Thank you for the great tutorials, Dave. I want to add different CSS stylesheets for different component files, but React applies the style from the last added CSS file for all its component files. Besides using the module method (style.module.css) is there another workaround for this?

[@TravinskiyVladislav]

Top

[@jamshidtashkent1976]

[@gundoggydog]

Dude great video, Thanks so much!

[@DaveGrayTeachesCode]

Glad you liked it!