Saltar a contenido

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.