Hey guys.
So far our React websites have looked pretty ugly and it's because we haven't been able to add any CSS
styling.
We've been using these standard HTML elements that were rendering using React.
So in this lesson, I want to talk about how to style your React elements, and how you can use attributes
in JSX.
Go ahead and get hold of your own copy of this current CodeSandbox and then go ahead and fork it.
So if you remember from our lessons on CSS, let's say that we wanted to change this
h1's color to red,
then we might go into our styles.css and create a class style.
So let's just call it heading, and then we change the color to red.
So pretty simple style.
Now if we head back into our index.js, if this was actually an HTML file then adding that class
to this h1 would be as easy as adding a class attribute and setting it to heading.
Now in this case, it still works,
and when we apply this heading class style from over here into our h1, you can see that it does in fact
change the color to red.
But let's see what problems we get.
If I pop this out in a new window and we go ahead and hit command + option + i to bring up our Chrome Developer
Tools, and in the console here, you'll see that you get a warning saying, "Invalid DOM property `class`. Did
you mean 'className'?"
So remember that this, even though it looks like HTML, it's still being rendered down to JavaScript, and
in JavaScript the property to access all of the classes that exist on an element is a property called
className.
Now, React has done some handling behind the scenes so that even if you did leave this as a class, it
would still work,
but there are some hairy situations that you might get yourself into.
And the proper name of this attribute is className. And you'll see that as soon as I change this to
className and we go back and reload this site
now, that warning goes away. While we here
if you're curious what this warning is about and why it's telling us that in our index.js file
on line 1, it doesn't recognize this angle bracket.
Well, the reason is because it doesn't know that this index.js file is in fact a JSX file
that includes HTML elements rather than just a bog standard normal JavaScript file.
So how can we tell it that this is a JSX file?
Well, if we go into our index.html and the place where we're importing our script here,
normally when we add a JavaScript script, we provide the src, and we provide the type as a text file
with JavaScript code, but in our case, this is still a text file but it's now JSX code.
So we've got to change this to JSX and if we hit Save we go back and reload our website,
you'll notice that warning is now gone because it knows that this is a JSX file that can include
HTML-like code.
The other thing that some of you guys might have noticed is that when we add an attribute in normal
HTML, it's not camel-cased like this, where the first word is lowercase and the next words are capitalized
like the end for name here,
instead, it looks like this.
So here I've got a list of all the HTML global attributes.
So these attributes can be used on any HTML element.
And one of these is called contenteditable.
And notice how it's not camel-cased, it's all one word.
But when we head back to our JSX file the convention that you should follow is to name it like as
if it's JavaScript.
So if it's called contenteditable then we're going to call it contentEditable, and you can see that
already the auto suggest from the JSX code completion is telling me to write it
camel-cased like so, and let's set it to true.
Now if I hit Save and go ahead and click on my h1, you can see that it's now an editable element. And if
we set it to false, then this is not editable like a normal h1 should be.
So if I change this back to the HTML attributes style where everything is not camelCase and
I hit Save,
you'll notice that it no longer works the same. Again
I lose my JavaScript powers. So remember that whenever you're writing attributes in HTML to make them
camel-cased.
Anything that you know of from HTML attributes you have to change it to the camel case version.
So if I go ahead and make my h1 editable again by setting this to true and I start typing some mumbo
jumbo, you can see that normally if you're within Chrome you get your spellcheck activated.
Go ahead and pause the video and take a look at this list of global attributes to see if there's a way
for you to turn off the spellcheck so that we no longer get these red underlines
happening here. Pause the video and try to complete this challenge.
All right.
So as you can see we have an attribute called spellcheck and we can specify whether if the element is to
have it's spelling checked. Let's go ahead and convert this attribute all lowercase into camel case and
add it as an attribute in our JSX file.
So already we've got spellcheck being suggested to us and I'm going to set it to false.
So now when I start editing my h1 and writing some complete gibberish, it's not trying to check
my spelling anymore. So the most common attribute that you're going to be adding is going to be the className,
because this is the preferred way to add styling to your React elements.
And as you'll see in the next lesson, while there are other ways that we can style these elements including
inline styling the documentation still recommends to apply all your styling through classes that you
specify within a CSS file and then applying it to your JSX file using this class name attribute.
Now remember that just because we're using React to create these HTML elements and we're learning
about how to use these attributes in JSX, the rest of what you've learned about CSS or HTML doesn't
just become invalid,
right?
So for example, I've got an ul here with a bunch of list items and I can, just as I would in normal CSS,
target the ul elements on my page just by writing the word ul and then I go ahead and change the color
to blue.
And now when I go back and refresh my page my ul or my unordered list should turn blue.
So in this case I'm not adding any attribute.
I'm simply saying that on the page if there are any unordered list items make sure that everything inside
all of its children gets turned blue. So you can target classes using CSS,
you can target IDs and you can target HTML elements directly as well. Although in reality, it'd be very
rare for you to just broad-stroke
tell all of the UI elements from now until forever to have a particular style like what we've done here.
Now, I'm going to go ahead and delete this unordered lists and I'm going to replace it with a div.
Now, inside this div, I'm going to add three image elements, and these are images I found in Google to
replace each of those things that I've listed in my unordered list.
Now here's a challenge for you.
I want you to do the same thing, namely, create three image elements like what I've done here, and to find
images via google image search, and then to copy the image address and paste it in as the source of the
image.
But here's the catch, I want you to use CSS to change each of these images to have the same size, to be
squares 100px by 100px. Pause the video and try to complete this challenge.
All right.
So we know that in order to change each of these images to 100 by 100, we have to change something
in our CSS.
Now what I want to do is I want to create a class which I've called food-img, and remember that
in CSS the convention for all of these essentially variable names that you're creating is what's called
kebab case.
So they're all lowercase and they're separated by a dash.
Now for all of the elements which get the food-img class, I'm going to change its height to 100px
and its width to a 100px as well.
Now, all I have to do is to apply that class to all three of these image elements. And a neat trick inside
CodeSandbox is you can hold down the OPTION or ALT key on your keyboard, and take your cursor to all
the places where you want to type simultaneously. So you can see it's now flashing on three lines.
And here I'm going to add a new attribute called className, and I'm going to set that to equal to that
className that I created just now which is called food-img.
And now when we hit Save and we Refresh our website you can see that they are now all rendered as 100
by 100 pixel images because my CSS is being applied. Now you can also insert JavaScript as an attribute.
So for example, let's use a service called Lorem Picsum where they generate stylish random images
just by tapping into a particular URL and specifying the size.
So I'm going to go ahead and copy this URL for the image, and then I'm going to create it as a const and
I'm going to call it img. And then inside here I'm going to paste a string that holds the URL for
a random photo from Picsum.
And now inside my div, I'm going to create an img element and I'm going add the src to be equal to this
particular img const.
So as soon as I do that you can see that it shows up over here
and if I hit Save in fact, you'll see that this closing tag for the img element should disappear, and
it turns into a self-closing tag because there are no children, or there's nothing in between the opening
and closing tags.
Now, remember that normally if you wrote code like this in HTML where it just has the opening part and
no closing part, HTML will forgive you for this.
You can see that if I go ahead and cut this out of my JSX file and paste it into my actual HTML
inside this div, you can see that it will work if I have this backslash which denotes a self-closing
HTML element or if I don't,
which is actually just the opening tag. HTML is really very forgiving
but JSX is not so forgiving. If you don't have this closing tag then this is not valid
JSX and you will get an error telling you, "Unterminated JSX contents" and we have to add a termination
to say that this is the end of this element.
In this lesson, we've seen how we can use JavaScript properties as attributes in our JSX, so all of
the attributes that you are already familiar with from HTML such as src or href
or all of those things, you can use in your JSX. But for all of the attributes that have more than one
word, then you have to turn it into a camel-cased version of it in order for it to work.
We also saw that you can use JavaScript expressions as the values for the attributes as long as you
include them inside a set of curly braces.
So for example, Picsum allows you to turn all the images into grayscale by appending this query,
"?grayscale" to the end of the URL.
So in our case, we can simply change our JavaScript expression to be the imgURL, plus the
?grayscale.
And now when you refresh it should show you all the images but converted to grayscale. And we're able
to do this because we're able to use JavaScript as the value of our attributes. Now if you're wondering
why we're getting so many warnings,
well, it's because CodeSandbox comes pre-built with a linter from eslint. So it will pick up on the
things that you're not doing quite right.
So for example, in terms of our image elements, we should always have an alt text that describes to people
who aren't able to see, who are looking at these websites through screen readers etc., what these images
are actually of.
So if we add some alt text in all of these places...we'll write
alt equals
something space and we can say that this one is random,
this one is bacon, and this one is jamon,
and this one is going to be noodles.
So now we get rid of all our warnings from the linter and we provide people with screen readers, who can't
see, a better description of what's actually on the screen. So I'm going to include the code in this completed
lesson as a link in the Course Resources.
So if there's anything that you want to mess around with and especially revisit some of those topics
that we discussed in this lesson, and trying it out for yourself if you haven't already.
If this is at all confusing, I really recommend to just delete the whole thing and then try to recreate
the end website yourself and see if you can achieve the same results using the things that you've learned
in this lesson. And you can always refer to this completed code whenever you need to.
Just take a moment, take a breath and try to get used to this idea of using these attributes and using
it to style your React elements.
Once you're done and comfortable, then head over to the next lesson where we're going to talk more about
inline styling in JSX.