Aquí tienen el archivo que hay que copiar al principio de la clase
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
La combinación de creatividad y programación puede resultar en proyectos impresionantes y personalizados, como un sitio web al estilo Linktree. Este proyecto te permitirá consolidar y compartir enlaces de manera efectiva a través de un solo link. En esta guía, exploraremos cómo configurar un proyecto personalizado utilizando HTML, JavaScript y Tailwind CSS. Prepárate para sacar el máximo provecho de tus habilidades de desarrollo web mientras trabajamos con una aplicación de Vanilla JavaScript y herramientas de empaque como Webpack.
El proyecto culminará en una landing page sencilla, pero efectiva. Aquí tienes los elementos clave que deberías considerar:
El resultado será una interfaz similar a Linktree, pero completamente bajo tu control.
Arrancaremos pegando en nuestro editor de código el HTML proveniente de un repositorio. Sin embargo, necesitarás hacer varios ajustes personales:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
<title>Tu Nombre</title>
</head>
<body>
<header>
<h1>Nombre Completo</h1>
<p>Breve Descripción</p>
</header>
<main id="links">
<!-- Los enlaces se insertarán aquí dinámicamente -->
</main>
<footer>
<!-- Tu mensaje en el footer -->
</footer>
</body>
</html>
Ahora, entramos a la parte emocionante: trabajar con JavaScript puro para hacer nuestro sitio dinámico. Aquí utilizaremos JavaScript para iterar sobre la lista de enlaces que quieras compartir y añadirlos al DOM.
const links = document.getElementById('links');
const loadLinks = () => {
const linkList = [
{ name: 'Mi Blog', url: 'https://mi-blog.com' },
{ name: 'Curso en Platzi', url: 'https://platzi.com' }
];
linkList.forEach(link => {
const anchor = document.createElement('a');
anchor.href = link.url;
anchor.textContent = link.name;
links.appendChild(anchor);
});
};
// Llama la función para cargar los enlaces
loadLinks();
Finalmente, para que tu proyecto sea más profesional y manejable, vale la pena automatizar el desarrollo utilizando Webpack. Aunque la instalación específica dependerá de las necesidades del proyecto, el objetivo es facilitar la importación y modificación de recursos, así como mejorar el desempeño del sitio.
A medida que implementes estos pasos, sigue adaptando y experimentando con la estructura para hacerla completamente tuya. Comparta tu versión final en las secciones de comentarios y preséntala a otros para obtener retroalimentación y continuar aprendiendo. Nunca subestimes el poder de la personalización y la automatización en el desarrollo web. ¡Adelante, desarrolla y aprende!
Aportes 5
Preguntas 2
Aquí tienen el archivo que hay que copiar al principio de la clase
const data =
{
name: "Oscar Barajas",
nickname: "gndx",
description: "...",
avatar: "...",
social:
[
{
name: "twitter",
url: "https://twitter.com/",
username: "",
},
{
name: "instagram",
url: "https://instagram.com/",
username: "",
},
],
links:
[
{
name: "blog",
url: "https://example.com/",
color: "red",
emoji: "📖",
},
{
name: "podcast",
url: "https://example.com/",
color: "yellow",
emoji: "💬",
},
],
footer: "Made with Love on Colombia",
};
El código que se muestra en la clase es diferente al que se muestra en Github y en los recursos de la clase … el lugar para poner el main es inmediatamente después de la línea 171 en VSCODE con el actual código que se encuentra en Github.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?