Manipulación del DOM con map y template literals
Contenido del curso
Webpack
Parcel
ESBuild
Rollup
Vite
Conclusiones
Manipulación del DOM con map y template literals
Manipulación del DOM con map y template literals
Contenido del curso
Gerardo Lara
Rubén Ernesto Aragón Gil
Kamilo Stevan Alomías Correa
Kenneth Angulo L
Jefred Bedoya
Harry A. Jiménez A.
Max Andy Diaz Neyra
yeferson soto
Cristian Blandon
Para los que preguntan por que agrega el símbolo $ antes de la variable.
El símbolo $ se suele utilizar como una convención para indicar que una variable tiene un propósito especial o contiene un elemento del DOM. Esto ayuda a que el código sea más legible y entendible, especialmente en proyectos más grandes. No cambia el funcionamiento del código, simplemente es una práctica común.
alt + 96 = ``
En mi caso como no soy creador de contenido (aún) reemplacé los links por algunos certificados que he obtenido, también cambié los emojis por IDs visuales de cada curso en mención
¿Puedo usar esto para inyectar clases dinámicas?
Absolutamente. Los template strings (las comillas francesas o invertidas `) son perfectos para construir sistemas de diseño dinámicos. En lugar de escribir docenas de clases estáticas, puedes tratar los nombres de las clases de CSS como variables.
Por ejemplo, si usas un framework de utilidad como Tailwind CSS, puedes inyectar propiedades directamente desde tu objeto de datos usando la sintaxis ${link.color}. Si tu base de datos dice que el color es yellow, tu código generará dinámicamente clases como bg-yellow-200 o text-yellow-800.
Esto convierte tu código en una fábrica de componentes. Solo necesitas diseñar la estructura HTML una vez (el esqueleto) y dejar que los datos decidan la pintura y la decoración. Es una técnica extremadamente poderosa para crear tarjetas o botones que cambian de apariencia automáticamente.
Estructura de la Lógica Principal
La función main actúa como el motor que orquesta la manipulación del DOM, reemplazando el contenido estático del HTML por datos dinámicos.
Pasos Clave de Implementación
document.createTextNode para inyectar datos de forma segura..map() sobre el array de datos para generar bloques HTML mediante template strings.(${link.propiedad}) para inyectar dinámicamente valores como URLs, colores y emojis..join('') es fundamental para convertir el array resultante en una cadena de texto limpia sin comas.document.createElement.innerHTML.appendChild para montar los nuevos elementos en el árbol del DOM.Yo lo desarrollé de la siguiente manera:
// HTML //<h2></h2> (Hay un error con el editor de Platzi, me lo cambia cuando lo publico, lo tuve que comentar) <p id="description"></p> <ul id="social-links"></ul> // JS const $name = document.querySelector('h1'); const $text = document.getElementById('description'); const $social = document.getElementById('social-links'); const data = { name: "Harry J. Arena", description: "UI/UX Designer, Front-End.", social: [ { name: "LinkedIn", url: "https://linkedin.com/in/", username: "hadevelopux", }, { name: "Behance", url: "https://behance.net/", username: "hadevelopux", }, { name: "GitHub", url: "https://github.com/", username: "hadevelopux", }, { name: "Platzi", url: "https://platzi.com/p/", username: "hadevelopux", }, ], }; const text = () => { let name = document.createTextNode(data?.name); let description = document.createTextNode(data?.description); $name.appendChild(name); $text.appendChild(description); } const main = () => { let social = data?.social?.map((link) => { return `<li><a href="${link.url}${link.username}" class="link">${link.name}</a></li>`; }).join(''); let newItem = document.createElement("section"); newItem.innerHTML = social; $social.appendChild(newItem); } text(); main();
Dejo el código de la clase con la data completa:
const $links = document.getElementById("links"); const $name = document.querySelector("h1"); const data = { name: "Max Diaz", nickname: "maxter", description: "...", avatar: "...", social: [ { name: "platzi", url: "https://platzi.com/", username: "", }, { name: "youtube", url: "https://www.youtube.com/", username: "", }, { name: "github", url: "https://github.com/", username: "", }, { name: "instagram", url: "https://instagram.com/", username: "", }, { name: "twitter", url: "https://twitter.com/", username: "", }, { name: "linkedin", url: "https://www.linkedin.com/", username: "", }, { name: "twitch", url: "https://twitch.tv/", username: "", }, { name: "discord", url: "https://discord.gg/", username: "", }, ], links: [ { name: "mentorías", url: "https://example.com/", color: "fuchsia", emoji: "💻", }, { name: "blog", url: "https://example.com/", color: "red", emoji: "📖", }, { name: "podcast", url: "https://example.com/", color: "yellow", emoji: "💬", }, { name: "cursos", url: "https://example.com/", color: "lime", emoji: "🎒", }, { name: "sponsors", url: "https://example.com/", color: "rose", emoji: "🚀", }, ], footer: "Made with Love on Perú", }; const main = () => { let name = document.createTextNode(data.name); let links = data.links .map((link) => { return ` <div class="bg-${link.color}-200 px-4 py-5 w-full flex justify-between"> <a class="text-sm font-bold text-${link.color}-600 text-center hover:text-${link.color}-800 cursor-pointer" href=${link.url} target="_blank" > ${link.name} </a> <span>${link.emoji}</span> </div>`; }) .join(""); let newItem = document.createElement("section"); newItem.innerHTML = links; $links.appendChild(newItem); $name.appendChild(name); }; main(); ```const $links = document.getElementById("links");const $name = document.querySelector("h1"); const data = { name: "Max Diaz", nickname: "maxter", description: "...", avatar: "...", social: \[ { name: "platzi", url: "https://platzi.com/", username: "", }, { name: "youtube", url: "https://www.youtube.com/", username: "", }, { name: "github", url: "https://github.com/", username: "", }, { name: "instagram", url: "https://instagram.com/", username: "", }, { name: "twitter", url: "https://twitter.com/", username: "", }, { name: "linkedin", url: "https://www.linkedin.com/", username: "", }, { name: "twitch", url: "https://twitch.tv/", username: "", }, { name: "discord", url: "https://discord.gg/", username: "", }, ], links: \[ { name: "mentorías", url: "https://example.com/", color: "fuchsia", emoji: "💻", }, { name: "blog", url: "https://example.com/", color: "red", emoji: "📖", }, { name: "podcast", url: "https://example.com/", color: "yellow", emoji: "💬", }, { name: "cursos", url: "https://example.com/", color: "lime", emoji: "🎒", }, { name: "sponsors", url: "https://example.com/", color: "rose", emoji: "🚀", }, ], footer: "Made with Love on Perú",}; const main = () => { let name = document.createTextNode(data.name); let links = data.links .map((link) => { return ` \<div class="bg-${link.color}-200 px-4 py-5 w-full flex justify-between"> \<a class="text-sm font-bold text-${link.color}-600 text-center hover:text-${link.color}-800 cursor-pointer" href=${link.url} target="\_blank" > ${link.name} \</a> \<span>${link.emoji}\</span> \</div>`; }) .join(""); let newItem = document.createElement("section"); newItem.innerHTML = links; $links.appendChild(newItem); $name.appendChild(name);}; main();
lo ideal sería usar el DocumentFragment(); para una mejor optimización del DOM
En este caso la "optimización" al usar DocumentFragment sería insignificante, ya que solo se hace una inserción en el DOM (y DocumentFragment es ideal para múltiples inserciones). Un poco de información para evitar la desinformación: Does using a document fragment really improve performance?