Ejercicio: JSX a fondo

⏱ 20 minutos
📶 Nivel: principiante

Objetivo

Practicar JSX: expresiones entre llaves, un estilo dinámico, atributos propios de JSX y comentarios.

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)

const usuario = { nombre: "Ana Pérez", puntos: 20, activo: true };

function App() {
  return (
    <main>
      <h1>Escribe aquí el nombre</h1>
    </main>
  );
}

Resultado

Consola

Pasos

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

En App, muestra en un <h1> el nombre de usuario.nombre.
Debajo, un <p> con el texto «Puntos dobles: …» y el resultado de multiplicar usuario.puntos por 2.
Haz que el <h1> tenga el color green si usuario.activo es true y gray si no (con un ternario y style).
Añade un <label> con htmlFor="correo" y un <input> con id="correo" y type="email".
Escribe un comentario JSX ({/* … */}) y asegúrate de que no hay errores en la consola.

💡 Pista 1: el estilo

Usa style={{ color: usuario.activo ? "green" : "gray" }} en el <h1>.

💡 Pista 2: varias líneas

Si tu JSX tiene varios elementos, envuélvelos en un <main> o en un fragmento.

🔎 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

const usuario = { nombre: "Ana Pérez", puntos: 20, activo: true };

export default function App() {
  return (
    <main>
      {/* Cabecera del perfil */}
      <h1 style={{ color: usuario.activo ? "green" : "gray" }}>
        {usuario.nombre}
      </h1>
      <p>Puntos dobles: {usuario.puntos * 2}</p>
      <label htmlFor="correo">Correo</label>
      <input id="correo" type="email" />
    </main>
  );
}

💡 🏁 Reto extra (opcional)

Muestra las iniciales del usuario (por ejemplo «AP») usando split(" ") y map, dentro de un <span> con estilo circular.