JSX Is Not HTML

Part of the Fundamentals section of Coddy's React journey — lesson 4 of 42.

JSX looks like HTML, but it lives inside JavaScript, and that forces a few small differences you'll meet constantly:

1. className instead of class. class is a reserved word in JavaScript, so JSX renames the attribute:

<p className="warning">Careful!</p>

2. Every tag must close. HTML forgives <br> and <input>; JSX doesn't. Self-closing tags end with />:

<input id="name" />
<br />

3. camelCase attributes. Multi-word attributes become camelCase: onclick → onClick, tabindex → tabIndex. You'll use onClick a lot when we get to events.

Challenge

Beginner

The paragraph below needs a CSS class, added the JSX way.

Give the paragraph the CSS class notice (remember: JSX doesn't use the class attribute name).
Keep its id and text unchanged.

Try it yourself

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>