Regla del padre único

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

Un componente puede devolver todo el JSX que desees, con una sola regla: todo debe estar dentro de un elemento padre. Esto está bien:

return (
    <div>
        <h1>My Page</h1>
        <p>Welcome!</p>
    </div>
);

Pero devolver dos elementos lado a lado sin un contenedor es un error. Una función solo puede devolver una cosa:

// BROKEN: dos elementos de nivel superior
return (
    <h1>My Page</h1>
    <p>Welcome!</p>
);

La solución habitual es envolver todo en un <div>. Observa la vista previa: si rompes la regla, el error de compilación te dirá exactamente dónde.

Desafío

Principiante

Crea el encabezado de una página pequeña: dos elementos dentro de un mismo elemento padre.

Conserva el <div> exterior.
Dentro de él, añade un <h1> con id="heading" y el texto My First App.
Debajo del encabezado, añade un <p> con id="tagline" y el texto Built with React.

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>