Sumérgete en Hydrogen, un marco de trabajo basado en React para construir tiendas en línea sin cabeza. Hydrogen está diseñado para el comercio de Shopify con todas las características que necesitas para una tienda en línea lista para producción. Proporciona un inicio rápido y un entorno de desarrollo rápido para que puedas centrarte en lo divertido: construir experiencias de comercio únicas. En este masterclass, crearemos una nueva tienda en línea y construiremos rápidamente una página de producto. Cubriremos cómo empezar, enrutamiento basado en archivos, obtener datos de la API de Storefront, los componentes integrados de Hydrogen y cómo aplicar estilos con Tailwind.
Aprenderás:
- Empezar con la plantilla hello-world en StackBlitz
- Enrutamiento basado en archivos para crear una ruta /productos/ejemplo
- Enrutamiento dinámico /productos/:handle
- Consultar la API de Storefront con GraphQL
- Mover la consulta dentro de la aplicación de Hydrogen
- Actualizar la consulta para obtener un producto por su identificador
- Mostrar título, precio, imagen y descripción.
- Estilizado con Tailwind
- Selector de variantes y botón de compra ahora
- Bonus si hay tiempo: página de colecciones
Requisitos previos:
- Un navegador basado en Chromium (StackBlitz)
- Idealmente experiencia con React. Un conocimiento general de desarrollo web también es válido.
This workshop has been presented at React Advanced 2022, check out the latest edition of this React Conference.
Comments