Ejercicios prácticos: Router y Formularios

Antes de continuar con temas más avanzados como la sincronización de filtros con la URL y el fetch de datos desde la API, es momento de practicar todo lo que has aprendido hasta ahora sobre React Router y formularios.

En esta clase te propongo tres ejercicios prácticos que te ayudarán a consolidar conceptos fundamentales de React:

🛣️ Crear nuevas rutas y páginas
📝 Manejo de formularios con estado y validaciones
🎯 Mejoras en componentes del router

¿Por qué practicar ahora?

Antes de avanzar con conceptos más complejos, es importante que domines:

Creación y manejo de rutas
Estado con useState
Efectos con useEffect
Custom hooks
Validaciones de formularios
Mejora de componentes reutilizables

Estos ejercicios te preparan para trabajar con filtros sincronizados con la URL y llamadas a APIs.

📋 Ejercicio 1: Crear una nueva ruta

Objetivo

Practicar cómo añadir rutas adicionales a tu aplicación y crear nuevas páginas dentro del sistema de routing.

¿Qué debes hacer?

Crear una nueva ruta en tu aplicación
Crear un nuevo componente que se renderice en esa ruta
Añadir un enlace en la navegación para acceder a ella

Ejemplo sugerido: Página de Contacto

Puedes crear una página de Contacto, o cualquier otra que se te ocurra:

/contact → Página de contacto
/services → Página de servicios
/portfolio → Página de portafolio
/team → Página del equipo

Paso a paso

1. Crear el componente de la página

// pages/Contact.jsx
export function Contact() {
  return (
    <div>
      <h1>📧 Contacto</h1>
      <p>¿Tienes alguna pregunta? Contáctanos.</p>
    </div>
  )
}

2. Añadir la ruta en App

// App.jsx
import { Route } from './components/Route'
import { Home } from './pages/Home'
import { Search } from './pages/Search'
import { About } from './pages/About'
import { Contact } from './pages/Contact' // 👈 Importar

function App() {
  return (
    <>
      <Header />

      <main>
        <Route path="/" component={Home} />
        <Route path="/search" component={Search} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} /> {/* 👈 Nueva ruta */}
      </main>

      <Footer />
    </>
  )
}

3. Añadir enlace en la navegación

// components/Header.jsx
import { Link } from './Link'

export function Header() {
  return (
    <header>
      <nav>
        <Link href="/">Inicio</Link>
        <Link href="/search">Búsqueda</Link>
        <Link href="/about">Acerca de</Link>
        <Link href="/contact">Contacto</Link> {/* 👈 Nuevo enlace */}
      </nav>
    </header>
  )
}

✅ Verificación

Comprueba que:

✅ La ruta /contact funciona correctamente
✅ El enlace en la navegación lleva a la página correcta
✅ No se recarga la página al navegar
✅ Los botones atrás/adelante del navegador funcionan

📝 Ejercicio 2: Página de Contacto con formulario

Objetivo

Practicar el manejo de formularios en React utilizando estado, validaciones, efectos y custom hooks.

¿Qué debes hacer?

Dentro de la página de Contacto que creaste en el ejercicio anterior, implementa un formulario completo con:

Manejo del estado con useState
Un custom hook para encapsular la lógica
Validaciones básicas de los campos
Mensaje de confirmación tras el envío

Conceptos a practicar

📦 Estado: Guardar valores del formulario
🎣 Custom hooks: Extraer lógica reutilizable
✅ Validación: Comprobar campos requeridos
🎯 Efectos: Mostrar mensajes o limpiar formulario
📤 Submit: Manejar el envío del formulario
🪝 Custom hooks: Extraer lógica reutilizable

✅ Verificación

Comprueba que tu formulario:

✅ Valida los campos antes de enviar
✅ Muestra errores específicos para cada campo
✅ Limpia los errores cuando el usuario escribe
✅ Muestra un mensaje de confirmación tras el envío
✅ Limpia el formulario después de enviar
✅ (Opcional) Deshabilita el botón mientras se envía

💡 Mejoras opcionales

Si quieres ir más allá, puedes añadir:

🎨 Estilos mejorados: CSS para que el formulario se vea mejor
⏱️ Validación en tiempo real: Validar mientras el usuario escribe
📧 Integración con API: Enviar datos a un backend real
🔄 Loading state: Mostrar spinner mientras se envía
📱 Responsive design: Que funcione bien en móviles

🎯 Ejercicio 3: Mejorar el componente Link

Objetivo

Aprovechar la información de la ruta actual para mejorar la experiencia de usuario, añadiendo automáticamente una clase CSS al enlace activo.

¿Qué debes hacer?

Modificar el componente Link para que:

Detecte si su href coincide con la ruta actual
Añada automáticamente una clase active cuando esté activo
Funcione sin que el desarrollador tenga que hacer nada especial

Por qué es útil

En muchas aplicaciones, el enlace de la página actual se resalta visualmente:

Inicio  |  Búsqueda  |  Acerca de  |  Contacto
                         ^^^^^^^
                       (estilo activo)

Esto ayuda al usuario a saber en qué página está.

✅ Verificación

Comprueba que:

✅ El enlace de la página actual tiene la clase active
✅ Los demás enlaces no tienen la clase active
✅ Al navegar, el enlace activo cambia automáticamente
✅ Puedes añadir otras clases CSS sin problemas
✅ Los estilos se aplican correctamente

💡 Mejoras opcionales

Si quieres ir más allá:

🎨 Animaciones: Transiciones suaves al cambiar de enlace activo
🔍 Matching parcial: Activar si la URL contiene el href (útil para rutas anidadas)
📱 Estilos responsivos: Diferentes estilos en móvil vs desktop
♿ Accesibilidad: Añadir aria-current="page" al enlace activo

Ejemplo de matching parcial (avanzado)

export function Link({
  href,
  children,
  target,
  className = '',
  activeClassName = 'active',
  exact = true, // 👈 Nueva prop
  ...props
}) {
  const { currentPath } = useRouter()

  // ... código del handleClick ...

  // Determinar si está activo
  const isActive = exact
    ? currentPath === href // Matching exacto
    : currentPath.startsWith(href) // Matching parcial

  // ... resto del código ...
}

Uso:

{
  /* Solo activo en /search exactamente */
}
;<Link href="/search" exact>
  Búsqueda
</Link>

{
  /* Activo en /search, /search/results, /search/filters, etc. */
}
;<Link href="/search" exact={false}>
  Búsqueda
</Link>

🎓 Conceptos practicados

Al completar estos ejercicios habrás practicado:

Concepto	Dónde lo usaste
Routing	Crear y configurar nuevas rutas
Componentes	Crear páginas y componentes reutilizables
Estado con `useState`	Manejar datos del formulario y errores
Custom hooks	Extraer lógica del formulario
Validaciones	Validar campos del formulario
Efectos con `useEffect`	(Opcional) Limpiar mensajes después de un tiempo
Manejo de eventos	Capturar submit, change, etc.
Renderizado condicional	Mostrar/ocultar mensajes y errores
Props	Pasar datos entre componentes
Composición	Combinar componentes para crear UI
Reutilización de hooks	Usar `useRouter()` en múltiples lugares
Accesibilidad	Atributos `aria-current`, labels, etc.

🚀 Próximos pasos

Una vez completes estos ejercicios, estarás preparado para:

Sincronizar filtros con la URL: Los filtros se reflejarán en la barra de direcciones
Fetch de datos desde una API: Obtener información de un servidor
Rutas dinámicas: Rutas con parámetros como /users/:id
Rutas protegidas: Rutas que requieren autenticación
React Router: Migrar a la librería oficial

📝 Resumen

En esta clase te propuse tres ejercicios prácticos:

Ejercicio 1: Crear nueva ruta

✅ Añadir ruta en App
✅ Crear componente de página
✅ Añadir enlace en navegación

Ejercicio 2: Formulario con validación

✅ Manejar estado del formulario
✅ Crear custom hook para la lógica
✅ Validar campos requeridos
✅ Mostrar mensajes de error
✅ Mensaje de confirmación tras envío

Ejercicio 3: Mejorar Link

✅ Detectar ruta actual
✅ Añadir clase active automáticamente
✅ Soportar clases personalizadas
✅ (Opcional) Matching parcial

💪 Desafío extra

Si terminaste todos los ejercicios y quieres más práctica:

Página 404 personalizada: Crea una página bonita para rutas no encontradas
Breadcrumbs: Muestra el camino de navegación actual
Formulario multi-paso: Divide el formulario en varios pasos
Tema claro/oscuro: Añade un botón para cambiar el tema
Animaciones de transición: Anima el cambio entre páginas

💡 Recuerda: La práctica es fundamental para dominar React. Estos ejercicios te preparan para trabajar en aplicaciones reales. ¡Tómate tu tiempo y experimenta!

¡Mucho ánimo con los ejercicios! 🎉