Building a Shopify App with React & Node

Jennifer Gray

Hanna Chen

Building custom storefronts on Shopify with Hydrogen

Abe Haskins

Megan Majewski

Hydrogen: An Early Look at Server Components in the Wild

Daniel Rios Pavia

Build a Product Page with Shopify’s Hydrogen Framework

David Witt

React Advanced

React Advanced Conference 2022

Hydrogen and server components are being used by big merchants in production sites to build headless storefronts quickly. React 18 introduces server components that allow for interactive rendering without adding anything to the bundle. However, not all libraries are compatible and data fetching can slow down the site, but React provides suspense to handle heavy components. Server components offer great encapsulation and fast rendering via HTML, and the future of headless is promising with technologies like Edgeworkers and hosting platforms like Oxygen. Shopify is hiring and offers a demo shop with server components at addogen.new.

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 is Shopify's opinionated way of building a custom storefront, providing a great developer experience and fast site performance. It uses React server components for rendering and comes with built-in components and tools. The workshop covered file-based routing, querying with GraphQL, building a product display page, adding cart functionality, and rendering cart data. Hydrogen allows for quick app setup, easy customization, and no development maintenance, making it an efficient tool for building custom storefronts.

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.

React Summit

React Summit 2022

This workshop introduces Shopify's Hydrogen, a React-based framework for building headless storefronts. Hydrogen offers fast client-side rendering, flexible caching, and a simplified development process. It uses file-based routing and allows for dynamic routes. The workshop covers querying the Storefront API with GraphiQL, using GraphQL queries in Hydrogen, and accessing product details. It also demonstrates the use of the product options provider, the cart provider, and the add to cart button. Hydrogen is recommended for larger merchants and provides scalability and flexibility for building e-commerce stores.

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.

React Summit Remote Edition

React Summit Remote Edition 2021

Jennifer Grey and Hanna Chen, front-end developers at Shopify, hosted a React pre-conference workshop on building a Shopify app with React and Node. The workshop covered creating a basic app in Shopify, using React components designed by Shopify, and accessing store data. They also discussed using the Shopify app CLI, harnessing the power of Polaris for an integrated UI experience, and using AppBridge for communication. Overall, participants learned how to build a Shopify app and enhance it with functionalities using AppBridge and Polaris.

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. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

#shopify