Construye una Tienda Personalizada en Shopify con Hydrogen

Recording available for Multipass and Full ticket holders
Please login if you have one.
Rate this content
Bookmark

Hydrogen es un marco de trabajo y SDK React con opiniones para construir tiendas personalizadas rápidas, alimentadas por Shopify. Hydrogen adopta los Componentes del Servidor React y utiliza Vite y Tailwind CSS. En este masterclass, los participantes tendrán una primera vista de Hydrogen, aprenderán cómo y cuándo usarlo, todo mientras construyen una tienda personalizada completamente funcional con el equipo de Hydrogen.

FAQ

Hydrogen es un marco de desarrollo web optimizado para construir tiendas personalizadas en Shopify. Permite a los desarrolladores construir tiendas personalizadas de forma más rápida, facilita la configuración para centrarse en la construcción y ayuda a destacar creativamente al hacer estas cosas.

Hydrogen se encuentra actualmente en Beta Cerrada con algunos comerciantes y socios seleccionados en Shopify. Para estar informado sobre futuras actualizaciones y lanzamientos, como la vista previa para desarrolladores, puedes registrarte en la lista de correo en Shopify.dev.

Hydrogen ofrece un conjunto de componentes, hooks y utilidades que manejan muchas tareas pesadas mientras construyes tu tienda. Además, permite la integración con herramientas y bibliotecas ya conocidas sin necesidad de centrarse en código de plantilla.

Puedes publicar comentarios sobre Hydrogen en el canal de Discord de Shopify, o comunicarte directamente por correo electrónico con los presentadores del taller. Shopify valora mucho el feedback para hacer mejoras en Hydrogen.

Con Hydrogen puedes desarrollar aplicaciones de comercio electrónico personalizadas y creativas, aprovechando la arquitectura rápida de Hydrogen y su compatibilidad con nuevas tecnologías web como los componentes de servidor React.

Hydrogen permite una combinación de obtención de datos estáticos y dinámicos entre el cliente y el servidor, optimizando así el rendimiento y la velocidad de la tienda creada.

Un componente headless en Hydrogen refleja la separación de responsabilidades entre la interfaz de usuario y la lógica empresarial. Estos componentes manejan toda la lógica empresarial de comercio y dejan la personalización relacionada con el estilo y la voz al desarrollador.

Matt Seccafien
Matt Seccafien
Cathryn Griffiths
Cathryn Griffiths
170 min
21 Oct, 2021

Comments

Sign in or register to post your comment.
Video transcription, chapters and summary available for users with access.

Watch more workshops on topic

Next.js 13: Estrategias de Obtención de Datos
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Estrategias de Obtención de Datos
Top Content
WorkshopFree
Alice De Mauro
Alice De Mauro
- Introducción- Prerrequisitos para la masterclass- Estrategias de obtención: fundamentos- Estrategias de obtención – práctica: API de obtención, caché (estática VS dinámica), revalidar, suspense (obtención de datos en paralelo)- Prueba tu construcción y sírvela en Vercel- Futuro: Componentes de servidor VS Componentes de cliente- Huevo de pascua de la masterclass (no relacionado con el tema, destacando la accesibilidad)- Conclusión
Construyendo una Aplicación de Shopify con React & Node
React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Construyendo una Aplicación de Shopify con React & Node
Top Content
WorkshopFree
Jennifer Gray
Hanna Chen
2 authors
Los comerciantes de Shopify tienen un conjunto diverso de necesidades, y los desarrolladores tienen una oportunidad única para satisfacer esas necesidades construyendo aplicaciones. Construir una aplicación puede ser un trabajo duro, pero Shopify ha creado un conjunto de herramientas y recursos para ayudarte a construir una experiencia de aplicación sin problemas lo más rápido posible. Obtén experiencia práctica construyendo una aplicación integrada de Shopify utilizando el CLI de la aplicación Shopify, Polaris y Shopify App Bridge.Te mostraremos cómo crear una aplicación que acceda a la información de una tienda de desarrollo y pueda ejecutarse en tu entorno local.
Crear un Sitio Web Editable Visualmente con Next.js Utilizando React Bricks, con Blog y Comercio Electrónico
React Summit 2023React Summit 2023
139 min
Crear un Sitio Web Editable Visualmente con Next.js Utilizando React Bricks, con Blog y Comercio Electrónico
WorkshopFree
Matteo Frana
Matteo Frana
- React Bricks: por qué lo construimos, qué es y cómo funciona- Crear una cuenta gratuita- Crear un nuevo proyecto con Next.js y Tailwind- Explorar la estructura de directorios- Anatomía de un Brick- Crear un nuevo Brick (Texto-Imagen)- Agregar un título y descripción con edición visual RichText- Agregar una imagen con edición visual- Agregar controles de barra lateral para editar props (padding y lado de la imagen)- Anidar Bricks usando el componente Repeater- Crear un brick de galería de imágenes- Publicar en Netlify o Vercel- Tipos de página y campos personalizados- Acceder a los valores meta de la página- Internacionalización- Cómo reutilizar contenido en varias páginas: Historias e Incrustaciones- Cómo crear un comercio electrónico con datos de productos de una base de datos externa y páginas de destino creadas visualmente en React Bricks- Funciones empresariales avanzadas: permisos flexibles, estructura bloqueada, componentes visuales personalizados
React Server Components Unleashed: Un profundo buceo en el desarrollo web de próxima generación
React Advanced Conference 2023React Advanced Conference 2023
153 min
React Server Components Unleashed: Un profundo buceo en el desarrollo web de próxima generación
Workshop
Maurice de Beijer
Maurice de Beijer
¡Prepárate para potenciar tus habilidades de desarrollo web con React Server Components! En esta inmersiva masterclass de 3 horas, desbloquearemos todo el potencial de esta tecnología revolucionaria y exploraremos cómo está transformando la forma en que los desarrolladores construyen aplicaciones web rápidas y eficientes.
Únete a nosotros mientras nos adentramos en el emocionante mundo de React Server Components, que combina a la perfección la renderización del lado del servidor con la interactividad del lado del cliente para un rendimiento y una experiencia de usuario inigualables. Obtendrás experiencia práctica a través de ejercicios prácticos, ejemplos del mundo real y orientación experta sobre cómo aprovechar el poder de los Server Components en tus propios proyectos.
A lo largo de la masterclass, cubriremos temas esenciales, incluyendo:
- Entender las diferencias entre los componentes del servidor y del cliente- Implementar Server Components para optimizar la obtención de datos y reducir el tamaño del paquete de JavaScript- Integrar Server y Client Components para una experiencia de usuario fluida- Estrategias para pasar datos eficazmente entre componentes y gestionar el estado- Consejos y mejores prácticas para maximizar los beneficios de rendimiento de React Server Components
Nivel de la masterclass:
No importa tu nivel actual de experiencia en React, esta masterclass te equipará con el conocimiento y las herramientas para llevar tu juego de desarrollo web a nuevas alturas. No pierdas esta oportunidad de mantenerte a la vanguardia y dominar la tecnología de vanguardia que está cambiando la cara del desarrollo web. ¡Inscríbete ahora y desata todo el poder de React Server Components!
Construyendo Tiendas Online de Alto Rendimiento con Shopify Hydrogen y Remix
React Advanced Conference 2023React Advanced Conference 2023
104 min
Construyendo Tiendas Online de Alto Rendimiento con Shopify Hydrogen y Remix
WorkshopFree
Alexandra Spalato
Alexandra Spalato
I. Introducción- Visión general de Shopify Hydrogen y Remix- Importancia del comercio electrónico sin cabeza y su impacto en la industria
II. Configurando Shopify Hydrogen- Instalando y configurando Hydrogen con Remix- Configurando la estructura del proyecto y los componentes
III. Creando Colecciones y Productos- Creando colecciones y productos utilizando los componentes React de Hydrogen- Implementando un Carrito de Compras- Construyendo un carrito de compras utilizando los componentes incorporados de Hydrogen
VI. Construyendo la página de inicio con Storyblok- Clonando el espacio y explicando cómo funciona- Implementando Storyblok en el repositorio- Creando los componentes Blok- Creando los componentes Shopify- Implementando personalización
Creación de tiendas personalizadas en Shopify con Hydrogen
React Summit 2022React Summit 2022
71 min
Creación de tiendas personalizadas en Shopify con Hydrogen
WorkshopFree
Abe Haskins
Megan Majewski
2 authors
Sumérgete en Hydrogen, un marco basado en React impulsado por Shopify. En este masterclass, exploraremos el marco y pondremos en marcha una tienda personalizada rápidamente. Aprenderás cómo (y cuándo) aprovechar los Componentes del Servidor de React y los mecanismos de almacenamiento en caché para construir tiendas personalizadas rápidas y dinámicas.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Simplificando los Componentes del Servidor
React Advanced Conference 2023React Advanced Conference 2023
27 min
Simplificando los Componentes del Servidor
Top Content
Los Componentes del Servidor son posiblemente el cambio más grande en React desde su lanzamiento inicial, pero muchos de nosotros en la comunidad hemos tenido dificultades para entenderlos. En esta charla intentaremos desglosar las diferentes partes móviles para que tengas una buena comprensión de lo que está sucediendo bajo el capó, y exploraremos la línea entre React y los marcos que se construyen sobre él.
Explorando los fundamentos de los Componentes del Servidor React
React Day Berlin 2023React Day Berlin 2023
21 min
Explorando los fundamentos de los Componentes del Servidor React
Top Content
He estado desarrollando un marco minimalista para los Componentes del Servidor React (RSC). Esta charla compartirá mi viaje para entender profundamente RSC desde una perspectiva técnica. Demostraré cómo operan las características de RSC a un nivel bajo y proporcionaré ideas sobre lo que RSC ofrece en su núcleo. Al final, deberías tener un modelo mental más fuerte de los fundamentos de los Componentes del Servidor React.
Componentes del Servidor: La Epopeya de la Representación UX
React Summit 2023React Summit 2023
26 min
Componentes del Servidor: La Epopeya de la Representación UX
Los componentes del servidor, introducidos en React v18, ponen fin a estas limitaciones, permitiendo representar completamente los componentes de React en el servidor, en un formato de abstracción intermedio sin necesidad de agregar al paquete de JavaScript.Esta charla tiene como objetivo cubrir los siguientes puntos:1. Una divertida historia de cómo necesitábamos CSR y cómo SSR comenzó a ocupar su lugar2. ¿Qué son los componentes del servidor y qué beneficios aportan, como un tamaño de paquete de JavaScript de 0?3. Demostración de una aplicación simple utilizando representación en el lado del cliente, SSR y componentes del servidor, y análisis de las mejoras de rendimiento y comprensión de cuándo usar cada enfoque4. Mi opinión sobre cómo cambiará la representación de la interfaz de usuario con este enfoque
Una Guía Práctica para Migrar a Componentes de Servidor
React Advanced Conference 2023React Advanced Conference 2023
28 min
Una Guía Práctica para Migrar a Componentes de Servidor
Los Componentes de Servidor son la nueva gran cosa, pero hasta ahora gran parte del discurso a su alrededor ha sido abstracto. Cambiemos eso. Esta charla se centrará en el lado práctico de las cosas, proporcionando un mapa de ruta para navegar el viaje de migración. Comenzando desde una aplicación que utiliza el antiguo enrutador de páginas de Next.js y React Query, desglosaremos este viaje en un conjunto de pasos accionables e incrementales, deteniéndonos solo cuando tengamos algo que se pueda enviar y que sea claramente superior a lo que comenzamos. También discutiremos los próximos pasos y estrategias para adoptar gradualmente más aspectos de este paradigma transformador.
Baterías Incluidas Reimaginadas - El Resurgimiento de GraphQL Yoga
GraphQL Galaxy 2021GraphQL Galaxy 2021
33 min
Baterías Incluidas Reimaginadas - El Resurgimiento de GraphQL Yoga
El Guild ha lanzado recientemente Envelop - un nuevo y moderno Framework de Servidor GraphQL y sistema de plugins. En esta charla compartiré una breve descripción de Envelop y por qué probablemente deberías actualizar tu servidor GraphQL existente a él.
Componentes de Servidor React
React Day Berlin 2023React Day Berlin 2023
27 min
Componentes de Servidor React
Los Componentes de Servidor React son una forma más nueva de trabajar con React que se adopta ampliamente en marcos de trabajo como Next.js. En esta charla, veremos cómo funcionan y se ejecutan en el lado del servidor, y cómo encajan con la renderización en el servidor y las aplicaciones tradicionales de React.