Ejercicio: Qué es React y tu primer componente

⏱ 15 minutos
📶 Nivel: principiante

Objetivo

Crear un componente Tarjeta, reutilizarlo tres veces dentro de App y comprobar que se ve en pantalla.

Cómo se trabaja

Escribe un componente llamado App (puedes crear los demás que necesites). Prueba tu código en el editor de abajo; cuando funcione, pega todo el archivo en el comprobador. Los import de react se aceptan y se ignoran, porque aquí React ya está cargado.

⚛️ Tu editor de React (empieza desde aquí)

Código (edítalo y pulsa Ejecutar)

// Escribe aquí tu componente Tarjeta

function App() {
  return <h1>Mis tarjetas</h1>;
}

Resultado

Consola

Pasos

Marca cada paso a medida que lo completes. Tu avance se guarda en este navegador.

Crea un componente Tarjeta que devuelva un <article className="tarjeta"> con un <h2> y un <p>, ambos con texto.
Escribe el componente App: debe devolver un <main> con un único <h1> de título.
Dentro de App, usa <Tarjeta /> tres veces.
Comprueba en el editor que se ven las tres tarjetas y que la consola no muestra errores.

💡 Pista 1: la estructura

Cada componente es una función con mayúscula que devuelve JSX. Usa paréntesis después de return si el JSX ocupa varias líneas.

💡 Pista 2: `className`

En JSX el atributo class se escribe className, porque class es una palabra reservada de JavaScript.

🔎 Comprueba tu trabajo

Pega tu código y pulsa Comprobar. La revisión ocurre en tu navegador; nada se envía a ningún sitio. Cada punto en rojo incluye una pista.

Tu código de React (el archivo App.jsx completo)

✅ Ver una solución posible

Intenta resolverlo antes de mirar. Tu versión puede ser distinta y también correcta.

App.jsx

function Tarjeta() {
  return (
    <article className="tarjeta">
      <h2>React</h2>
      <p>Una biblioteca para construir interfaces con componentes.</p>
    </article>
  );
}

export default function App() {
  return (
    <main>
      <h1>Mis tarjetas</h1>
      <Tarjeta />
      <Tarjeta />
      <Tarjeta />
    </main>
  );
}

💡 🏁 Reto extra (opcional)

Añade un cuarto componente Pie que muestre un <footer> con tu nombre y úsalo al final de App.