React Advanced

React Advanced Conference 2022

Shopify's Hydrogen framework has been released with an early version of React's server components. In this talk I will discuss: * What is Hydrogen? * What are server component and how are we using them? * How are they different than client and shared components? * How are server side rendering and server components different? * I'll also show examples in the wild After the talk I hope the attendees will understand the Hydrogen framework and React server components better.

Hydrogen: An Early Look at Server Components in the Wild

Daniel Rios Pavia

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 &amp; 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.

Build a Product Page with Shopify’s Hydrogen Framework

David Witt

React Summit

React Summit 2022

Get hands-on with Hydrogen, a React-based framework powered by Shopify. In this workshop, we'll explore the framework and get a custom storefront up and running quickly. You'll learn how (and when) to leverage React Server Components and caching mechanisms to build fast, dynamic, custom storefronts.

Building custom storefronts on Shopify with Hydrogen

Abe Haskins

Megan Majewski

React Advanced Conference 2021

Call it "kickstarting", "scaffolding", "bootstrapping" or simply "typing words in a terminal and getting files to start with", this is often the first opportunity for a framework to either delight or disappoint developers. How easily can they get up and running, can they extend it with their ideal toolchain and how well will it scale? In this talk we'll explore the limitations of current solutions and examine the ways we set out to improve the developer onboarding experience of Shopify's new Hydrogen React framework and SDK. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

The Forest for the (Abstract Syntax) Trees

Matt Seccafien

Hydrogen is an opinionated React framework and SDK for building fast, custom storefronts powered Shopify. Hydrogen embraces React Server Components and makes use of Vite and Tailwind CSS. In this workshop participants will get a first look at Hydrogen, learn how and when to use it, all while building a fully functional custom storefront with the Hydrogen team themselves. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

#hydrogen