Construir una aplicación web desde cero con JavaScript vanilla te enseña a manipular el DOM sin atajos. Aquí vas a montar la lógica de un proyecto que consume la Fake API de Platzi, genera el HTML de forma dinámica e inserta cada elemento en el documento usando solo las APIs nativas del navegador.

Este recorrido es ideal si ya jugaste con Parcel y quieres dar el salto a Rollup, entendiendo cómo se importan estilos, imágenes y cómo se arma una función main con async/await.

Qué recursos necesitas antes de escribir la lógica

Antes de tocar JavaScript, prepara dos archivos base que tu proyecto necesita para verse bien y cargar correctamente.

• Un archivo styles.css dentro de la carpeta styles, con los estilos que se comparten en los recursos de la clase.
• Una imagen .png (puede ser tu logo personal) dentro de la carpeta assets, que más adelante vas a copiar y optimizar.

¿Por qué importar el CSS sin asignarle un nombre? Porque no lo referencias dentro del documento, pero Rollup detecta el import y, gracias a un plugin de CSS, lo minifica y lo prepara para producción o desarrollo.

Cómo configurar la API y los imports iniciales

La estrategia es declarar primero las constantes que no cambian y luego construir la lógica encima. Empieza capturando el body del documento, porque ahí vas a inyectar todo el contenido.

js const body = document.querySelector('body'); const API = 'https://api.escuelajs.co/api/v1/products?offset=5&limit=10';

import logo from './assets/logo.png'; import './styles/styles.css';

El endpoint usa dos parámetros de paginado importantes: offset=5 te posiciona en el producto número cinco, y limit=10 te entrega los siguientes diez productos a partir de ahí. Conocer la API a fondo te da ventaja en este proyecto y en cualquier otro que construyas después.

El logo sí lleva nombre porque lo vas a usar como referencia visual dentro del DOM. Los estilos no necesitan nombre porque solo le avisan al bundler que existen.

Cómo construir la función main con async await

La función principal centraliza la lectura de la API, la transformación de los datos y la inyección al DOM. Se declara como una arrow function asíncrona.

js const main = async () => { const response = await fetch(API); const products = await response.json();

const output = products.map(product => <article class="card"> <img src="${product.images[0]}" /> <h2>${product.title}<small>Precio: $${product.price}</small></h2> </article> ).join(''); };

Aquí pasan tres cosas clave. Primero, await fetch(API) espera la respuesta del servidor. Segundo, response.json() transforma esa respuesta en algo iterable. Tercero, products.map recorre cada producto y devuelve un nuevo array con plantillas HTML construidas con template literals.

¿Para qué sirve .join('') después de un map? Une todos los elementos del array en un solo string sin comas ni espacios extra, dejándolo listo para insertarlo como HTML.

Por qué accedemos a product.images[0]

La Fake API de Platzi devuelve images como un array de URLs por cada producto. Para mostrar solo la imagen principal, accedes a la posición cero del array. Si intentaras imprimir product.images directo, verías un texto raro con corchetes y comillas.

Cómo manipular el DOM con createElement y appendChild

Con el HTML ya generado en la variable output, el siguiente paso es crear los nodos reales y colgarlos del documento. Esto es manipulación pura del DOM, sin frameworks.

js const newItem = document.createElement('section'); newItem.classList.add('items'); newItem.innerHTML = output;

const newHeader = document.createElement('header'); const newImage = document.createElement('img'); newImage.src = logo; newHeader.appendChild(newImage);

body.appendChild(newHeader); body.appendChild(newItem);

Fíjate en el patrón: creas el elemento, le agregas clases o atributos, y luego lo cuelgas del padre con appendChild. Es el mismo patrón que abstraen Angular, React, Vue o Svelte, pero aquí lo ves al desnudo.

¿Qué es JavaScript vanilla? Es JavaScript puro, sin librerías ni frameworks. Manipulas el DOM directamente con APIs nativas como document.createElement, querySelector o appendChild.

Entender ambos mundos, el nativo y el de los frameworks, te hace un desarrollador más completo. Cuando un framework falla o necesitas optimizar, vuelves a estas bases.

Cómo se ejecuta la función main al final del script

Declarar main no la ejecuta. Tienes que invocarla explícitamente al final del archivo para que dispare toda la cadena: fetch, transformación, creación de nodos e inyección al DOM.

js main();

Con esa línea, tu aplicativo cobra vida. El siguiente paso es probar el compilado y levantar un entorno de desarrollo local para verlo en el navegador. ¿Ya tienes tu logo y tu CSS listos para arrancar? Cuéntame en los comentarios qué API estás conectando con tu propio proyecto.