JSX n'est pas de l'HTML

Fait partie de la section Les fondamentaux du Journey React de Coddy — leçon 4 sur 42.

JSX ressemble à du HTML, mais il vit à l'intérieur de JavaScript, ce qui impose quelques petites différences que vous rencontrerez constamment :

1. className au lieu de class. class est un mot réservé en JavaScript, donc JSX renomme l'attribut :

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

2. Chaque balise doit être fermée. HTML tolère <br> et <input> ; pas JSX. Les balises auto-fermantes se terminent par /> :

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

3. Attributs en camelCase. Les attributs composés de plusieurs mots passent en camelCase : onclick → onClick, tabindex → tabIndex. Vous utiliserez souvent onClick lorsque nous aborderons les événements.

Défi

Débutant

Le paragraphe ci-dessous a besoin d'une classe CSS, ajoutée à la façon JSX.

Donnez au paragraphe la classe CSS notice (rappelez-vous : JSX n'utilise pas le nom d'attribut class).
Conservez son id et son texte inchangés.

Essayez vous-même

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