alt + 96 = ``
Introduccion
Bienvenida al curso de Empaquetadores Web
¿Qué es un empaquetador de módulos de JavaScript?
Empaquetadores de módulos más populares
¿Por qué necesitamos un empaquetador de módulos?
Webpack
Primeros pasos en Webpack
Configuración de webpack
Proyecto a empaquetar: Tu propio árbol de links
Lógica del árbol de links tipo linktree
Empaquetando un proyecto con webpack
Parcel
Primeros pasos en Parcel
Proyecto a empaquetar: single page con Vanilla JavaScript
Lógica del proyecto single page
Empaquetando un proyecto con parcel
ESBuild
Primeros pasos en ESBuild
Proyecto a empaquetar: contador de React
Empaquetando nuestro proyecto con ESBuild
Configuración de ESBuild serve
Rollup
Primeros pasos en Rollup
Configurando plugins de Rollup
Proyecto a empaquetar: Fake API
Empaquetando nuestro proyecto con Rollup
Vite
Empaquetando un proyecto con Vite
Conclusiones
Ventajas y Desventajas de los empaquetadores
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Lógica del árbol de links tipo linktree
8/23Recursos
Aportes 3
Preguntas 0
Ordenar por:
Dejo el código de la clase con la data completa:
```js
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 `
${link.name}
${link.emoji}
`;
})
.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 ` \ \<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} \ \${link.emoji}\ \
`; }) .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
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?