React 19 con Vite: Componentes, Custom Hooks y Routing

02-react/src/
├── main.jsx                        # Punto de entrada; monta <App /> en el DOM
├── App.jsx                         # Componente raíz con rutas declaradas
├── index.css                       # Estilos globales
├── data.json                       # Datos de empleos de ejemplo
├── assets/
│   └── react.svg
├── hooks/
│   └── useRouter.jsx               # Custom hook de routing client-side
├── components/
│   ├── Header.jsx                  # Barra de navegación superior
│   ├── Footer.jsx                  # Pie de página con copyright
│   ├── JobCard.jsx                 # Tarjeta individual de oferta de empleo
│   ├── JobListings.jsx             # Contenedor del listado de tarjetas
│   ├── SearchFormSection.jsx       # Formulario de búsqueda con filtros y debounce
│   ├── Pagination.jsx              # Navegación entre páginas de resultados
│   ├── Pagination.module.css       # Estilos con scope del componente Pagination
│   ├── Route.jsx                   # Componente que renderiza según la ruta activa
│   └── Link.jsx                    # Enlace SPA que usa navigateTo del hook
└── pages/
    ├── Home.jsx                    # Página de inicio con hero y buscador
    ├── Search.jsx                  # Página de búsqueda y listado de empleos
    └── 404.jsx                     # Página de error 404

import { useEffect, useState } from 'react'

export function useRouter() {
  const [currentPath, setCurrentPath] = useState(window.location.pathname)

  useEffect(() => {
    const handleLocationChange = () => {
      setCurrentPath(window.location.pathname)
    }

    window.addEventListener('popstate', handleLocationChange)
  }, [])

  function navigateTo(path) {
    // Actualiza la URL sin recargar la página
    window.history.pushState({}, '', path)
    // Dispara popstate manualmente (pushState no lo hace por sí solo)
    window.dispatchEvent(new PopStateEvent('popstate'))
  }

  return {
    currentPath,
    navigateTo
  }
}

// components/Route.jsx — renderiza el componente solo si la ruta coincide
import { useRouter } from "../hooks/useRouter";

export function Route ({ path, component: Component }) {
  const { currentPath } = useRouter()
  if (currentPath !== path) return null
  return <Component />
}

// components/Link.jsx — enlace que navega sin recargar la página
import { useRouter } from "../hooks/useRouter"

export function Link ({ href, children, ...restOfProps }) {
  const { navigateTo } = useRouter()

  const handleClick = (event) => {
    event.preventDefault()
    navigateTo(href)
  }

  return (
    <a href={href} {...restOfProps} onClick={handleClick}>
      {children}
    </a>
  )
}

import { Header } from './components/Header.jsx'
import { Footer } from './components/Footer.jsx'
import { HomePage } from './pages/Home.jsx'
import { SearchPage } from './pages/Search.jsx'
import { Route } from './components/Route.jsx'

function App() {
  return (
    <>
      <Header />
      <Route path="/"       component={HomePage}   />
      <Route path="/search" component={SearchPage} />
      <Footer />
    </>
  )
}

export default App

cd 02-react
npm install
npm run dev