JSX ist nicht HTML

Teil des Abschnitts Grundlagen der React-Journey von Coddy — Lektion 4 von 42.

JSX sieht aus wie HTML, lebt aber innerhalb von JavaScript, und das erzwingt ein paar kleine Unterschiede, auf die Sie ständig stoßen werden:

1. className anstelle von class. class ist ein reserviertes Wort in JavaScript, daher benennt JSX das Attribut um:

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

2. Jeder Tag muss geschlossen werden. HTML verzeiht <br> und <input>; JSX tut das nicht. Selbstschließende Tags enden mit />:

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

3. camelCase-Attribute. Mehrwort-Attribute werden in camelCase umgewandelt: onclick → onClick, tabindex → tabIndex. Sie werden onClick häufig verwenden, wenn wir zu den Events kommen.

Aufgabe

Anfänger

Der untere Absatz benötigt eine CSS-Klasse, die auf die JSX-Art hinzugefügt wird.

Gib dem Absatz die CSS-Klasse notice (denke daran: JSX verwendet nicht den Attributnamen class).
Behalte seine id und seinen Text unverändert bei.

Probier es selbst

<!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>