English versionEN

Build a Product Page with Shopify’s Hydrogen Framework

Please sign in to watch this workshop.

Get hands on with Hydrogen, a React-based framework for building headless storefronts. Hydrogen is built for Shopify commerce with all the features you need for a production-ready storefront. It provides a quick start, build-fast environment so you can focus on the fun stuff - building unique commerce experiences. In this workshop we’ll scaffold a new storefront and rapidly build a product page. We’ll cover how to get started, file-based routing, fetching data from the Storefront API, Hydrogen’s built-in components and how to apply styling with Tailwind.

You will know:

- Get started with the hello-world template on StackBlitz

- File-based routing to create a /products/example route

- Dynamic routing /products/:handle

- Hit the Storefront API with GraphQL

- Move the query into the Hydrogen app

- Update the query to fetch a product by handle

- Display title, price, image & description.

- Tailwind styling

- Variant picker and buy now button

- Bonus if there’s time: Collections page

Prerequisites:

- A Chromium-based browser (StackBlitz)

- Ideally experience with React. A general web development background would be fine.

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

FAQ

During the Hydrogen workshop, participants are guided through building a product display page using Hydrogen. This involves setting up a project, configuring API connections, and creating dynamic and static routes to display product data.

Yes, the Hydrogen workshop provides a starter project that participants can customize. This project can be accessed and modified in StackBlitz, an online code editor, allowing developers to experiment and extend the project as needed.

In Hydrogen, server components (files ending in .server.jsx) render on the server, while client components (files ending in .client.jsx) run on the client side. Files ending in .jsx can run on both the server and client, depending on where they are included.

Hydrogen is Shopify's opinionated framework for building custom storefronts. It utilizes React server components for a seamless developer experience and enhanced performance, focusing on delivering fast and efficient websites.

Hydrogen uses GraphQL for API queries. Developers can utilize GraphiQL, a graphical interactive in-browser GraphQL IDE, to test and build their queries. This helps in fetching data like product details from Shopify's Storefront API efficiently.

Hydrogen comes equipped with numerous built-in components and tools like the MediaFile component for handling images and videos, and Shopify provider components that abstract API interactions, simplifying the process of building ecommerce features.

David Witt

81 min

19 Oct, 2022

Comments

Available in other languages:

Watch more workshops on topic

Mastering React Server Components and Server Actions in React 19

React Summit US 2024

150 min

Mastering React Server Components and Server Actions in React 19

Featured Workshop

Maurice de Beijer

Calling all React developers! Join us for an immersive 4-hour workshop diving deep into React Server Components and Server Actions. Discover how these game-changing technologies are revolutionizing web development and learn how to harness their full potential to build lightning-fast, efficient applications.

Explore the world of React Server Components, seamlessly blending server-side rendering with client-side interactivity for unmatched performance and user experience. Dive into React Server Actions to see how they combine client-side interactivity with server-side logic, making it easier to develop interactive applications without traditional API constraints.

Get hands-on experience with practical exercises, real-world examples, and expert guidance on implementing these technologies into your projects. Learn essential topics such as the differences between Server and Client Components, optimizing data fetching, passing data effectively, and maximizing performance with new React hooks like useActionState, useFormStatus and useOptimistic.

Whether you're new to React or a seasoned pro, this workshop will equip you with the knowledge and tools to elevate your web development skills. Stay ahead of the curve and master the cutting-edge technology of React 19. Don't miss out - sign up now and unleash the full power of React!

react server components

Next.js 13: Data Fetching Strategies

React Day Berlin 2022

53 min

Next.js 13: Data Fetching Strategies

Top Content

Workshop

Alice De Mauro

- Introduction- Prerequisites for the workshop- Fetching strategies: fundamentals- Fetching strategies – hands-on: fetch API, cache (static VS dynamic), revalidate, suspense (parallel data fetching)- Test your build and serve it on Vercel- Future: Server components VS Client components- Workshop easter egg (unrelated to the topic, calling out accessibility)- Wrapping up

react server components performance next.js best practices

The Gateway to Backend: A Frontend Developer's Guide to Full-Stack Development

React Summit US 2023

160 min

The Gateway to Backend: A Frontend Developer's Guide to Full-Stack Development

Top Content

Workshop

Amy Dutton

This workshop will guide you through the product development life cycle of creating a real-world web application. You will learn about React Server Components, building a design system within Storybook, and using frontend development to approach becoming a full-stack developer. The workshop will cover increasing confidence in your application with unit tests and implementing authentication and authorization. You'll have the opportunity to work through product features and examine a real-world RedwoodJS project, gaining valuable experience in real-world product development. RedwoodJS makes it simple to approach full-stack development, and this workshop will give you the skills you need to create your own real-world web applications.

react server components react

Building a Shopify App with React & Node

React Summit Remote Edition 2021

87 min

Building a Shopify App with React & Node

Top Content

Workshop

2 authors

Shopify merchants have a diverse set of needs, and developers have a unique opportunity to meet those needs building apps. Building an app can be tough work but Shopify has created a set of tools and resources to help you build out a seamless app experience as quickly as possible. Get hands on experience building an embedded Shopify app using the Shopify App CLI, Polaris and Shopify App Bridge.We’ll show you how to create an app that accesses information from a development store and can run in your local environment.

shopify with react e-commerce shopify case study

Advanced Application Deployment Patterns with React Server Components (feat. a DIY RSC Framework)

React Summit US 2023

104 min

Advanced Application Deployment Patterns with React Server Components (feat. a DIY RSC Framework)

Top Content

Workshop

Greg Brimble

The developer ecosystem is always moving fast and this year has proved no exception. React Server Components can offer a significant improvement to developer experience and to application performance. But I think it's fair to say that this new server-first paradigm can be tricky to wrap your head around!In the first half of this workshop, we'll explore React Server Components from the ground-up: building our own mini meta-framework to help us understand how RSCs work. We'll discover exactly what is produced by an RSC build and we'll connect those pieces together to form a full application.Next, we'll deploy it! Cloudflare have also had a busy year too — Smart Placement, in particular, is a new technology that we've developed which fits the RSC model perfectly. We'll explore why that makes sense for our workshop app, and we'll actually deploy it onto the Cloudflare Developer Platform.Finally, we'll build out our app a little further, using D1 (our serverless SQL database) to really show off the React Server Component's power when combined with Smart Placement.You should come away from this workshop with a greater understanding of how React Server Components work (both behind-the-scenes and also how you as a developer can use them day-to-day), as well as insight into some of the new deployment patterns that are now possible after recent innovations in the platform space.

react server components

Create a Visually Editable Next.js Website Using React Bricks, With Blog and E-commerce

React Summit 2023

139 min

Create a Visually Editable Next.js Website Using React Bricks, With Blog and E-commerce

Top Content

Workshop

Matteo Frana

- React Bricks: why we built it, what it is and how it works- Create a free account- Create a new project with Next.js and Tailwind- Explore the directory structure- Anatomy of a Brick- Create a new Brick (Text-Image)- Add a title and description with RichText visual editing- Add an Image with visual editing- Add Sidebar controls to edit props (padding and image side)- Nesting Bricks using the Repeater component- Create an Image gallery brick- Publish on Netlify or Vercel- Page Types and Custom fields- Access Page meta values- Internationalization- How to reuse content across pages: Stories and Embeds- How to create an E-commerce with Products’ data from an external database and landing pages created visually in React Bricks- Advanced enterprise features: flexible permissions, locked structure, custom visual components

next.js e-commerce react bricks react state management

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

Simplifying Server Components

React Advanced 2023

27 min

Simplifying Server Components

Top Content

Watch video: Simplifying Server Components

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

Building Better Websites with Remix

React Summit Remote Edition 2021

33 min

Building Better Websites with Remix

Top Content

Michael Jackson

React Training

Remix is a web framework built on React Router that focuses on web fundamentals, accessibility, performance, and flexibility. It delivers real HTML and SEO benefits, and allows for automatic updating of meta tags and styles. It provides features like login functionality, session management, and error handling. Remix is a server-rendered framework that can enhance sites with JavaScript but doesn't require it for basic functionality. It aims to create quality HTML-driven documents and is flexible for use with different web technologies and stacks.

react remix frameworks

Speeding Up Your React App With Less JavaScript

React Summit 2023

32 min

Speeding Up Your React App With Less JavaScript

Top Content

Watch video: Speeding Up Your React App With Less JavaScript

Miško Hevery

Qwik Creator

Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.

performance builders and founders react less frameworks qwik

Full Stack Documentation

JSNation 2022

28 min

Full Stack Documentation

Top Content

Rich Harris

Svelte Creator

The Talk discusses the shift to full-stack frameworks and the challenges of full-stack documentation. It highlights the power of interactive tutorials and the importance of user testing in software development. The Talk also introduces learn.svelte.dev, a platform for learning full-stack tools, and discusses the roadmap for SvelteKit and its documentation.

documentation frameworks svelte

Exploring React Server Component Fundamentals

React Day Berlin 2023

21 min

Exploring React Server Component Fundamentals

Top Content

Watch video: Exploring React Server Component Fundamentals

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

SolidJS: Why All the Suspense?

JSNation 2023

28 min

SolidJS: Why All the Suspense?

Top Content

Ryan Carniato

SolidJS Creator

Suspense is a mechanism for orchestrating asynchronous state changes in JavaScript frameworks. It ensures async consistency in UIs and helps avoid trust erosion and inconsistencies. Suspense boundaries are used to hoist data fetching and create consistency zones based on the user interface. They can handle loading states of multiple resources and control state loading in applications. Suspense can be used for transitions, providing a smoother user experience and allowing prioritization of important content.

react query builders and founders preact vs solidjs frameworks solidjs vs react solidjs