JSX no es HTML

Parte de la sección Fundamentos del Journey de React de Coddy — lección 4 de 42.

JSX se parece a HTML, pero vive dentro de JavaScript, y eso fuerza algunas pequeñas diferencias con las que te encontrarás constantemente:

1. className en lugar de class. class es una palabra reservada en JavaScript, por lo que JSX renombró el atributo:

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

2. Cada etiqueta debe cerrarse. HTML perdona <br> e <input>; JSX no. Las etiquetas autocerradas terminan con />:

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

3. Atributos en camelCase. Los atributos compuestos por varias palabras pasan a camelCase: onclick → onClick, tabindex → tabIndex. Usarás mucho onClick cuando lleguemos a los eventos.

Desafío

Principiante

El párrafo de abajo necesita una clase CSS, añadida a la manera de JSX.

Dale al párrafo la clase CSS notice (recuerda: JSX no utiliza el nombre de atributo class).
Mantén su id y texto sin cambios.

Pruébalo tú mismo

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