Construir una Single Page Application con Vanilla JavaScript y Parcel es posible sin frameworks ni librerías externas. Aquí aprenderás a estructurar la lógica base, consumir una API con fetch y async/await, y renderizar productos en el DOM usando template literals, todo optimizado por Parcel.

¿Cómo se estructura la función main con async en JavaScript?

La lógica arranca dentro del archivo index.js con una arrow function llamada main. Esta función concentra la manipulación del DOM y el llamado a la API, por lo que se declara como async para poder esperar la respuesta antes de transformarla.

js const main = async () => { // lógica aquí }

Usar async te habilita la palabra reservada await, que pausa la ejecución hasta que la promesa se resuelva. Así puedes encadenar el fetch, transformar la respuesta a JSON y luego construir el template sin caer en callbacks anidados.

¿Qué significa vanilla JavaScript? Es JavaScript puro, sin frameworks ni librerías. Te permite entender las bases del lenguaje y darte cuenta de que muchos proyectos no necesitan herramientas adicionales para funcionar bien.

¿Cómo consumir una API con fetch y await en una SPA?

Dentro de main, la primera tarea es traer los datos. Se crea una constante response que guarda lo que devuelve fetch apuntando a la URL de la API, y luego una constante products que transforma esa respuesta a JSON.

js const response = await fetch(API) const products = await response.json()

Antes de llegar a este punto, conviene haber probado la API en una herramienta como Insomnia. Eso te permite entender la estructura de los datos en un entorno seguro y descubrir qué campos vas a usar después.

Al inspeccionar la respuesta en la pestaña Network del navegador, encontrarás una estructura más legible: un campo title para el nombre, un price para el precio y un images que viene como array de strings. Saber esto antes de codear te ahorra errores.

¿Cómo renderizar productos en el DOM con template literals?

Con los datos en mano, se construye una constante output que aplica map sobre products. Aquí entra el optional chaining con products?.map para evitar que la app falle si los datos aún no están disponibles.

Dentro del map, cada producto entra a una arrow function que retorna un bloque HTML armado con template literals (las comillas francesas). Esto permite intercalar variables dentro del HTML usando el símbolo de pesos y handlebars.

js const output = products?.map((product) => { return <article class="card"> <image src="${product.images[0]}" /> <h2>${product.title} <small>$${product.price}</small></h2> </article> }).join('')

El join('') al final es clave: elimina las comas que map añadiría entre cada elemento del array al convertirlo a string. Sin él, verías comas sueltas dentro del HTML renderizado.

¿Para qué sirve el optional chaining en map? Evita que el código falle si la variable aún no tiene valor. Si products es undefined, products?.map simplemente no se ejecuta en lugar de romper la app.

¿Cómo insertar el output en el DOM con createElement y appendChild?

Una vez listo el template, se crea un nuevo elemento section con document.createElement, se le añade la clase items con classList.add, y se le inyecta el output mediante innerHTML.

js let newItem = document.createElement('section') newItem.classList.add('items') newItem.innerHTML = output app.appendChild(newItem)

Finalmente, app.appendChild(newItem) cuelga la sección del contenedor principal. Al cerrar la función con main(), toda la lógica se ejecuta y los productos aparecen en pantalla.

¿Por qué usar Parcel en lugar de un framework?

Parcel optimiza la compilación, el servidor local y el real time reload sin pedirte configuraciones largas. Eso significa que puedes enfocarte en construir la lógica del proyecto mientras la herramienta se encarga del bundling y los assets.

• Compila HTML, CSS y JavaScript sin archivo de configuración.
• Levanta un servidor local con recarga automática.
• Prepara el proyecto para despliegue en producción.

Apoyarte en el editor también suma. Visual Studio Code marca errores comunes, como confundir una coma con un punto y coma dentro de un template, y eso evita que rompas la lógica antes de ejecutar.

En la siguiente clase añadirás los scripts para compilar, levantar el entorno local y desplegar el proyecto. ¿Ya probaste la API en Insomnia antes de empezar a codear? Cuéntame en los comentarios cómo te fue.