Construir la lógica que da vida a una aplicación web suele ser el momento donde JavaScript demuestra su poder. Aquí aprenderás cómo manipular el DOM con JavaScript para leer datos, crear elementos y renderizar enlaces dinámicos en una página construida con Webpack y Tailwind, ideal si estás dando tus primeros pasos en proyectos frontend automatizados.

La clave está en entender que no hay magia: solo lógica estructurada que lee un archivo de datos, itera sobre él y construye nodos HTML listos para insertarse en el documento.

¿Cómo se estructura la función main para manipular el DOM?

Todo arranca dentro del archivo index.js, donde se define una constante con una arrow function llamada main. Esa función concentra los pasos para leer el archivo de data, crear elementos del DOM y modificarlos antes de insertarlos en el HTML.

Antes de escribir lógica, conviene limpiar el index.html de los textos placeholder que vienen por defecto, porque esos valores se van a popular desde JavaScript. También es buen momento para corregir cualquier typo y dejar el marcado ordenado.

¿Qué hace document.createElement en JavaScript? Crea un nuevo nodo HTML en memoria que aún no está insertado en el documento. Después puedes asignarle contenido y agregarlo al DOM con appendChild.

¿Cómo creo el nodo del nombre con optional chaining?

La primera variable se declara con let name y se asigna a document.createElement, construyendo el nodo correspondiente al título principal. Para acceder al valor del archivo de data sin riesgo de romper la app, se usa optional chaining con el símbolo de pregunta: data?.name.

Esto evita errores si la propiedad no existe, porque en lugar de lanzar una excepción simplemente devuelve undefined. Es un patrón defensivo muy útil cuando trabajas con datos externos.

¿Cómo iterar sobre un array de links con map y template literals?

La parte interesante viene con los enlaces. Si analizas el recurso, data.links contiene cada red social como un objeto con propiedades como name, url, color y emoji. La meta es iterar por cada uno y construir su HTML correspondiente.

Para eso se declara let links = data?.links.map(...), donde map recibe una función anónima que toma cada link y retorna un template literal con la estructura HTML deseada.

Dentro del template literal se reemplazan los valores estáticos por interpolaciones dinámicas usando handlebars de JavaScript:

• ${link.color} para las clases de color de Tailwind como bg-yellow-200, text-yellow-800 y text-yellow-600.
• ${link.url} para el atributo href del enlace.
• ${link.name} para el texto visible.
• ${link.emoji} para el ícono de cada red.

Esto significa que el color asignado en el objeto de data se transmite directamente a las clases utilitarias de Tailwind, dándote control total desde un solo archivo.

¿Por qué necesito usar join después de map?

Cuando map termina su iteración, devuelve un array de strings. Si lo insertas tal cual en el HTML, vas a ver las comas que separan cada elemento del array.

La solución es encadenar .join('') con un string vacío como separador. Así obtienes una sola cadena continua lista para inyectarse en el DOM sin caracteres extra.

¿Qué diferencia hay entre map y forEach al manipular el DOM? map retorna un nuevo array con los valores transformados, ideal cuando quieres construir HTML. forEach solo ejecuta la función pero no retorna nada, así que no sirve para acumular strings.

¿Cómo inserto los elementos creados en el documento?

Con los templates listos, falta crear el contenedor que los albergará. Se declara let newItem = document.createElement('section'), generando una nueva sección en minúsculas.

A ese nodo se le asigna el contenido con newItem.innerHTML = links, donde links es el string resultante del map y el join. Después se ejecuta links.appendChild(newItem) para insertarlo en el contenedor del DOM destinado a los enlaces.

Para el título, se hace lo equivalente con appendChild pasándole la variable name, que reemplaza el H1 original del HTML.

¿Cómo ejecuto la función main al final?

Todo el bloque anterior define la lógica, pero no la dispara. La última línea del archivo simplemente invoca main() como función, lo que ejecuta toda la cadena: lectura de data, creación de nodos, iteración con map, ensamblado con join e inserción con appendChild.

¿Qué es innerHTML y cuándo conviene usarlo? Es una propiedad que define el contenido HTML interno de un elemento. Funciona bien para inyectar plantillas generadas dinámicamente, aunque debes tener cuidado si los datos vienen de fuentes no confiables por riesgo de inyección.

¿Qué herramientas y conceptos clave aparecen en esta lógica?

Esta implementación combina varias habilidades fundamentales del desarrollo frontend moderno:

• Manipulación del DOM: con document.createElement y appendChild para crear e insertar nodos.
• Optional chaining: el operador ?. que evita errores cuando una propiedad puede no existir.
• Template literals: comillas francesas con interpolación ${} para construir HTML dinámico.
• Método map: itera sobre un array y retorna uno nuevo con los valores transformados.
• Método join: convierte un array de strings en una sola cadena.
• Tailwind CSS: clases utilitarias como bg-yellow-200 que se parametrizan vía JavaScript.
• Arrow functions: sintaxis moderna para declarar funciones de forma concisa.

La belleza de este patrón es que separa los datos (en el archivo de data) de la presentación (el template literal) y de la lógica de inserción (la función main). Si mañana cambias un emoji o agregas una red social, solo tocas el objeto de datos.

¿Qué cambios harías tú al template para adaptarlo a tu propio portafolio? Cuéntalo en los comentarios y comparte el resultado con la comunidad.