Es muy buena idea leer la documentación, pero no solo la de parcel o la Fake API de platzi, sino en general en todo, te sorprenderá todo lo que aprendes solo leyendola
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,
Proyecto a empaquetar: single page con Vanilla JavaScript
11/23Recursos
¿Cómo construir una aplicación utilizando una Fake API?
¡Conquista el mundo del desarrollo web preparando tu aplicación con una Fake API! Para construir un sitio dinámico que muestre productos, comenzaremos trabajando con HTML, CSS, y JavaScript, aprovechando la API Fake. Exploraremos cómo estructurar tu proyecto desde cero, utilizando herramientas eficaces como Visual Studio Code, asegurando que cada paso construya la base para aplicaciones más complejas.
¿Qué es Fake API y para qué sirve?
Fake API es una herramienta que simula la estructura y funcionalidad de una API real. Se utiliza principalmente para:
- Probar aplicaciones antes de que una API real esté disponible.
- Practicar el consumo de APIs en pruebas de desarrollo.
- Experimentar con llamadas de datos remotas de una forma controlada.
En nuestro caso, Fake API suministra datos de productos que incluyen imágenes, tÃtulos y precios.
¿Cómo configurar el entorno de desarrollo con HTML y CSS?
Inicia el desarrollo creando una estructura base en HTML y CSS para presentar nuestros productos en el navegador.
-
Crea la base HTML: Usa Visual Studio Code para generar rápidamente una plantilla HTML.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> <title>Fake API Example</title> </head> <body> <main class="main"> <div id="app"></div> </main> <script defer src="index.js"></script> </body> </html> -
Integra estilos CSS: Añade el archivo
styles.csspara mejorar la presentación visual. Este archivo deberÃa contener los estilos que creaste o adaptaste para hacer que tu aplicación luzca atractiva.
¿Cómo conectar con la Fake API usando JavaScript?
Una vez establecida la estructura visual, conecta tu aplicación con la Fake API para empezar a consumir datos.
-
Define las constantes necesarias:
const API = 'https://api.escuelajs.co/api/v1/products?offset=0&limit=10'; -
Prepara el DOM para recibir los datos:
const app = document.getElementById('app');
¿Qué procede después de la configuración base?
La magia sucede al integrar JavaScript con la API para dinamizar tu aplicación. Esto incluye habilidades para manipular el Document Object Model (DOM) y técnicas avanzadas como el uso de fetch, async y await para simplificar la interacción asÃncrona.
¿Cómo maximizar el aprendizaje y mejorar proyectos?
Por último, recuerda que cada proyecto es una excelente oportunidad para expandir tu portafolio. Mejora y personaliza cada proyecto con:
- Cambios estéticos en el CSS para un diseño atractivo.
- Funcionalidades adicionales como filtros o paginación.
- Exploración de la documentación de las herramientas y APIs utilizadas para aprender las mejores prácticas y caracterÃsticas adicionales.
Sumérgete en la documentación para potenciar tus habilidades y adapta lo aprendido a otros proyectos, empleando tu creatividad e ingenio para seguir destacando en el desarrollo web. ¡Tu camino hacia la maestrÃa en programación solo está comenzando, asà que sigue aprendiendo y creando!
Aportes 3
Preguntas 3
Ordenar por:
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400&display=swap");
body {
margin: 0;
padding: 0;
color: #3c484e;
font-family: "Open Sans", sans-serif;
}
.Main {
padding: 10px;
grid-template-columns: minmax(auto, 768px);
display: grid;
justify-content: center;
}
.Items {
grid-template-columns: repeat(2, 1fr);
grid-gap: 1.5rem;
grid-row-gap: 1.5em;
display: grid;
}
.Card {
text-decoration: none;
box-shadow: 8px 14px 38px rgba(39, 44, 49, 0.06),
1px 3px 8px rgba(39, 44, 49, 0.03);
border-radius: 5px;
margin: 0 0 20px 0;
display: block;
animation-duration: 4s;
animation-name: fade;
}
.Card img {
width: 100%;
height: auto;
border-radius: 5px 5px 0 0;
}
.Card h2 {
font-size: 18px;
font-weight: 300;
padding: 5px 10px;
display: flex;
justify-content: space-between;
}
@keyframes fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
URL de la API: [`https://api.escuelajs.co/api/v1/products?offset=0&limit=10`](https://api.escuelajs.co/api/v1/products?offset=0\&limit=10)
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?