-
Notifications
You must be signed in to change notification settings - Fork 0
/
class.jsx
24 lines (19 loc) · 922 Bytes
/
class.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
{/*
Define an HTML Class in JSX
Now that you're getting comfortable writing JSX, you may be wondering how it differs from HTML.
So far, it may seem that HTML and JSX are exactly the same.
One key difference in JSX is that you can no longer use the word class to define HTML classes. This is because class is a reserved word in JavaScript. Instead, JSX uses className.
In fact, the naming convention for all HTML attributes and event references in JSX become camelCase. For example, a click event in JSX is onClick, instead of onclick. Likewise, onchange becomes onChange. While this is a subtle difference, it is an important one to keep in mind moving forward.
Apply a class of myDiv to the div provided in the JSX code.
*/}
const JSX = (
<div>
<h1>Add a class to this div</h1>
</div>
);
// Solution
const JSX = (
<div className="myDiv">
<h1>Add a class to this div</h1>
</div>
);