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 conid="root"
. - La inclusión de
leaflet.css
es crítica para visualización correcta de mapas.