Tu primer componente

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

Es hora de escribir tu primer componente. Observa App.jsx. Es una función que devuelve JSX:

export default function App() {
    return (
        <div>

        </div>
    );
}

Ahora mismo devuelve un <div> vacío, por lo que la vista previa está en blanco. Cualquier JSX que pongas dentro se renderiza (encabezados, párrafos, botones, cualquier cosa):

<h1 id="title">Hello, React!</h1>

Observa el atributo id: funciona exactamente igual que en HTML, y nuestras pruebas usan ids para encontrar tus elementos. Los otros dos archivos son la estructura interna de la aplicación: index.html aloja la aplicación y main.jsx monta App en la página. Están bloqueados. App.jsx es donde trabajas.

Desafío

Principiante

Haz que tu aplicación salude al mundo.

Dentro del <div> en App.jsx, añade un <h1> con id="title".
Su texto debe ser exactamente Hello, 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>