Documentación de `main.jsx`

Este archivo es el punto de entrada de la aplicación React. Su propósito es montar el árbol de componentes sobre el DOM y establecer los proveedores globales requeridos por la app.

Función principal

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <AuthProvider>
      <AppRouter />
    </AuthProvider>
  </StrictMode>
);

Estructura

Componente	Función
`<StrictMode>`	Activa comprobaciones adicionales en desarrollo
`<AuthProvider>`	Provee contexto global de autenticación (`AuthContext`)
`<AppRouter>`	Contiene las rutas definidas para navegación (`react-router`)

Importaciones

Archivo	Propósito
`index.css`	Estilos globales de la aplicación
`AuthContext.jsx`	Contexto para manejo de sesión y usuario actual
`AppRouter.jsx`	Define todas las rutas y acceso por roles
`leaflet.css`	Estilos necesarios para componentes de mapa (Leaflet)

Contexto de Autenticación

El AuthProvider envuelve toda la aplicación para asegurar acceso al contexto de sesión desde cualquier componente:

<AuthProvider>
  <AppRouter />
</AuthProvider>

Esto permite que hooks como useAuth() funcionen correctamente en todo el árbol de componentes.

Renderizado con React 18

Se usa createRoot() desde react-dom/client (React 18+):

import { createRoot } from 'react-dom/client';

Esto reemplaza a ReactDOM.render() de versiones anteriores.

Enrutamiento

<AppRouter /> incluye el sistema de rutas privadas/públicas definido mediante react-router-dom.

Consideraciones

Es importante que index.html tenga un elemento con id="root".
La inclusión de leaflet.css es crítica para visualización correcta de mapas.

Documentación de main.jsx