Ejercicio: Formularios y componentes controlados

⏱ 35 minutos
📶 Nivel: principiante

Objetivo

Construir un formulario de registro controlado con validación, vista previa en vivo y mensaje de confirmación.

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)

import { useState } from "react";

function App() {
  return (
    <main>
      <h1>Crear cuenta</h1>
    </main>
  );
}

Resultado

Consola

Pasos

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

Crea un formulario con tres campos controlados: name="nombre" (texto), name="correo" (tipo email) y una casilla name="acepto".
Muestra en vivo, en un <p className="vista">, el texto «Hola, Ana» cuando el nombre escrito es «Ana» (si el nombre está vacío, debe decir «Hola, desconocida»).
Añade un botón de envío con el texto «Crear cuenta», deshabilitado hasta que haya nombre, el correo contenga @ y la casilla esté marcada.
Al enviar (onSubmit con preventDefault), muestra un <p role="status"> con «Cuenta creada para Ana» (con el nombre que se había escrito).
Tras enviar, vacía los campos.

💡 Pista 1: un solo objeto

Guarda { nombre: "", correo: "", acepto: false } y usa un único cambiar(e) que distinga entre checked y value según e.target.type.

💡 Pista 2: guardar el nombre

Antes de vaciar el formulario guarda el nombre en otro estado (creada) para poder mostrarlo en el mensaje.

🔎 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

import { useState } from "react";

const vacio = { nombre: "", correo: "", acepto: false };

export default function App() {
  const [datos, setDatos] = useState(vacio);
  const [creada, setCreada] = useState("");

  function cambiar(e) {
    const { name, type, value, checked } = e.target;
    setDatos({ ...datos, [name]: type === "checkbox" ? checked : value });
  }

  const valido = datos.nombre.trim() !== "" && datos.correo.includes("@") && datos.acepto;

  function enviar(e) {
    e.preventDefault();
    setCreada(datos.nombre);
    setDatos(vacio);
  }

  return (
    <main>
      <form onSubmit={enviar}>
        <input name="nombre" value={datos.nombre} onChange={cambiar} placeholder="Nombre" />
        <input name="correo" type="email" value={datos.correo} onChange={cambiar} placeholder="Correo" />
        <label>
          <input name="acepto" type="checkbox" checked={datos.acepto} onChange={cambiar} /> Acepto los términos
        </label>
        <button type="submit" disabled={!valido}>Crear cuenta</button>
      </form>
      <p className="vista">Hola, {datos.nombre || "desconocida"}</p>
      {creada && <p role="status">Cuenta creada para {creada}</p>}
    </main>
  );
}

💡 🏁 Reto extra (opcional)

Añade un campo «Contraseña» con un indicador de fuerza (débil, media, fuerte) calculado según su longitud y si mezcla letras y números.