Hey guys. 1
So far our React websites have looked pretty ugly and it's because we haven't been able to add any CSS 2
styling. 3
We've been using these standard HTML elements that were rendering using React. 4
So in this lesson I want to talk about how to style your React elements and how you can use attributes 5
in JSX. 6
Go ahead and get hold of your own copy of this current code sandbox and then go ahead and fork it. 7
So if you remember from our lessons on CSS, let's say that we wanted to change this 8
h1's color to red, 9
then we might go into our styles.css and create a class style. 10
So let's just call it heading and then we change the color to red. 11
So pretty simple style. 12
Now if we head back into our index.js, if this was actually an HTML file then adding that class 13
to this h1 would be as easy as adding a class attribute and setting it to heading. 14
Now in this case it still works. 15
And when we apply this heading class style from over here into our h1, you can see that it does in fact 16
change the color to red. 17
But let's see what problems we get. 18
If I pop this out in a new window and we go ahead and hit COMMAND + OPTION +I to bring up all Chrome developer 19
tools and in the console here you'll see that you get a warning saying invalid DOM property class, did 20
you mean 'className'? 21
So remember that this, even though it looks like HTML, it's still being rendered down to JavaScript. And 22
in JavaScript the property to access all of the classes that exist on an element is a property called 23
class name. 24
Now React has done some handling behind the scenes so that even if you did leave this as class, it 25
would still work. 26
But there are some hairy situations that you might get yourself into. 27
And the proper name of this attribute is class name. And you'll see that as soon as I change this to 28
class name and we go back and reload this site 29
now that warning goes away. While we here 30
if you're curious what this warning is about and why it's telling us that in our inde.js file 31
on line 1, it doesn't recognize this angle bracket. 32
Well the reason is because it doesn't know that this index.js file is in fact a JSX file 33
that includes HTML elements rather than just a bog standard normal JavaScript file. 34
So how can we tell it that this is a JSX file? 35
Well if we go into our index.html and the place where we're importing our script here, 36
normally when we add a JavaScript script we provide the source and we provide the type as a text file 37
with Javascript code. But in our case this is still a text file but it's now JSX code. 38
So we've got to change this to JSX and if we hit save we go back and reload our website. 39
You'll notice that warning is now gone because it knows that this is a JSX file that can includes 40
HTML-like code. 41
The other thing that some of you guys might have noticed is that when we add an attribute in normal 42
HTML, it's not camelcase like this where the first word is lowercase and the next words are capitalized 43
like the end for name here. 44
Instead it looks like this. 45
So here I've got a list of all the HTML global attributes. 46
So these attributes can be used on any HTML element. 47
And one of these is called contenteditable. 48
And notice how it's not camel cased, it's all one word. 49
But when we head back to our JSX file the convention that you should follow is to name it like as 50
if it's Javascript. 51
So if it's called contenteditable then we're going to call it contentEditable and you can see that 52
already the auto suggest from the JSX code completion is telling me to write it 53
camel case like so and let's set it to true. 54
Now if I hit save and go ahead and click on my h1 you can see that it's now a editable element. And if 55
we set it to false then this is not editable like a normal h1 should be. 56
So if I change this back to the HTML attributes style where everything is not camelcase and 57
I hit save, 58
you'll notice that it no longer works the same. Again 59
I lose my Javascript powers. So remember that whenever you're writing attributes in HTML to make them 60
camel cased. 61
Anything that you know of from HTML attributes you have to change it to the camel case version. 62
So if I go ahead and make my h1 editable again by setting this to true and I start typing some mumbo 63
jumbo, you can see that normally if you're within Chrome you get your spellcheck activated. 64
Go ahead and pause the video and take a look at this list of global attributes to see if there's a way 65
for you to turn off the spellcheck so that we no longer get these red underline 66
happening here. Pause the video and try to complete this challenge. 67
All right. 68
So as you can see we have a attribute called spellcheck and we can specify whether if the element is to 69
have it's spelling checked. Let's go ahead and convert this attribute all lowercase into camel case and 70
add it as an attribute in our JSX file. 71
So already we've got spellcheck being suggested to us and I'm going to set it to false. 72
So now when I start editing my h1 and writing some complete gibberish, it's not trying to check 73
my spelling anymore. So the most common attribute that you're gonna be adding is going to be the class 74
name because this is the preferred way to add styling to your React elements. 75
And as you'll see in the next lesson, while there are other ways that we can style these elements including 76
inline styling the documentation still recommends to apply all your styling through classes that you 77
specify within a CSS file and then applying it to your JSX file using this class name attribute. 78
Now remember that just because we're using React to create these HTML elements and we're learning 79
about how to use these attributes in JSX, the rest of what you've learned about CSS or HTML doesn't 80
just become invalid 81
right? 82
So for example I've got a ul here with a bunch of list items and I can just as I would in normal CSS 83
target the ul elements on my page just by writing the word ul and then I go ahead and change the color 84
to blue. 85
And now when I go back and refresh my page my ul or my unordered list should turn blue. 86
So in this case I'm not adding any attribute. 87
I'm simply saying that on the page if there are any unordered list items make sure that everything inside 88
all of its children gets turned blue. So you can target classes using CSS, 89
you can target IDs and you can target HTML elements directly as well. Although in reality, it'd be very 90
rare for you to just broad-stroke 91
tell all of the UI elements from now until forever to have a particular style like what we've done here. 92
Now I'm going to go ahead and delete this unordered lists and I'm going to replace it with a div. 93
Now inside this div I'm going to add three image elements and these are images I found in Google to 94
replace each of those things that I've listed in my unordered list. 95
Now here's a challenge for you. 96
I want you to do the same thing namely create three image elements like what I've done here and to find 97
images via google image search and then to copy the image address and paste it in as the source of the 98
image. 99
But here's the catch. I want you to use CSS to change each of these images to have the same size, to be 100
squares 100 pixels by 100 pixels. Pause the video and try to complete this challenge. 101
All right. 102
So we know that in order to change each of these images to 100 by 100, we have to change something 103
in our CSS. 104
Now what I want to do is I want to create a class which I'll called food-img and remember that 105
in CSS the convention for all of these essentially variable names that you're creating is what's called 106
kebab case. 107
So they're all lowercase and they're separated by a dash. 108
Now for all of the elements which get the food-img class I'm going to change its height to 100 pixels 109
and its width to a 100 pixels as well. 110
Now all I have to do is to apply that class to all three of these image elements. And a neat trick inside 111
code sandbox is you can hold down the OPTION or ALT key on your keyboard and take your cursor to all 112
the places where you want to type simultaneously you can see it's now flashing on three lines. 113
And here I'm going to add a new attribute called class name and I'm going to set that to equal to that 114
class name that I created just now which is called food-img. 115
And now when we hit save and we refresh our website you can see that they are now all rendered as 100 116
by 100 pixel images because my CSS is being applied. Now you can also insert JavaScript as an attribute. 117
So for example let's use a service called Lorem Picsum where they generate stylish random images 118
just by tapping into a particular URL and specifying the size. 119
So I'm gonna go ahead and copy this URL for the image and then I'm going to create it as a constant and 120
I'm going to call it img. And then inside here I'm going to paste a string that holds the URL for 121
a random photo from Picsum. 122
And now inside my div I'm gonna create a image element and I'm gonna add the source to be equal to this 123
particular image constant. 124
So as soon as I do that you can see that it shows up over here 125
and if I hit save in fact, you'll see that this closing tag for the image element should disappear and 126
it turns into a self closing tag because there are no children or there's nothing in between the opening 127
and closing tags. 128
Now remember that normally if you wrote code like this in HTML where it just has the opening part and 129
no closing part, HTML will forgive you for this. 130
You can see that if I go ahead and cut this out of my JSX file and paste it into my actual HTML 131
inside this div, you can see that it will work if I have this backslash which denotes a self closing 132
HTML element or if I don't, 133
which is actually just the opening tag. HTML is really very forgiving 134
but JSX is not so forgiving. If you don't have this closing tag then this is not valid 135
JSX and you will get an error telling you "Unterminated JSX contents" and we have to add a termination 136
to say that this is the end of this element. 137
In this lesson we've seen how we can use Javascript properties as attributes in our JSX, so all of 138
the attributes that you are already familiar with from HTML such as src or href 139
or all of those things you can use in your JSX. But for all of the attributes that have more than one 140
word, then you have to turn it into a camelcased version of it in order for it to work. 141
We also saw that you can use Javascript expressions as the values for the attributes as long as you 142
include them inside a set of curly braces. 143
So for example Picsum allows you to turn all the images into grayscale by appending this query 144
"?grayscale" to the end of the URL. 145
So in our case we can simply change our Javascript expression to be the image URL plus the 146
?grayscale. 147
And now when you refresh it should show you all the images but converted to grayscale. And we're able 148
to do this because we're able to use Javascript as the value of our attributes. Now if you're wondering 149
why we're getting so many warnings 150
well it's because code sandbox comes pre-built with a linter from eslint. So it will pick up on the 151
things that you're not doing quite right. 152
So for example in terms of our image elements, we should always have a alt text that describes to people 153
who aren't able to see, who are looking at these websites through screen readers etc., what these images 154
are actually of. 155
So if we add some alt text in all of these places, we'll write 156
alt equals 157
something space and we can say that this one is random, 158
this one is bacon and this one is jamon 159
and this one is going to be noodles. 160
So now we get rid of all our warnings from the linter and we provide people with screen readers, who can't 161
see, a better description of what's actually on the screen. So I'm going to include the code in this completed 162
lesson as a link in the course resources. 163
So if there's anything that you want to mess around with and especially revisit some of those topics 164
that we discussed in this lesson and trying it out for yourself if you haven't already. 165
If this is at all confusing I really recommend to just delete the whole thing and then try to recreate 166
the end website yourself and see if you can achieve the same results using the things that you've learned 167
in this lesson. And you can always refer to this completed code whenever you need to. 168
Just take a moment, take a breath and try to get used to this idea of using these attributes and using 169
it to style you'll React elements. 170
Once you're done and comfortable, then head over to the next lesson where we're going to talk more about 171
inline styling in JSX.