JSX não é HTML

Parte da seção Fundamentos do Journey de React da Coddy — lição 4 de 42.

O JSX se parece com HTML, mas ele vive dentro do JavaScript, e isso força algumas pequenas diferenças que você encontrará constantemente:

1. className em vez de class. class é uma palavra reservada em JavaScript, então o JSX renomeia o atributo:

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

2. Toda tag deve ser fechada. O HTML tolera <br> e <input>; o JSX não. Tags auto-fechadas terminam com />:

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

3. Atributos em camelCase. Atributos com múltiplas palavras se tornam camelCase: onclick → onClick, tabindex → tabIndex. Você usará bastante o onClick quando chegarmos aos eventos.

Desafio

Iniciante

O parágrafo abaixo precisa de uma classe CSS, adicionada do jeito JSX.

Dê ao parágrafo a classe CSS notice (lembre-se: o JSX não usa o nome de atributo class).
Mantenha seu id e texto inalterados.

Experimente você mesmo

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