React Advanced

React Advanced 2022

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.

Build a Product Page with Shopify’s Hydrogen Framework

David Witt

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.

Building custom storefronts on Shopify with Hydrogen

Abe Haskins

Megan Majewski

React Advanced 2021

Hydrogen is a web development framework optimized for building custom storefronts powered by Shopify. It provides a collection of components, hooks, and utilities that handle heavy lifting and allow for highly customizable storefronts. Hydrogen components are headless and provide sensible defaults. The workshop covers topics such as querying for product data, building product pages, and customizing elements using Render Props. It also explores cart functionality and the ability to generate custom responses, such as PDF catalogs.

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>

Build a Custom Storefront on Shopify with Hydrogen

Matt Seccafien

Cathryn Griffiths

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 with react