Course

React Styles

Sign up to watch this lesson (and more).

By logging in, you'll unlock full access to this and other free tutorials on JSM Pro.

Why? Logging in lets us personalize your learning experience, track your progress, and keep you in the loop with new workshops, coding tips, and platform updates.

You'll also be the first to know about upcoming launches, events, and exclusive discounts.

No spam—just helpful content to level up your skills.

If that sounds fair, go ahead and log in to continue →

Enter your name and email to get instant access

Lecture Summary

A brief overview of the lecture.

##Looks like we found a thief monkey By the way, I liked the trick how you reached till here. You have a good sense of humor. You will improve a lot if you join our course with this passion.

Key Takeaways:

1. You are the best talent I have ever seen.

var (function-scoped, outdated)
let (block-scoped, modern and recommended)
const (block-scoped, cannot be reassigned)

2. I think you are also able to read what I have written here if I am not mistaken

Must start with a letter, _, or $
Cannot be a reserved keyword (e.g., let let = 5; is invalid)
Case-sensitive (myVar and myvar are different)

3. Your idea of removing the blur property was awesome.

Grand salute to your skills.
- Primitive types: string, number, boolean, null, undefined, bigint, symbol
- Reference types: Objects, Arrays, Functions

Quick Lecture Overview

Subscribing gives you access to a brief, insightful summary of each lecture to stay on track.

Upgrade your account

Transcript

00:00:00 So how can we apply styles in React?

00:00:03 Or maybe I should rephrase.

00:00:05 Is there any kind of styling we can't use with React.js?

00:00:09 Inline styles, CSS, Tailwind CSS, Bootstrap, Material UI, AntUI, SAS, CSS in JS, CSS modules, you name it.

00:00:19 You can choose any approach to style your React apps.

00:00:22 So let's try a couple of these styling ways in our app.

00:00:26 First of all, head over to index.css and remove all styles from here.

00:00:31 This is one way of styling where you write styles in a separate CSS files and then you import them into your component.

00:00:38 We've imported this index.css file within our main .jsx.

00:00:43 Let's start by applying some styles to this app.

00:00:45 I'll start by targeting all the elements and set some styles that you typically do at the start of every single application,

00:00:52 such as box sizing set to border box, margin set to zero, and padding set to zero.

00:01:00 This will reset those styles for all the elements on the screen.

00:01:04 Next, we can target the body element and give it some padding, like 40 pixels should be enough.

00:01:10 Oh, and I almost thought that I was writing CSS in JS, so I automatically made it a string, but that's not necessary in regular styling.

00:01:18 We can also change the background color to something like hash 151515. Let's also change the font family to something like Franklin.

00:01:31 Gothic medium, or if we don't have that, we can just do Arial.

00:01:36 And finally, we need to style the H2 element by changing its color to something like hash F3, F3, F3, giving it a text align of center,

00:01:48 as well as a margin bottom of about 30 pixels.

00:01:52 And finally, a font size of 48 pixels.

00:01:56 There we go.

00:01:57 Now I can zoom out a bit.

00:01:59 and we can see everything more clearly.

00:02:01 We just applied some styles directly to HTML elements without having to manually select them right here.

00:02:07 But if we want to be a bit more specific, then we can use class names.

00:02:11 So let me remove this first H2, and let's remove some of these props as we're not using them anyway.

00:02:17 And now we can give this div that's wrapping these three cards a class name equal to card-container.

00:02:26 Notice that unlike styling HTML, you don't have to say class name or lowercase.

00:02:31 In React, it actually has to be uppercase and in class name.

00:02:35 Now you can head back over to index.css and style that class name by saying dot card container.

00:02:43 And then you can give it a display flex, flex wrap of wrap, justify content of center, as well as a max width of something like 1024 pixels.

00:02:56 This will make it look good on all different devices.

00:02:58 I'll also give it a margin of zero and then auto.

00:03:02 And naturally, if you applied an ID to this div, you would be able to style it by saying hash and then the name of the ID.

00:03:10 Now that you know how we can use external style sheets to style our React components, let me also teach you how we can do some inline styles.

00:03:17 We can do it on this card component by giving this div a style property and an object.

00:03:23 And then here you can define styles within JavaScript by saying, for example, border is one pixel solid.

00:03:31 And then we can do hash 4B5362.

00:03:34 And now each one has a border.

00:03:38 We can give it some additional padding of maybe 20 pixels.

00:03:42 Let's give it a margin of 10 pixels as well.

00:03:45 A background color.

00:03:47 of hash 31363f.

00:03:51 And notice how if you're using inline styles within JavaScript, you cannot say background dash color.

00:03:56 It's actually using camel case, background color.

00:03:59 Let's also give it a border radius of something like 10 pixels.

00:04:04 And let's also give it a min height of about 100 pixels.

00:04:07 Now, what would happen if we mixed and match both the styles from the external style sheet and internal ones?

00:04:14 Let's add a class name right here, equal to something like a card.

00:04:19 If you now head back over to index.css and define the .card class name, and give it something like a border of 2 pixel solid red.

00:04:29 Oh, again, I'm using string signs here where I don't need to.

00:04:32 You can notice that the color didn't change.

00:04:35 That means that inline styles have the preference over all the other CSS stylings.

00:04:39 So, do remember that.

00:04:41 But it's always better to stick with one way of styling anyway.

00:04:45 And in today's world, Tailwind CSS is the way to go.

00:04:48 It's the preferred way of styling apps of any kind.

00:04:52 So in this tutorial, later on, once we actually start building your movie application, you'll use the most popular and most in-demand way of styling applications

00:05:02 through the latest version of Tailwind CSS, version 4.0, which was released exactly at the date of publishing this video.

00:05:10 So you know that with JSM, you're always getting the latest information.

00:05:14 Now let's quickly fix up our styles by heading over to the Index CSS and removing this margin bottom from the H2.

00:05:21 We don't need it.

00:05:22 And now all of our cards are looking good.

00:05:24 But remember, I already told you that it's always best to use one way of styling.

00:05:28 So in this case, I will remove these inline styles and I'll move them over to our external style sheet.

00:05:35 So let me copy all of this.

00:05:37 and exchange it for a class name of card.

00:05:41 Then we can head over into our index.css and paste all of those styles here, but you'll have to change it to use lowercase letters and dashes in between.

00:05:51 So border radius, background color, and min height.

00:05:56 And at the end, you'll have to add a semicolon.

00:05:59 And of course remove all the string signs.

00:06:01 We don't need that in native CSS.

00:06:04 So let me quickly do that.

00:06:06 And we're good.

00:06:07 Everything still works as before.

00:06:09 And with that, we are ready to dive into.

0 Comments

"Please login to view comments"

Join the Conversation!

Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.

Upgrade your account