Versión en EspañolES

Construye una Tienda Personalizada en Shopify con Hydrogen

Recording and certification are available to Multipass and Full ticket holders only

Please login if you have one.

Get Multipass

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.

This workshop has been presented at React Advanced 2021, check out the latest edition of this React Conference.

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

Cathryn Griffiths

170 min

21 Oct, 2021

Comments

Video Summary and Transcription

Hydrogen es un marco de desarrollo web optimizado para construir tiendas personalizadas alimentadas por Shopify. Proporciona una colección de componentes, hooks y utilidades que manejan la carga pesada y permiten tiendas altamente personalizables. Los componentes de Hydrogen son headless y proporcionan valores predeterminados sensatos. El masterclass cubre temas como la consulta de datos de productos, la construcción de páginas de productos y la personalización de elementos utilizando Render Props. También explora la funcionalidad del carrito y la capacidad de generar respuestas personalizadas, como catálogos en PDF.

Available in English: Build a Custom Storefront on Shopify with Hydrogen

Video transcription and chapters available for users with access.

Available in other languages:

Watch more workshops on topic

Next.js 13: Estrategias de Obtención de Datos

React Day Berlin 2022

53 min

Next.js 13: Estrategias de Obtención de Datos

Top Content

WorkshopFree

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

performance react server components next.js best practices

La Puerta al Backend: Guía del Desarrollador Frontend para el Desarrollo Full-Stack

React Summit US 2023

160 min

La Puerta al Backend: Guía del Desarrollador Frontend para el Desarrollo Full-Stack

Top Content

WorkshopFree

Amy Dutton

Esta masterclass te guiará a través del ciclo de vida del desarrollo de productos para crear una aplicación web del mundo real. Aprenderás sobre los Componentes del Servidor React, construyendo un sistema de diseño dentro de Storybook, y utilizando el desarrollo frontend para acercarte a convertirte en un desarrollador full-stack. La masterclass cubrirá el aumento de la confianza en tu aplicación con pruebas unitarias e implementando autenticación y autorización. Tendrás la oportunidad de trabajar a través de las características del producto y examinar un proyecto real de RedwoodJS, obteniendo valiosa experiencia en el desarrollo de productos del mundo real. RedwoodJS hace que sea simple acercarse al desarrollo full-stack, y esta masterclass te dará las habilidades que necesitas para crear tus propias aplicaciones web del mundo real.

react react server components

Construyendo una Aplicación de Shopify con React & Node

React Summit Remote Edition 2021

87 min

Construyendo una Aplicación de Shopify con React & Node

Top Content

WorkshopFree

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.

shopify with react e-commerce shopify case study

Patrones Avanzados de Despliegue de Aplicaciones con Componentes de Servidor React (feat. un Marco RSC DIY)

React Summit US 2023

104 min

Patrones Avanzados de Despliegue de Aplicaciones con Componentes de Servidor React (feat. un Marco RSC DIY)

Top Content

WorkshopFree

Greg Brimble

El ecosistema de desarrolladores siempre está avanzando rápidamente y este año no ha sido una excepción. Los Componentes de Servidor React pueden ofrecer una mejora significativa a la experiencia del desarrollador y al rendimiento de la aplicación. Pero creo que es justo decir que este nuevo paradigma de servidor primero puede ser complicado de entender!En la primera mitad de esta masterclass, exploraremos los Componentes de Servidor React desde cero: construyendo nuestro propio mini marco meta para ayudarnos a entender cómo funcionan los RSCs. Descubriremos exactamente qué se produce en una construcción RSC y conectaremos esas piezas para formar una aplicación completa.A continuación, ¡lo desplegaremos! Cloudflare también ha tenido un año ocupado — Smart Placement, en particular, es una nueva tecnología que hemos desarrollado que se ajusta perfectamente al modelo RSC. Exploraremos por qué eso tiene sentido para nuestra aplicación de masterclass, y realmente lo desplegaremos en la Plataforma de Desarrolladores de Cloudflare.Finalmente, ampliaremos un poco más nuestra aplicación, utilizando D1 (nuestra base de datos SQL sin servidor) para mostrar realmente el poder del Componente de Servidor React cuando se combina con Smart Placement.Deberías salir de esta masterclass con una mayor comprensión de cómo funcionan los Componentes de Servidor React (tanto detrás de las escenas como también cómo tú como desarrollador puedes usarlos día a día), así como una visión de algunos de los nuevos patrones de despliegue que ahora son posibles después de las recientes innovaciones en el espacio de la plataforma.

react server components

Crea un sitio web editable visualmente con Next.js utilizando React Bricks, con blog y comercio electrónico

React Summit 2023

139 min

Crea un sitio web editable visualmente con Next.js utilizando React Bricks, con blog y comercio electrónico

Top Content

WorkshopFree

Matteo Frana

- React Bricks: por qué lo construimos, qué es y cómo funciona- Crea una cuenta gratuita- Crea un nuevo proyecto con Next.js y Tailwind- Explora la estructura del directorio- Anatomía de un Brick- Crea un nuevo Brick (Texto-Imagen)- Añade un título y descripción con edición visual RichText- Añade una imagen con edición visual- Añade controles de barra lateral para editar props (relleno y lado de la imagen)- Anidación de Bricks utilizando el componente Repeater- Crea un brick de galería de imágenes- Publica en Netlify o Vercel- Tipos de página y campos personalizados- Acceso a los valores meta de la página- Internacionalización- Cómo reutilizar contenido en varias páginas: Historias y incrustaciones- Cómo crear un comercio electrónico con datos de productos de una base de datos externa y páginas de aterrizaje creadas visualmente en React Bricks- Características empresariales avanzadas: permisos flexibles, estructura bloqueada, componentes visuales personalizados

e-commerce next.js react bricks react state management

Construyendo Componentes de Servidor Reutilizables en NextJS

React Summit US 2023

88 min

Construyendo Componentes de Servidor Reutilizables en NextJS

Workshop

2 authors

React continúa evolucionando su capacidad beta, los Componentes de Servidor de React, y continúan desarrollándolos en asociación con marcos como NextJS.En esta masterclass, los asistentes aprenderán qué son los Componentes de Servidor de React, cómo construirlos y usarlos eficazmente en NextJS, y se centrarán en una de las principales ventajas de React/NextJS: la reutilización a través de componentes.También cubriremos tecnologías beta relacionadas habilitadas por el directorio `app`, como los layouts anidados y las acciones del servidor (capacidad alfa/experimental).¡Únete a nosotros para esta masterclass práctica de 120 minutos!Tecnologías:
React, JavaScript/Typescript, NextJS, Miro

react server components next.js

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 2023

27 min

Simplificando los Componentes del Servidor

Top Content

Mark Dalgleish

Shopify

React server components simplify server-side rendering and provide a mental model of components as pure functions. Using React as a library for server components allows for building a basic RSC server and connecting it to an SSR server. RSC responses are serialized virtual DOM that offload code from the client and handle interactivity. The client manifest maps serialized placeholders to real components on the client, enabling dynamic rendering. Server components combine the best of classic web development and progressive enhancement, offering the advantage of moving logic from the client to the server.

react server components

Explorando los fundamentos de los Componentes del Servidor React

React Day Berlin 2023

21 min

Explorando los fundamentos de los Componentes del Servidor React

Top Content

Daishi Kato

Zustand, Jotai & Waku author

This Talk introduces React Server Components (RSC) and explores their serialization process. It compares RSC to traditional server-side rendering (SSR) and explains how RSC handles promises and integrates client components. The Talk also discusses the RSC manifest and deserialization process. The speaker then introduces the Waku framework, which supports bundling, server, routing, and SSR. The future plans for Waku include integration with client state management libraries.

react server components

Y Ahora Entiendes los Componentes del Servidor React

React Summit 2024

27 min

Y Ahora Entiendes los Componentes del Servidor React

Top Content

Kent C. Dodds

Creator of EpicWeb.dev, EpicReact.Dev, TestingJavaScript.com

In this Talk, Kent C. Dodds introduces React Server Components (RSCs) and demonstrates how to build them from scratch. He explains the process of integrating RSCs with the UI, switching to RSC and streaming for improved performance, and the benefits of using RSCs with async components. Dodds also discusses enhancements with streaming and server context, client support and loaders, server component rendering and module resolution, handling UI updates and rendering, handling back buttons and caching, and concludes with further resources for diving deeper into the topic.

react server components

Una Guía Práctica para Migrar a Componentes de Servidor

React Advanced 2023

28 min

Una Guía Práctica para Migrar a Componentes de Servidor

Top Content

Fredrik Höglund

ephem.dev

React query version five is live and we'll be discussing the migration process to server components using Next.js and React Query. The process involves planning, preparing, and setting up server components, migrating pages, adding layouts, and moving components to the server. We'll also explore the benefits of server components such as reducing JavaScript shipping, enabling powerful caching, and leveraging the features of the app router. Additionally, we'll cover topics like handling authentication, rendering in server components, and the impact on server load and costs.

react react 18 react server components react query next.js case study

Componentes del Servidor: La Épica Historia de Renderizar UX

React Summit 2023

26 min

Componentes del Servidor: La Épica Historia de Renderizar UX

Top Content

Nikhil Sharma

Postman

This Talk introduces server components in React, which provide an intermediate format for rendering and offer advantages for both client-side and server-side rendering. Server components reduce bundle size on the client and improve search engine optimization. They abstract the rendering process, allowing for faster rendering and flexibility in choosing where to render components. While server components are still in the experimental stage, Next.js is a good starting point to try them out.

react react 18 performance react server components ssr

RSCs en Producción: 1 Año Después

React Summit 2024

24 min

RSCs en Producción: 1 Año Después

Theo Browne

TypeScript YouTuber who happens to run dev tools company. Known primarily for memes, hot takes, and building useful things for devs such as UploadThing and the T3 Stack.

This Talk explores the experience of shipping server components in production and highlights the benefits and challenges of using Server Components in Next.js apps. The Talk discusses the deployment of UploadThing and the use of AppRouter for safe production usage. It delves into the implementation of different layouts, data fetching, and code centralization for improved performance. The Talk also covers the use of server components for performance optimization and latency handling. Additionally, it explores the use of Edge and Lambda for partial pre-rendering and the challenges faced with webpack performance and hydration. Overall, the Talk emphasizes the benefits and challenges of working with Server Components in Next.js applications.

react server components