React: Creating an HTML Class in JSX
Randy Rivera
Posted on September 21, 2021
- One difference in JSX is that you don't use the word class to define HTML classes. This is because class is a reserved word in JavaScript. Instead, JSX uses className.
Also note that HTML attributes and event references in JSX become camelCase.
Let's Apply a class of
myDiv
to thediv
provided in the JSX code.
const JSX = (
<div className='myDiv'> {/* <--- added a class of myDiv */}
<h1>Add a class to this div</h1>
</div>
);
Self-closing
- In JSX, it's little different, Any JSX element can be written with a self-closing tag, and every element must be closed. The line-break tag, for example, must always be written as in order to be valid JSX that can be transpiled. A , on the other hand, can be written as or . The difference is that in the first version there is no way to include anything in the . You will see in my later posts why that this syntax is useful when rendering React components.
💖 💪 🙅 🚩
Randy Rivera
Posted on September 21, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.