Crear una aplicación de una sola página (SPA, por sus siglas en inglés) con múltiples componentes separados pero enlazados es totalmente posible utilizando HTML, CSS y JavaScript.
1. Estructura del Proyecto
Primero, organiza tu proyecto con una estructura clara:
/proyecto
|-- index.html
|-- /css
| |-- estilos.css
|-- /js
| |-- app.js
| |-- rutas.js
|-- /componentes
|-- inicio.html
|-- acerca.html
|-- contacto.html
2. Archivo index.html
Este será el archivo principal donde se cargará el contenido dinámico:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SPA - Ejemplo</title>
<link rel="stylesheet" href="css/estilos.css">
</head>
<body>
<header>
<nav>
<a href="#inicio">Inicio</a>
<a href="#acerca">Acerca</a>
<a href="#contacto">Contacto</a>
</nav>
</header>
<main id="contenido"></main>
<script src="js/rutas.js"></script>
<script src="js/app.js"></script>
</body>
</html>
3. Contenido de los Componentes
En la carpeta componentes
, crea archivos como
inicio.html
, acerca.html
y
contacto.html
con su contenido específico:
<!-- inicio.html -->
<h1>Bienvenido a la Página de Inicio</h1>
<p>Este es el contenido principal.</p>
4. Archivo rutas.js
Define tus rutas en un archivo de JavaScript. Esto ayuda a vincular las rutas con sus componentes:
const rutas = {
inicio: "/componentes/inicio.html",
acerca: "/componentes/acerca.html",
contacto: "/componentes/contacto.html",
};
5. Archivo app.js
Aquí manejas la carga dinámica de los componentes según la ruta seleccionada:
const contenido = document.getElementById("contenido");
const cargarComponente = async (ruta) => {
try {
const respuesta = await fetch(ruta);
const html = await respuesta.text();
contenido.innerHTML = html;
} catch (error) {
contenido.innerHTML = "Error al cargar el contenido.
";
}
};
window.addEventListener("hashchange", () => {
const hash = window.location.hash.substring(1);
const ruta = rutas[hash] || rutas["inicio"];
cargarComponente(ruta);
});
// Cargar el componente inicial
cargarComponente(rutas["inicio"]);
6. Archivo estilos.css
Usa este archivo para definir los estilos de tu SPA:
body {
font-family: Arial, sans-serif;
}
header {
background: #333;
color: #fff;
padding: 10px;
}
nav a {
color: #fff;
margin-right: 10px;
text-decoration: none;
}
nav a:hover {
text-decoration: underline;
}
Cómo Funciona
- El usuario selecciona un enlace (por ejemplo,
#acerca
). -
El evento
hashchange
detecta el cambio en el hash de la URL. - JavaScript carga dinámicamente el contenido asociado desde la carpeta de componentes sin recargar la página completa.
Estructura modular
/mi-proyecto
|-- /public
| |-- index.html
| |-- favicon.ico
|-- /src
| |-- /assets
| | |-- /images
| | |-- /icons
| | |-- /styles
| |-- /components
| |-- /pages
| |-- /services
| |-- /store
| |-- /utils
| |-- App.js
| |-- index.js
|-- /config
|-- /tests
|-- .env
|-- package.json
|-- README.md
|-- /node_modules
Descripción de Cada Carpeta
-
/public
: Aquí se almacena contenido estático que no será procesado por herramientas de construcción. Incluye archivos como:-
index.html
: Archivo raíz inicial de la aplicación. -
favicon.ico
: Ícono del sitio web. - Otros recursos estáticos, como imágenes que no cambian.
-
-
/src
: Contiene todo el código fuente de la aplicación:-
/assets
: Archivos estáticos como imágenes, íconos, y estilos globales (CSS/SCSS).-
/images
: Imágenes para el proyecto. -
/icons
: Íconos personalizados o de librerías. -
/styles
: Estilos globales o variables CSS.
-
-
/components
: Componentes reutilizables de la interfaz (botones, menús, etc.). -
/pages
: Vistas completas o páginas de la aplicación (como Inicio, Contacto, Dashboard). -
/services
: Lógica para interactuar con APIs externas o internas. -
/store
: Manejo del estado global (en frameworks como Redux, MobX). -
/utils
: Funciones utilitarias y herramientas comunes (como validaciones o formatos de fecha). -
App.js
: Componente principal que reúne la estructura de la aplicación. -
index.js
: Punto de entrada para renderizar la aplicación en el DOM.
-
-
/config
: Archivos de configuración para el entorno, como archivos de despliegue o configuración de herramientas de compilación. -
/tests
: Pruebas unitarias, funcionales o de integración para garantizar la calidad del código. -
.env
: Variables de entorno que contienen información sensible o específica del entorno de ejecución, como claves API o URLs base. -
package.json
: Lista de dependencias del proyecto, scripts de construcción y metadatos. -
README.md
: Documento con información importante sobre el proyecto (cómo configurarlo, ejecutarlo, y más). -
/node_modules
: Dependencias del proyecto instaladas con npm o yarn. Generalmente no se toca directamente.
Beneficios de Esta Estructura
Mantenibilidad: Cada área del proyecto tiene su propia carpeta, lo que mejora la claridad.Escalabilidad: Perfecta para proyectos que crecen con el tiempo.
Colaboración: Facilita la comunicación entre el administrador del proyecto y los desarrolladores, ya que todos saben dónde está cada cosa.
Si estás trabajando con frameworks como React, Angular, o Vue, esta estructura modular es altamente compatible y adaptable.