Build a Custom Storefront on Shopify with Hydrogen

Rate this content
Bookmark

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.

170 min
21 Oct, 2021

AI Generated Video Summary

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.

1. Introduction to Hydrogen Workshop

Short description:

Welcome to today's workshop. We're going to be building a custom storefront on Shopify with Hydrogen. Matt and I will be presenting this workshop. We encourage you to ask questions in Discord. The workshop is three hours long, with breaks in between. We'll be using Stackblitz for coding, but may switch to our local environment. Now, let's get started. Hydrogen is a web development framework optimized for building custom storefronts powered by Shopify. It was introduced publicly at Shopify's Developer Conference, Unite, back in June of this year. Hydrogen's home on the internet right now is Shopify.dev. Sign up for updates to stay up to date.

Welcome to today's workshop. We're going to be building a custom storefront on Shopify with Hydrogen. I'm Katherine, my teammate from Hydrogen, Matt, is also in the chat, and he'll be presenting this workshop with me. Hi, Gwyn.

Just to get some administrative stuff out of the way. We do have a chat here in the corner in the Zoom webinar. But we'd ask you to just move over to Discord if you have any questions because we have some team members from the Hydrogen team in there ready to answer your questions. We have Josh Larson, Helen Linn and we also have our teammate, Michele, who will be joining a little bit later. Oh, wait, no. Michele's there right now. So cool. Matt and I will monitor it throughout the workshop and answer any questions that you might have there as well.

And so this workshop is three hours long. It's a long one. We have a lot of stuff to get through. We're going to start the workshop by doing a high-level overview of Hydrogen and presenting some slides. It's just going to be more of a little bit of a talk format. I encourage you to ask questions again in Discord during that time. And after that, we're going to jump into coding directly. And we're going to be sort of splitting the workshop up. Matt will do some coding. I'll do some coding. And we're going to do some breaks in between just because you know, three hours. Let's all stretch our legs a little bit and ask questions and relax. We'll be using Stackblitz for a lot of the coding in the workshop. It's been a little bit, little bit buggy for us this past week while we've been practicing, so we might actually end up switching to our local environment to do some stuff. But I'll give more on that later before we actually dive into everything. So, yeah, let's get started. This is exciting. How would I pass it over to you, Matt? Matt, why don't you introduce yourself? Yeah, sure. So my name's Matt. I've been at Shopify for four and a half years doing a bunch of different stuff. So, at that time, everything from some a lot of Fed work, but also some production engineering. I live in Berlin and my family and I relocated here when I took on a role at Shopify to be on the global resiliency team. Because of that, I moved to Berlin. But then what was supposed to be just a short stint ended up becoming us really liking Berlin and wanting to move here indefinitely. So, but I'm originally from Canada, and when I'm not working, I enjoy camping in Ontario provincial parks. And I also feel as though I need to assert my preference as a cat person, because most of the hydrogen team is dog people, Catherine included. So I'll pass it back to Catherine.

All right, cool. So hi, everyone again, this is me. I'm Catherine. I'm coming at you from Canada. Specifically. I'm in Montreal. So I'm five hours behind all of you. It's around lunch time for me. I've been working at Shopify for the past three years now as a front end developer, and most of my time here has been spent on Shopify's checkout. So hydrogen is actually new to me. I started working on hydrogen at the beginning of this year and I've had the unique opportunity, along with my teammate Josh, who's in the Discord to have worked on hydrogen since the very beginning. So this is really an exciting day for me. I'm super excited to share what we have with everybody. I don't have much of a social media presence. You can follow me on Twitter. Here's my handle, Disclaimer. I only got Twitter like three weeks ago, so I'm still getting used to things. So please be my follower. That would be great. You can also follow- Sorry, go ahead, Matt. I should also mention my non-social media presence as well. You can find me at Cardagram on most places, but don't expect me to be too active, but email me if you have questions after the workshop. My email's down at the bottom of these slides, which will be shared after. Whoops, let me just switch back. Here we go. And yeah, here's my email also, katherine.griffis at Shopify.com. Please feel free to reach out. Ask me about Hydrogen. Happy to talk about Hydrogen, Shopify, front-end development in general. And outside of work you can find me walking my dog, Kirk. Like Matt said, I am one of the Hydrogen dog people. So this is my dog, Kirk. He's a three-year-old Australian Shepherd Corgi mix and he's full of energy. So I'm out walking him a lot. But when I'm not walking him, and in the winter time, you can find me enjoying the very Canadian pastime of curling. Super fun.

So let's talk about goals. Our workshop today is three hours. And during this time we'll be building a custom storefront with Hydrogen. By the end of the workshop, you'll have an understanding of React server components and how and when to build them. You'll be familiar with Hydrogen components hooks and utilities. You'll know how to create new pages in a Hydrogen app and how to make custom page responses to, for example, return PDFs or your own APIs. And lastly, we're going to show you how to deploy your Hydrogen app so you can actually host your storefront and start making sales right away if you want to, right after this workshop. So why don't we get started? What exactly is Hydrogen you're probably wondering. Hydrogen is a web development framework optimized for building custom storefronts powered by Shopify. It was introduced publicly at Shopify's Developer Conference, Unite, back in June of this year. And here we have a screenshot of our CEO, Toby Luckey, demoing Hydrogen at the end of the conference. He actually spent about 10 to 15 minutes building a snowboard store using all of the tools. If you haven't had a chance to watch it yet, I highly recommend it either at some point during a break in the workshop or even after the workshop, because let's be honest, it's pretty cool to see the CEO of a company coding something live. Hydrogen's home on the internet right now is Shopify.dev. You can sign up there for updates about it to get put on our mailing list and I highly recommend that you get added that mailing list so you can always be up to date on what's new.

2. Hydrogen Beta and Developer Preview

Short description:

Hydrogen is currently in Closed Beta with a few select merchants and partners at Shopify. We'll be launching the developer preview later this year. The developer preview will give developers an opportunity to play around with the framework and provide direct feedback. We want to build a framework that developers love, so please let us know everything you think about it.

I'm going to add a disclaimer here that Hydrogen is currently in Closed Beta with a few select merchants and partners at Shopify. We'll be launching the developer preview later this year, so keep your eyes peeled and like I said sign up for that mailing list on Shopify.dev. The developer preview will give developers an opportunity to play around with the framework, give us direct feedback about it, about what works, what doesn't work, and things they'd like to see in it, maybe things they don't want to see in it. And in this workshop, you're getting a lucky rare first look at Hydrogen. So if you have any feedback about the framework we definitely recommend that you post it in our Discord Channel or reach out to Matt and myself via email or on Twitter. Now it's really important that I emphasize here that we want to build a framework that developers love. If we want developers to love using Hydrogen, we want them to recommend using Hydrogen to all of their developer friends. And your feedback for us to accomplish this goal is really crucial, so please let us know everything you think about it.

3. Hydrogen Framework and Components

Short description:

Hydrogen allows you to build unique storefronts faster and skip setup to focus on building. It helps you stand out creatively by providing a collection of components, hooks, and utilities that handle heavy lifting. Hydrogen components are bespoke to Shopify and aligned with the Storefront API. They are highly customizable with pass-through props and render props, making uncommon use cases possible. Hydrogen components are headless, separating UI and business logic. They provide sensible defaults and can still render nicely without additional styles. The default display of commerce objects in Hydrogen is localized based on country, language, and currency. Hydrogen components make use of built-in JavaScript objects for displaying currency, measurements, dates, and times.

You might be wondering, okay, Hydrogen is a web development framework, but what exactly is it going to let me do as a developer? Well it lets you build a custom storefront, but we also want to emphasize three other key things that Hydrogen will empower you to do. Hydrogen lets you build unique storefronts faster, it helps you skip setup to focus on building, and it helps you stand out creatively by doing these things.

So when it comes to building unique storefronts faster, we've already made the decision four times before, to use new web technologies in this framework, such as VEET and React server components. Our architecture enables a mix of static and dynamic data fetching between client and server for optimize performance and Hydrogen is intentionally designed to be fast and stay fast. So you're going to be building your storefront really really quickly, and it's gonna be really really fast and your storefront itself is gonna be really fast. Win win.

When we talk about setup and building and focusing on building, Hydrogen comes with a collection of components, hooks and utilities that take a care of a lot of heavy lifting for you while you're building your storefront. You can bring in tools and libraries that you already love and are familiar with, and you don't need to focus on any boilerplate code. Let Hydrogen take care of that. You can spend all your time focusing on designing and building something that's really cool and unique. And, lastly, when we talk about standing out creatively, it sort of comes back to what I just described. Hydrogen comes with so much, batteries included, that you can really let your creative juices flow and focus on building. And Hydrogen's going to just take care of the rest for you. Our CEO mentioned in his demo at Unite that programming should be fun and that fun is a perfectly good reason for choosing a tool. And we want Hydrogen to be fun. We want development with Hydrogen to be fun. So you can spend your time focusing on building highly unique and memorable custom experiences on your storefront, and Hydrogen will take care of all the rest for you. I want you to think of this as us trying to raise the floor on all the areas that we can at Shopify, so that you can more easily raise the ceiling on the types of creative and custom experiences that you want to develop and deliver for your users.

Now I'm going to pass it on to Matt, and he's going to talk to you a bit about our framework and React Server components. Take it away, Matt.

Thanks, Kathryn. So again, I want to reiterate that this is bleeding-edge technology. React Server components are still in beta and very much considered experimental, so we're just right ahead of the curve, but things might change, and they probably will. So in this workshop, we'd only like to provide sort of a higher-level overview of how they work within the Hydrogen specifically, but we'll provide a link to the React Teams official RFC where they introduced them, and you can follow along with that as the development continues. So that RFC was released with a video back in December 2020, where Dan Abramov and Lauren Tan identified the inherent tradeoffs between good, cheap, and fast when developing user experiences. They illustrate many of the ways we were forced to juggle these and how we can reduce the tradeoffs by sufficiently taking advantage of the server. And this is where React components, React server components come in. But despite the common word server in the name, they have very little to do with server side rendering. Server side rendering is when you take your client side application write it on the server so that you can render it into the initial HTML and return that while the rest of the JavaScript bundled downloads and bootstraps and kind of sets up your whole React tree.

We do this because we can generate HTML really quickly on the server and give our application something to serve just in the meantime while the React tree kind of boots up. But there still may be additional server side requests later down in the tree where you communicate back to the server. And this waterfall can become slow and this is one of the main things that React server components were introduced to prevent. So with React server components, we just basically take some of our React tree and move it onto the server where you have the database a lot closer. And you can and these components actually never make their way down to the client. So this includes the third party libraries that they use or anything else that they kind of interact with. They'll never actually be a part of your client side bundle. And instead, well actually this is kind of where that idea of like zero bundle size comes from that that they've kind of coined alongside React server components. So what you do end up in the within the client is a streamed serialized response of your tree that then is used to rehydrate your client side app. So, however great this sounds, there are some constraints and rules that you need to be aware of. We've kind of got a diagram here to illustrate some of them but we'll get a bit more into these when we start digging into the code. In short, your server components and with a dot server dot JSX postfix and your client components are going to have the dot client postfix and the ones on the client can operate only... it's where you can put your interactivity, that's where they can use client side features, whereas on the server you can't have any interactivity and you can only use service side features but not client side features. And again, this will be a little bit more clear as we get into code. So these constraints may seem a little bit awkward at first, but we hope to introduce some... Next slide, Catharine. We hope to do some tooling down the road to kind of help ease the transition. And if you want to learn a little more about that, you can check out my lightning talk on Monday, where I talk a little bit about the ES1 package and CLI that we're going to be releasing alongside Hydrogen to kind of make this a little bit easier to, you know, kind of prevent anything from, from, you know, from, you know, you know, coming along. Yeah, to basically make it easier for you to adopt React Server Components, because these are, there are definitely some new things in the API that may seem a little awkward at first. So that's sort of a bit of a higher level overview of React Server Components, and with that I'm going to pass it back to Kathryn to talk about the various components that we're going to release with Hydrogen.

Great, thanks Matt. So Hydrogen includes a large set of components for accelerating your development process while you're building your store. At the base level, we have, for lack of a better term right now, some primitive components, and these primitive components consume common objects in the Storefront API. So, for example, the image component in Hydrogen consumes an image object that comes from the Storefront API, and then it outputs an image tag. The video component, for example, consumes a video object and outputs a video tag. We also have more complex components which set up contexts and have wrappers around these primitive components here. So, for example, we have a product component which takes and consumes a product object from the Storefront API. This product object can include things like your title, your description, your prices, and all of the different variants that are associated with a product. And then we then have components, so for example, like product price, product metafield, product description, and they use the product context to retrieve that information and then just transfer it through to the primitive component and then render on the page. We also have a cart component which consumes a cart object from the Storefront API, which includes, for example, your cart merchandise lines, your estimated cost, et cetera. And it's sets up a cart context within your application. And then we have components like the cart checkout button, and the cart line button, or the cart line components that make use of the cart context under the hood. So it's a handy abstraction for you when it comes to these complex components. I want to emphasize that hydrogen components are bespoke to Shopify, specifically, the data types that they expect as props aligned with the types found in the Storefront API. This was decided on so that when you retrieve data from a query, you can just immediately pass it into a component. You don't need to do any extra steps of data processing. You just query and then pass the data along. Now, this doesn't mean that hydrogen components are totally incompatible with non Shopify source data. If you want to use non Shopify source data, so, for example, maybe you have content stored in insanity or contentful, you can certainly use that information, that data. You just need to query it with one of our hooks, and then you just need to do the extra step of just process it into the type expected by the components and pass it on.

Now, before we get too much deeper into component stuff, I want to take a moment to mention that there are to talk about headless components, and you might be familiar with this concept already if you use the headless UI library offered by Tailwind. So all hydrogen components are headless components. What do I mean by that? Well, headless components at their core, they reflect the separation of concerns between UI and business logic. So hydrogen components contain all of the business logic for the commerce concept they encompass and they leave all the customization related to styling and voice and tone to the developer. Our components provide sensible defaults out of the box in terms of what HTML tags they output and what default values they output to the page. But they also make it easy to diverge from these default values via customization with pass-through props and render props, which I'll get to shortly. When rendered by default without taking any class names or styles, Hydrogen components will only take the styles that are provided natively by the browser. So another way to think about a Hydrogen application, or an application that uses Hydrogen headless components, is that a Hydrogen storefront consisting of only Hydrogen headless components be functional and still render nicely, even if you don't provide any styles on it. That's great.

Now, another thing to mention about commerce is that the default display for many commerce objects relies on the country and the language context in which it's used. So for example, let's take price. The price of a product, how it's displayed depends on the currency code, as well as the language and the locale of the buyer that's viewing it. As such, Hydrogen components always ensure that they're outputting defaults in a localized manner when applicable. This involves under the hood, Hydrogen components make use of many builtin JavaScript objects. So for example, International Number Format for displaying things like currency and measurements, as well as Date for displaying dates and times. Now, with Hydrogen components, the idea here is that we want to make all the common use cases very, very easy, especially with our defaults. But we also want to make sure that uncommon use cases are still possible. And that's where customization via pass-through props and render props come into play. Developers should rarely, if ever, need to diverge from a hydrogen component and build one entirely by themselves because we're really aiming for these Headless Hydrogen components to be used for like 99.999% of use cases that you can think of.

Alright, now I mentioned in the last slide that hydrogen components are highly customizable and one way we do that is with pass-through props. Pass-through props are props that we literally just pass through the component to the HTML tag that it uses under the hood.

4. Hydrogen Components, Hooks, and Utilities

Short description:

The image component in Hydrogen takes a single prop called image, which corresponds to the Shopify Front API image object. It outputs an HTML image tag with the source and alt attributes based on the image's original source and alt text fields. The image component supports all attributes that can be passed to an image tag. Hydrogen also provides a raw HTML component that can render a string of HTML. The default output is a div, but you can customize it by passing a different HTML tag as the as prop. Hydrogen components include GraphQL fragments for easy data querying. Hydrogen also offers hooks for running queries, accessing product information, and working with the cart. Additionally, Hydrogen includes utilities like the flattened connection utility for transforming Shopify storefront relay data objects into flat arrays. The workshop will use Stacklitz for coding, but local hosts can be used as well. The project structure includes a source folder for coding, a components folder for client and server components, and a pages folder for adding server components. The package.json file includes dependencies like Shopify Hydrogen, React 18, and Tailwind CSS.

So let's look at, for example, the image component from hydrogen. By default, it takes a single prop called image and this corresponds to the Shopify Front API image object. And it outputs an HTML image tag with the source and alt corresponding to the image's original source field and the image's alt text field. Now any attributes that you could pass to an image tag are also supported by the image component. And they're passed through exactly like you see here. So for example, if i want to include a class name, I would use the class name prop. If I want to include an onclick function, I would just use an onclick prop. The only props that you can't use for an image component, for example, are the source and the alt props, since the image tag makes use of these directly to ensure that the image displays properly and has the correct accessibility attributes right off the bat.

Now in some cases you can even customize which HTML tag is outputted. For example, we have a component in hydrogen called raw HTML, and that takes a string of HTML and renders by default a div with its inner HTML set to that HTML string. By default, we output a div, but there might be a case where you want to render this as a section, for example, instead of a div. You can do that just by passing the string section through as the as prop. When that happens, instead of using a div, we'll output it with a section. Many of our components include a GraphQL fragment that you can use to easily query for all the data you need for a component. So for example, a lot of these primitive components we're talking about, they make use of common objects in the storefront API. The image component, for example, includes an image fragment, which automatically queries the ID, original source and all text fields on that image object. The video component, for example, includes a video fragment, which queries for the preview image and the sources in that object. We'll discuss a bit more in detail about fragments as we actually go through the coding in the workshop.

Along with a set of components, Hydrogen also offers many hooks for you to use. And many of these hooks are actually used under the hood by the components I've just shown you. So for example, we have a hook called U shop query and this allows you to run queries to the storefront API in your server components. We also have a hook called use product, which allows you to access product information and any components that are children of the product and product provider components. And we have a use cart hook and many other cart related hooks for callbacks that let you harness the power of cart. This would include things like adding items to cart, removing items. Even just checking out. And lastly, before we dive into things, I also want to mention that hydrogen also includes a variety of utilities that you can use to make your development easier, and all of these utilities are used under the hood in hydrogen components and hooks already. We've just exported them to you because you might find them useful as well. One such utility is the flattened connection utility and this utility, it takes a Shopify storefront relay data object, and this is an object you can get for any sort of list type information in the Storefront API. So, for example, a list of media files, a list of product variants or a list of meta fields. And it takes this list object and it just flattens it and transforms it into a flat array so that you can easily make use of the data that's in there.

So I'm sure at this point you're all pretty eager for us to move on and do some coding, so let's just do a quick intro here to get started. This should be the last of the slides that you're actually going to be seeing. So give me a moment here. All right, here we go. So, like I said earlier, we're planning to use stacklets for the workshop, but we noticed when prepping that sometimes it can be unstable. So in our demos, Matt and I will probably revert to using our local hosts. And while we do the coding, we're going to commit it to a branch and share the branch with you. So when we get to breaks, you can always pull down the branch that we've pushed and be right where we left off. Now, it's up to you if you want to work with your local hosts or if you want to use stacklets, but I highly encourage you to use stacklets if it's working. And the reason for that is we can just guarantee that participants are all using the same environment. So it's a little bit easier and it's a lot less prone to bugs in case there's differences between environments. That said, if you do decide to use your own local hosts machine, you can go ahead and pull this repo here. GitHub dot com slash Shopify slash hydrogen workshop will be working off of the main branch to start. You'll need to make sure in your local environment that you have Node 14 plus installed and you'll also need to have either Yarn or MPM because to start the repo, you'll need to run Yarn or NPM install and then you'll need to run Yarn dev or NPM run dev to actually start up the local development server. So I'm gonna go ahead now and I'm gonna open up Stacklitz and just give you an idea and overview of what you can find there. So let's go take a look. Here we go. So it looks kind of like a visual Visual Studio Code editor for those of you who use Visual Studio day to day. You'll notice just right down here in the corner, it does say web container is in beta, so this is where a bit of our instability happens every so often. You'll find over here you have your list of files, your whole project structure. We have our terminal down here. We have our editor here. And then over here on the right, we have our actual browser window. Now there's a bit of a state right now where you just have to refresh a few times to get everything to start working. Like I said, web containers are currently in beta, so this is a little bit of a buggy part. There we go. So if you refresh, we see our first little Hello React Advanced London. I'm going to go through now to just the file structure to give you an idea. And actually, before I do that, this is something I put in my notes that I need to tell everyone, and of course, I totally forgot. You'll see up here in the left there's this button for forking the Stacklets repo. I recommend you do that now. We noticed while we were demoing and practicing this workshop that if you don't fork it and then you make changes and you save a file, Stacklets will automatically fork and save for you, which produces a little bit of a ten second delay. Sometimes it's a bit of a pain in the butt. So go ahead and fork this right away if you can. I'll do it to just show you. I've just clicked forked, and the project is forked, and it's reloading. Let's take a look at the file structure here. And this is a file structure that should be familiar to a lot of you who are already building a lot of modern front end development apps, or building React apps. We have our source folder here, where we're going to be doing the majority of our coding. We have a components folder, where we're going to be putting some client and server components that we built throughout the workshop. We also have a pages folder here, and the pages folder is where we're going to be adding server components. And any server components we add in this folder are automatically going to get registered as a route in our hydrogen app. So we're doing some nice file based routing. It's cool. Next thing I'm going to show you is outside of the source folder. We have a Docker file. This is important for deployment, and Matt's going to be showing this at the end of the workshop. I'll open up our package JSON here to show you a bit of what we're using. So one thing to emphasize here in our dependencies, you have Shopify Hydrogen. We're using version 0.3.0. Like I said, we're in developer preview right now, hence the version 0, or sorry, we're in beta right now, hence the version 0. But once we reach development, preview will be up in version 1. You'll notice here also that we're using React 18. So I just want to emphasize right now, React 18 is being used because it has a lot of functionality in it that we need for React server components. So Hydrogen right now is actually using its own version of React server components based on the spec that the Facebook team has provided for it. And in order to build these React server components in Hydrogen, we needed to make use of utilities that are only found in React 18. That's why we're using it today. If we go and look at the dev dependencies, you'll notice that, excuse me, we're using Tailwind CSS. Tailwind CSS is a really handy CSS library, and actually we can go and visit it at Tailwind.CSS.com. And it's a utility for a CSS framework packed with classes, like it says here like Flex, PT4, PT meaning padding top 4 with its spacing, TextCenter, meaning align your text center, rotate 90, rotate something 90 degrees, etc., etc.

5. Exploring Text Color and Shopify Config

Short description:

Let's look at text color and the CSS classes available in Hydrogen. We're using Vite as our build tool. The Shopify config.js file is essential for communication with the Shopify storefront API. It contains store domain and storefront token information. In the source folder, the app server.jsx file provides boilerplate code and the Shopify server provider component for accessing the storefront API. The default routes component sets up file-based routing. We'll take a short break before starting the coding portion.

Let's say we want to look at text color, which is something that we might play with a little bit. We have really handy CSS classes here like text black, text white, text gray 50 for a certain shade of gray. We're going to go more into Tailwind as we actually do the demo. So I'm going to keep it high level in that for now.

And I'll also point out here in the package that we're using Vite. So Vite is our build tool, and we find it is super fast, just like the name. So we're using it, and it's great.

Let's go ahead now and look at this super important file. This is the Shopify config.js file. Now, this is a file you need to have in your Hydrogen app. And you need to have it, because it contains all of the information for Hydrogen to communicate with your store via the Shopify storefront API. It's the store domain information, and the storefront token information. Now, we've included here just information for a demo store that we've built already for this workshop. It contains just a list of randomly generated products with images. And we encourage you, if you want, you can use our store. But if you've already built a store like we had in our setup instructions, then you can put the information for your store here. And I'll show you how we can do that. You can go into your, excuse me, I'm just going to take a drink.

All right, so you can go into your partner admin. And you can log into your store that you've already created previously in your setup instructions. Let's wait for that to load. Great, so when it comes to the store domain, store domain, you're going to want to look up here in the URL. You'll see here we have react advanced hydrogen.myshopify.com. And that corresponds to our store domain. You don't need to take the HTTPS or the slash admin. So just copy paste this section here in for your store and paste it right in here on the store domain. When it comes to the storefront token, we're going to need to go into a different section of our admin. So we'll go into apps because we're building a hydrogen app. We're working with a private app, so we're going to go down here to the bottom where it says working with the developer on your shop, manage private apps. So go ahead and click manage private apps. You're going to find the app associated with hydrogen in this case, in the setup instructions. I think I told you to remember this name just so that you can easily find it, but this is the name you gave the app when you integrated hydrogen with it. So go ahead and click on that. Hydrogen it's important to note is using the storefront API. There are two types of APIs that Shopify supports. It includes an admin API and a storefront API, but since we're building a storefront, we're going to use the storefront API. So once your page loads with your app information, scroll down, pass the admin API section and just go right to the storefront API section here. When you scroll down to the bottom, you're going to see the storefront access token, go ahead and copy that and then paste that here in your storefront token. Now you don't have to worry about keeping the storefront token private. It's a, it can be publicly seen. So that's why one of the reasons why we don't mind you using our react, advanced a hydrogen store.

Now before I pass it on and we do a short break, I'm going to show you in our source folder. Here, we have a file called app server dot JSX that we've already built out for you for the workshop. It contains a lot of boilerplate code to get started, but I want to emphasize a few different things that are, that hydrogen is providing out of the box here. So in your hydrogen app, you're always going to need a Shopify server provider component. This provider makes sure that all of the children in this react tree have access to the storefront API. It makes sure it has access to everything that is available in the Shopify config that I just showed you. It also, under the hood just sets up everything so that we can have hooks that interact easily with the storefront API. So this is a really key component that you need for your hydrogen app, but it's already there for you in app server dot JSX. I'll also point out that we have, so we're using switch here, switches coming from react router, which might be familiar to a lot of you already, but I'll also highlight here that we have another component provided by hydrogen called default routes. And that's what sets up our file based routing system. So any components we add in pages, the folder here, default routes is going to take that and just translate it into some routes automatically for us.

Now, with all that being said, we're going to take a short break. Now Matt is going to take over after me to do some coding, to start building our hydrogen storefront. But in the meantime, let's take five minutes. It'll be available in the chat to help everyone who needs to add their own storefront API tokens available. So I'll stop sharing and we'll just take a short break and we'll be back to start in five minutes. So on my watch, that's be at like 1243. Was it ever accurate what you saw on the Cbet? All right. Okay. I think we can probably move along with the coding portion. Get our hands a little bit wet with some code. So I'm going to run the app locally. So I've got this. Hopefully everyone can see my screen. I've got the application here on the left, and I've got the code window, or I've got the browser here on the right with our homepage which right now just says, hello React Advanced London. The first thing that we're going to do is we're going to start by making our app look a little bit prettier. We're going to add sort of a frame component to it, which we're going to call layout, and we're going to dynamically get our shop name. The way we're going to do that is we're going to create a new components in our components folder, so you're following along. And what we're going to do is we're going to create a new file called layout that server JSX. And the reason I'm we're choosing a server component here is because this component has a data requirement, and no interactivity, so this makes it the perfect candidate for a server component. So in here we're just going to do our boilerplate create a react react component so expert default function layout. And to start we're just going to take a children prop and returning. So you can destructure children from the props. Matt, do you mind just zooming in on the text in your editor? Sure, sure, thanks. How's that? Maybe just a little bit bigger. Sure. Perfect, thanks. Let me adjust things slowly here. It's a little more room. Okay, cool. So yeah, we have our layout component and we're going to use this inside of our homepage. So what we'll do is we'll import our new component. So import layout from, we'll go up a directory and then scoot over to components and then layout....and then we'll just wrap our app in layout....make sure I use the right combination of quotes. Great. So now that we've got a component that's just rendering children, what we can do over here is, we know that we want to use the Storefront API. So we're going to use a hook that comes with Hydrogen, an important one, called u-shop-query. Just like that, u-shop-query. And this is going to come from... app-shop-query...

6. Using u-shop-query hooks and Tailwind CSS

Short description:

The u-shop-query hooks in Hydrogen are similar to other data fetching hooks like useQuery from React Apollo or React Query. The data is obtained from the result of use-shop-query by passing a GraphQL-ast object. The GraphQLteg library is used to convert the GraphQL query into the ast. The graphical editor is shipped with Hydrogen and can be accessed at the url /GraphQL. It provides a query editor and a result pane, as well as a documentation explorer. The resulting query is wrapped in a div and the data is accessed using the variable data.shop.name. The Tailwind CSS framework is used to style the app, with classes added to the main tag for margin, max width, and padding. The header component is styled with vertical spacing, centered text, and additional styling for the heading. The logo is wrapped in a link component to create a link back to the home page. A skip to content link is added for accessibility, positioned absolutely at the top of the frame. The skip link uses an anchor tag and is styled to be screen readable only by default.

Hydrogen. And the way that u-shop-query hooks works is very similar to other data fetching hooks that you might be familiar with. So something like the useQuery hooks from React Apollo or React Query. So we're just going to grab the data from the result of use-shop-query. And this is going to take an object with a query key and we're going to actually pass in a GraphQL-ast into this. So the way that we're going to grab that GraphQL-ast is we're going to import another really common library that you may be familiar if you've done a few of these similar libraries called GraphQLteg. And this library is responsible for taking a GraphQL query and turn it into the ast that we're going to pass into query as our query key.

So let's create this query. And one way that we're going to do at least this first one is you're going to want to open up a new tab. And you can do this also in StackFlets as well. You can just go to the, or you can just follow along. You don't necessarily need to do this. But a good thing to know is that we ship the graphical editor with Hydrogen and that mounts at a url slash GraphQL. I think it's graphical as well. And then you can also do underscore, underscore, GraphQL. All of these will load this graphical interface. If you've not seen before, I'll just do a quick overview of how it works. There's basically two panes. On the left-hand side you can write a query, which will remember your query from the last time you wrote it, but you have a, you can write a query here and then the resulting data will show up on the right-hand side. And it also provides this nice documentation explorer that you can toggle on the right to sort of inspect the API and see what this GraphQL API provides. So using this, we're going to construct a query that we're going to pass into our layout. So we'll start by just typing the word query. This is the main operation. If you don't give it an operation, you can also just open up curly braces and it'll default to it using a query, but just to be proper, we'll give it a query operation. The other options here are mutation and subscription, which are just the primitive operations for GraphQL APIs. So we'll do query, open that, actually we'll give it a name to, again, optional, but best practice. We'll call this shop name query, but you can give it whatever name you want. And then in here, this is where we're going to write the data that we want to get back from our API. So a little handy trick is that if you hold control and space, it'll auto-fill what it can from the fields that are available at this point where your cursor is. So here we know that we want to actually get a field from our shop. So we'll start with shop, open up another field set, hit control space again, and then we can choose what from our shop that we want. And in this case, we want to grab our name. So we'll hit play after we've done that. And you should see your name here, unless you're using, you know, you should see whatever name you're from your shop, if I can take that, that is that corresponds and it should come back into your response. You can add more fields here, but we're going to keep things like, because this is all we need for our layout component. So now we've just copied this, start our variable that we, that we named over here has in the GQL or call GQL template tag. And these are just backticks here and inside of these backticks, we can put in our shot name. Now that we've done that we can console log, the result of this query back over to our app. I'm just going to close it up graphical and you'll notice if you go to the console refresh, there is no console log here, but if we open up our console log over in right here. Hopefully that's somewhat visible, but you can see that we do get the result here in our server logs. And that's because this is a server component running on the server. It never makes its way down to the browser and it never runs on the browser. So there would never be a console log here. So, let's clean this up a little bit here, switch some mirroring. Adjust our windows a little bit. Great. So now that we have this, we can wrap our resulting component here in a div. And we can use this variable that we just got. So, data.shop.name. And what we'll do just so it's... When we're demoing this, we can just throw it in an H1 for now. Hit save and we get our name there at the top. So like we said, this is sort of the outer frame of our app. So we're going to use the Tailwind CSS framework to kind of give this a little bit more style. So later on, when we list products down here, we can have sort of a header component that is persistent across all the pages. So we can get rid of our console log here. And we'll start by wrapping our main, or sorry, our Children in a main tag, just to be a little more semantic, give this a class name prop. And in here, you know, if you're familiar with Tailwind already, you may want, you know, you can just go to town with whatever classes you want, but just to kind of keep things simple we'll just do the bare minimum, give it a marginado, a max width, Let's see. And a little bit of padding on the left and the right. So we'll give it a px, which is like padding on the X axis and we'll say a six, but you can, you can take these to your, your preference. You can see it, you know, it kind of gives us some padding and so on already. After you've done that, what we're going to do is start with our more header component up here. So let's start a header. And we'll get that across the name as well. And we'll give this some vertical spacings, we'll do NY of ten and we'll center text. Also, if you're curious, I have a Tailwind VS Code plugin that is super helpful and it kind of gives you the Tailwind auto-complete classes. So if like me, if you're a little bit newer to Tailwind, it's awesome because, yeah, this makes life a little easier. So we won't do too much here. We'll do that and then we'll maybe add a little bit to our heading to make it look more like a logo, let's say on folds, for example, upper case. Maybe give it some tracking. Some wider tracking and let's make it maybe a little bigger to make it look like a UX. Sure, looks great. So now we probably want this to be a link back to our home page. So out of Hydrogen, you can pull in a link component which is going to basically be a, it's basically a re-export of the link component that comes with ReactWriter, which Catherine mentioned we're using, and as part of our switch and also wraps our default routes. So we'll just use that, wrap our logo text in it. And if you're familiar with ReactWriter it has a 2prop which we're just going to send back home. This should be a link back home, and it is. Now to be, since we've got a little time here, let's be a little more semantic and let's add a skip to content link. So we'll throw the skip to content inside of an anchor at the top. And again, using our host names that we that we get from Tailwind. It's really easy to do this. We can just say, when we focus it, we want it to be block. When we also want to miss it, we want it to be not screen readable. But by default, we want it to be screen readable only. And finally, we'll just route this in the div, so we can position it absolutely to the top of our to the top of our frame. So we give this a position of absolute, say, top top is zero and left is zero. So this comes, oh, and actually, one more thing, we'll pass it the the right href, which then will correspond to the ID tag that we'll have here. And this just makes it so that when this is clicked, it'll jump down to the the position that this is in our, in our browser. So given this sort of class structure that we've got, we should be able to tab, see skip to content link, press enter. And though we didn't get the scroll because our pages are long enough.

7. Fetching and Rendering Product List

Short description:

We want to get our products in here. Get a list of products, get a grid of products. So we'll head back over to our index.server. We're going to fetch our product list and render our product list component, passing it the products. We'll define a query for our products and use the product provider fragment. We'll also provide variables to specify how the storefront API should return the result.

There's not enough content. We did get the URL bar changing. So if this page was long enough it would jump to our main content area. Which is good, we're being responsible web developers. Um, and that's going to conclude kind of what we want to do with our layout. You, I mean, you're free to do more in the breaks or, or, or whatever. But for now we'll just do something simple like that.

So next, we want to get our products in here. Get a list of products, get a grid of products. So we'll head back over to our index.server. Just give me a second here to rearrange myself to get caught up. Okay, so what we want to do is we want to fetch our product list. So, oh you know what I'll do actually first. Just in case anyone fell behind, I'll just quickly start a branch, as Catherine mentioned. So, we'll call this live. That should be available now. If anyone felt behind it, they just want to check out. I'll try and remember to commit to that branch as we go. So we can see here, this is where we get our react advanced login. If I were to remove some text in here, it would remove from my page here. So this is where we want our product list component to come in. So let's create that. We'll create a new component, and we'll call it product list. And in here, what we're going to do is we're going to export another default React component dance here. Product list. And we are going to, just thinking about the API here, I think what we're going to want is we're going to want to pass in a list of products. And because this is a client component, we actually want to do our fetch on the server. So we're going to do a fetch for our products in the index.server, and then render our product list, passing it the products. So let's import now the top of our index.server, I'm going to import the component we just created. So again, jump out over and product list. Good. And we'll, Here. And we know that we want to give it some products. So we need to define this.

So now we want to do another such over to our GraphQL API, which means that we're going to import use shop query. Flash hydrogen and we'll use that hooks. Use that hooks, the columns data equals and again we need to define our query for. So which don't forget to import this we preinstalled, GraphQL tag just so it would be in our package JSON but if you're starting from scratch just know that this doesn't actually come bundled with hydrogen. This is up to you to define queries however you want. So GQL from great. So now what do we want to query to our product. So we're going to put in here is this time we'll just write it without necessarily going to the GraphQL graphical interface. I think you can do this one on our own but feel free to use that if it's a little easier for you if you want to see what else is available outside of what we've grabbed. So we'll just give this another like so queries are operation homeQuery is the name that we're going to give it. And so inside of here, we can grab our products. And if you remember from Catherine's introduction the products is going to return a relay object connection. So this is going to have edges and nodes. And what we're going to actually use again, thinking back to Catherine's introduction, we actually provide out of the box with hydrogen, some fragments so that we don't need to necessarily write all of the fields that we're going to want off of our node. So products, edges, node, this is where our product fields are going to come in. But what we're going to actually use them here is one of these fragments called product provider fragment. So I'm going to import that from hydrogen. And also the way that when you use a fragment, you also need to add it to your template literal here as an argument, so we'll just...

And then it gets parsed into the tasc property. So let's just review a little bit here. We created a query using our GraphQL tag function, or template literal. We've got a product provider fragment, spread that out along the node, and also included it at the end. We created a product list client-side component, put that inside of our components, just alongside our layer component. And then we're passing in products, but we still don't have products, so what we're going to do is provide these departments the product provider fragment, a bunch of variables that it's gonna tell the storefront API, how to return the result of this. So this is gonna seem like a little bit verbose, but for our simple example, but in your actual shops, this would make a little bit more sense that you'd wanna specify a lot of these. So what we're gonna do is, pass in some variables into this product provider fragment. So let's define those. And you can do that by opening up almost in the same way that you would define a function in JavaScript. You can open up some parentheses in the query. And then here, we're gonna put in our graph to all variables. So those are gonna start with non-product media. And then here we give it a type of Ints and it's required, and that's INTS with a capital. And, sorry, opposite to TypeScript here. We're gonna do that, yeah. Okay. And then this exclamation point just means it's required. So again, just, we're gonna add a few of these. So non-product metaphiles is the next one. And Ints as well. These are all gonna be Ints. We're gonna do non-product variants as well as Ints. Non-product selling plans. And just make sure you add the dollar sign for each of them. And this is selling plan groups. Also Ints. And let's see. Product variance meta fields as well. Not seeing the type today, it makes sense. And that I launched. Plan allocations. And that's the last one. Goodness. All right. So now that we have all those, our product provider fragment will be happy. And we're gonna actually need to provide all of these variables as well. So we're just gonna copy this whole block and pass it into the variables here.

8. Using Product Provider and Components

Short description:

We define the variables for non-product media, meta-field, variance, sign plans, planning groups, and meta fields. We encountered some errors but resolved them. We used the utility called flattened connection to get the fields from the product provider fragment. We passed the product data into the product list component and displayed the titles of the first 10 products. We made the product list a grid and started using components from Hydrogen, such as product title. We also imported the product provider and wrapped the product render function with it.

And this is going to be an object. And again, this is pretty similar to the way that a lot of GraphQL are kind of caught in the hooks work that you may already be familiar with. There's syntax here that's a little bit different, but this is where we define the variables. So we don't need these dollar signs anymore. And what we want to actually do is provide the actual integers here. So for non-product media, we'll do 10. We'll do 10 of the meta-field. These are obviously going to be slightly different for your use case.

So I just think, yeah, there we go. This one down there and for that one. For our variance, we're going to actually do 250. For our sign plans, we'll do zero. Zero for our planning groups as well. And kind of the meta fields and for our locations as well. But, again, this is going to be, these would be more relevant in the situation when you have a more complex API.

So we've got some errors. So I'm just going to see kind of what maybe I mistyped here. Its a common parameter. And lets see, query variables. Lets see what we've gotten so far, lets see here, it's just a syntax error. Oh, I think I'm just missing something still. Yeah. There we go. its not too bad. Not too bad. Okay. So, now that we've got all this, defined, we'll kind of just, comment this out for a sec. And again, just inspect what we get back. So we'll console, oops, data. Okay. Sorry. This one actually should be there. Is it? It's better. Okay. Let's take a look at what we got in our response. So, let's see. Oh, we got to provide a first product. So, Thank you, GraphQL. So again, just in the same way that we provided arguments up here, and our variables, we're also going to provide them down here, but this one we're just going to put in line for now. We're going to come back to this, but let's just grab the first 10 of our products. Save that. Take a look back at the console. And you can see that we did get a, just ignore this cart failed to load for now, but you do see the data coming back from the server. And you can see that it is in this edges array. And if we were to stringify this as well, you'd see that the actual full object is going to be inside of a node, and then we'll get our product provider fragment. But instead of doing that, what we're going to do is we're going to use the utility that Catherine introduced called flattened connection, grab that. And now you can say cons products. People starting connection, and we'll pass in the data dot products from our graphical response. And now let's take a look at that instead in our console. So when we refresh the page, you can see now that we're actually getting the fields out and that there we have compare price range, media, amount of fields. These are all the things I can came in with our product provider fragment. So what we'll do is we'll pass that directly into the component that we made before our product list component, remove our console. And this is very notes because why product list runs product list clients. So just it's definitely because of this product list but let me just try this one further. Complicit client. Oh, that's right. Cause they're not returning anything. You need to return no. If you don't want to return something, otherwise you'll get that for that reactor. Great. So in here now, we know that we're already getting products in here into our product list. So what we're going to do is we're just going to open a div and we'll iterate over those products. We'll do.map and here grab the products and we'll just return another div with the product data. Close up our function, close up our interpolated variable here to start a new JSX, and then close it. So we should, everything worked out, we should be getting products in here. That's why I mistyped something. Oh, yep, I did. So it should be products into Azar-PodMain. There we go. So we've got a list of the titles of our first 10 products. And though we're only putting the title out here, we actually have all of the data available to us at this point. So let's go back to our product list. Let's make this a grid for one thing. So super easy again with our tailwind fuses. So we'll just say grid. And we'll say grid calls. And you can, again, you can do whatever you want, but three columns sounds good to me. So that should be in a grid, excellent. So now we wanna probably do quite a bit more than just our product title here. So we're gonna start using some components from hydrogen. So let's import the product provider. So this corresponds to the product provider fragment that we're using in our query, and will import that from shopify-hydrogen. And this is gonna set up the context for our product. So we're gonna wrap our individual products render function here, and we're gonna add that and then pass it the product for each iteration. And we'll close off of, let's just move it from this one. And I'll actually just get rid of our product title here is now that we're using our product provider, we can start using some of the other handy components from hydrogen, such as product title and just put that out there, render that inside of our product provider. Okay. Oh, and a little bit of an error on my part here, we don't have a client component, so we need to dive into the hydrogen slash clients package. There we go, so we still got our product title, we're still in the grid, but now we're using the product provider and there's just a number of components that come that are product oriented and then we'll see a bunch of them in this workshop, but another one would be like product description. So, you know, it could do this, although we don't really want to, because in this view, you know, we just wanna do a grid, you don't wanna product description there, but just to give you an idea of how easy it is once you have set up this context and this product provider here.

9. Creating the Product Card Component

Short description:

We're going to create a new component called product card. It will be a client component that takes the product as a prop. We'll import the necessary libraries and pass the product to the product card component. We've resolved the issue of the undefined product by destructuring it from the prop.

The next thing we're gonna do is, because like to be honest, this whole grid thing is gonna get a little bit complicated if we do everything in line, we're gonna create a new component and we're gonna call this product card. So new component, product card.client, this is now a client component, and we'll do our export defaults function. This one will return null, and then we're just gonna take all of this jazz here, put it there. Import our missing libraries, move those over to here as well. And then instead of, what were you doing before? Now we just pass it off to our product card, pass it the product, through each iteration, and we can just self close that Div and make sure you just import that product card. Sorry, it's right next door, so product card. Great. So we got a product card and let's see. Product is undefined. Passing a product as our prop here. Let's make sure you destructure that out of there and that should do it. Good. So maybe wait a sec if anyone needs to catch up and I'll just talk for a bit.

10. Adding Images, Prices, and Grid Layout

Short description:

We're going to add images to make it look like a shop, get the price information, and create a grid layout. The product provider will also take an initial variance. We'll get the variant ID by creating a variable called first variant and passing it the first variance ID. We can then use the selected variant image and selected variant price components from Hydrogen. We'll style the grid with padding and apply font styles. We'll also add links to the product pages by importing the link component.

The next thing that we're going to do is we're going to get some images in here and kind of make this look more like an actual shop, get the price information and so on. This product provider, in addition to taking a product, will also take a first variance or an initial variance. So you can do that with the initial variant ID prompt and this will set up sort of like the other, so you know, other things that are variant specific when talking about the context within the product provider. And so to get the variant ID, we're going to make a new variable called first variant and we're going to make that equal to product.edges. Actually we'll get the first product, first edge, sorry. Just want to make sure I didn't miss anything with that. Yeah, it did. Variance.edges.Node. So we could use are flatten connection helper here, but in this case we know we just want to grab the first one. So we'll just do that for now. And then we'll pass the variance into here, the first variance and dot ID. Now we can actually use the, a selected variance image. Just very easily get that, once we import the components from hydrogen. So not only are we providing some components to output some product information, but we also get some handy components for variant image and so on. Let's see, why are we not? Sorry. Yep it's the selected variant, instead of select variant image. Just a typo in the name. Sorry, thanks Katherine. No problem. There we go. And we got some images and they're in a grid. Great, great. Things are going pretty well. It seems. So we're going to put the imagery for the title I think. And we'll also grab the price under here. This is going to be the selected variant price. We'll import that from Hydrogen as well. That should give us the price and let's fix up our grid here. We'll wrap these in a div. Okay. And again, now we can apply a little bit of style here. We won't spend too long on this, but maybe give them some vertical padding or padding at least on the bottom. So we'll do maybe 6 for margin, bottom six. And we can pass these class names directly into the Hydrogen components. So here we can do font, medium, maybe. Yeah, I can give them a little bit of boldness, maybe y or two. We'll do something on our price name here too. So we'll just do x-ray 900. Yeah. So whatever you want to add to your grid, you can do that. Finally, we're going to want these actually go to somewhere when we click them, go to a product page. So let's add a link here as well. We'll just drop that. And we're gonna give that our 2prop. This is going to be slash. Open a code brace. And then we're gonna do slash products, and then we want to grab the variable product. And these will have a handle, which will be kind of like a slug. That we want them to link to. And we will just import the link. So that now these will all link to page that will be slash products slash Holy Wind slash fragments fragment Hill and so on and so forth. Cool. So let's shoot back to index for a bit. Do you mind just pushing these changes to the live branch. We had some people in Discord asking for it. Sure sure. Thanks. Just give these a gap first, so they're not butting up for next week's gap. Yeah or just phasing a little better. Yeah. And we'll do just so it's a bit more responsive. And right before I push this up, we're just going to preface the grade calls with medium. And this is a Tailwind's way of doing kind of responsive design where basically at the medium size, they'll kick into three. But otherwise, it'll just be a single column. That way, I can make everything a little bigger and so on. All right, so let's add those. Just really quickly, add the product list. All right, let me know if that's not up there or if anyone's having any issues. But you should be able to pull down and get caught up.

11. Adding Load More Button

Short description:

We're going to add a load more button to the product listing, which will increase the number of products displayed when clicked. The server state concept in Hydrogen allows server and client components to communicate. We'll create a client component called load more, which will wrap the product listing and display the load more button. We'll use the use server state hook to manage the first variable in the server state. Currently, the load more button does not have any functionality, but we'll add an onclick handler to set the first value in the server state to 10.

Okay, so, next up, what we're gonna do... So, this is pretty cool. We got our list of products, but we're only getting the first 10 and we want a way to load more products. So, this is where... What I personally think this is when kind of the power of server components comes in. So, in our index.server, we hard-coded this first value, but what we actually want to do is we're gonna pass this in as an additional variable. So, we'll put in first year. It is also going to be an int. And then we'll just pass that, replace our 10 with the use of this variable. And then we need to pass that into our query, just like the other ones, and that should basically all still work. Nothing should change. We've just, now we're setting it up here. One further layer up, we're gonna do first. And actually, we're going to grab this out of the props of our page level component, which in this case is index. And we're just gonna give this a default value of 10. So first, it's gonna be 10, which is coming into our page props, and then we're just passing that right along to our query. So nothing's really changed here yet. If you want, you can get rid of this redundancy. And can you just say, so first, first. And this is the amount of products that we're gonna get down here. But what is this? What is this? So where this comes in is where part of hydrogen is that we actually have a concept called server state, which is a way for server and client components to communicate. If we change this to four, just so that we'll just see this a little better. We'll only get four components now. Yeah, that's better. So what we wanna do is we wanna have a load more button. That is gonna change this to load more products. And so it'll continually increase this as we load more. And this is sort of like a poor man's continuous loading. If you wanted to do this a bit more complicated and maybe we can do it after, is like you would use a cursor here and you would pass the cursor along. But for now, this is all we really wanna show is how to manage the server state from a client component. So let's create that client component. It's gonna be in components and we're gonna call it load more. That client at JSX. So we'll export default load. Sorry, function. And what we're gonna wanna do is we're gonna want to wrap our entire block of product listing within this component and append a load more button at the end. So let's create a div and let's grab our children. We'll grab from the props up here. And then underneath that, we're gonna grab a button and we'll say load more. and just install children correctly. And that's good. Now we want to use this component. So we'll import it. Load more from components slash upgrade and we'll wrap our product list in the load more. Configuration. Now if all goes well, we should see LoadMore at the bottom. And we do, but it's so small. So we're going to make it bigger by just adding some tailwind styles. So class name, say BG Black. So text. So color. What is the, what is the way to color text. Text White. There we go. Oopsies. And we'll give it a little bit of padding on the y-axes and even more padding on the x-axis. So that's looking better. Better. Let's actually, we'll say just, actually no, that's probably fine. We'll just give it a bit of, yeah, no, we'll wrap this in a div and then. Dy, just something like pretty big, like 10 in text center. Close off this div over here. Great. Good, we have this load more button. Currently, it doesn't do anything, so let's add a non-click handle to it. So what are we gonna do here? What do we want to have when we hit? Well, we want to set that first variable in our server state. And the way that we do that is we use another hook from hydrogen called use server state. So let's const set, so very similar to a lot of kind of state management hooks. We'll say const use server state equals the result of user state. And inside of our on click handler, we're gonna set server state and we're gonna set the first value. And let's just for right now, set it to 10. Okay, see here. Looks like we've got an error because again, slash client. I think that should do it. So we got four products. Do a load more here and nothing happened. What? First, first we'll see what happened here. Sorry. What did I do wrong? Second, let me just. Okay, great. Give everyone a chance to catch up as well. All right, let's do a little debugging then! The button I would imagine is working. So let's just see what's going on in this here. Let's log our service here. Letting it load more... We're getting 10. Oh, it is working. Oh, that's not right.

12. Building the Product Page

Short description:

We continue with the implementation, adding more functionality to the load more button. We pass additional information to the load more function to determine the number of products to display. The load more feature enhances performance by sending a serialized JSON response instead of hitting the GraphQL API directly. We briefly discuss the possibility of implementing infinite scroll instead of a load more button. We take a short break and plan to skip the infinite scroll implementation for now. We recap the progress so far and begin building the product page. We explain the structure of the application and the components used in the product list. We introduce the concept of server state and demonstrate how it is used to communicate between client and server components. We outline the steps to build the product page and navigate to it from the product list. We prepare to create a new route and page in Hydrogen. The next step is to add the product page to the pages folder.

Oh, it is working. Oh, that's not right. I think maybe if I saved I could refresh at a weird time so it didn't look like it was working. Where's that? If you want to get rid of that, you need the key prop console log there. Just give a key value to our product card and use that product ID. That should make it go away. Great. So, we click load more and we get 10. We should... Yeah, there we go. I think my internet's also just a little bit slow. So that's great. But if we click it again, we're still just going to have 10 and it's not going to change it. So, we actually want to pass in a little bit more information to our load more and just let it know what our last or maybe we'll call it current is going to be, what we last sent along. And then, instead of saying 10, we'll just say first plus 4 or something. And again, you might want to do this with a cursor, not this particular way of paginating with GraphQl, but if you don't know what I mean by that, then that's fine. You'll learn it when you need to. First plus 4, first. Why didn't we put it here? First is that... Oh, because I called it current. Oh. Never mind. Current plus 4. Alright, let's see this work. We should load. We should get the next 4. And then we get the next 4. Reload again, hopefully. And we do. So that's cool, but why is this actually like... Why is this so impressive? Well, what's neat is that when we do this, if you open up the developer tools like I have, you go over to the network and you just look at all... Or look at XHR requests. you'll see that never are when we load more, are we actually hitting our GraphQL API? What we're actually doing is just sending along this slash react... We're just getting this slash react endpoint back, which has this serialized data here. And this is kind of a represent... This is a representation of our client components and also another representation sort of of our whole tree. Don't want to focus too much on this because it may change. But just the real takeaway here is that there's a serialized JSON response that is streamed back to the client. Which is going to be more performant than hitting the GraphQL API directly from this client component, this load more. So now that we've done that, it's trivially easy to do more here. Let's just do a quick time check. I think we have a little bit of time here to just say, well, what if we wanted to have this happen more not with a load more button, but just on scroll. So the way that we can do that is we've pre-installed a library. Actually, before we do this, let's do another commit. Really quickly. Matt, we have some people in the Discord that are just asking if we can take a short break. Oh, yeah. This is probably a good spot to stop for now, just for five minutes. All right, cool. Yeah, we'll do a short break. I'll commit these up, and then we'll reconvene. We'll do, how are we doing for time, do you think, Catherine? We're a little more than halfway through. I think we might want to skip the little bit with the infinite scroll that we were going to do. We can come back to that maybe at the end just to make sure we have time to get through the rest. Yeah, sure, that sounds good. We'll get a bit fancier with this a little more later if we have time, but otherwise, this shows the main concepts of what we're really trying to communicate, a little more, more like a sprinkle of little bit nicer interactivity. Yeah, sounds good to me. I'll just commit these up, and then we'll take a short break. Great. Thank you for that. Okay I think I'm going to get started then with the next part. If everyone's ready, so Matt pushed everything up to the live branch so go ahead and pull that down if you want to work on the same branch that we've been on. I'm just going to continue his work from there. And before I get started, I'm just going to do a quick recap of everything that we did because that was a lot and was pretty cool. So Matt went through and built first a server layout component, which is a shell of our application where we did our first query to the store front API to get the shop name. And for that, we used the UShop query. We then went on to build a product list page on the index page, and in that we did another query with you shop query and we used a product provider fragment provided by hydrogen to build out the query to query for our products. We then built out a product list client component here. The product list just iterating over the products to render a product card. The product card component itself was making use of a bunch of hydrogen components including the product provider, the selected variant image, product title, and selected variant price. We're also using the link there so that when we clicked on a product, we can go to a product page, which we haven't built yet, but we're going to be building now. And lastly, before we build it just to finish up the recap, Matt built out a load more button that used server state and shows you how to communicate state between client and server components, and demonstrated how you can use that to make additional requests and load more product data. To take things from there, we're now going to be building out the product page. So, if we go ahead, let's look at Little River for example, this product here. If we click on it, right now it's just going to a page. So, this page could not be found. You see the URL up here is products, slash the product handle that we get back from the storefront API. What we're going to do is we're going to build our first new route and our first new page in Hydrogen. And the way we do that, is by going over here actually. Let me just increase the size of my, of everything here, so people can see. That does not look okay to you on your end? Just want to make sure you can see it. Yeah, it looks good to me. If you don't mind, just, you, can you open up a file with code in it? Yeah, let's do the font size. Yeah, that's good. That's better? Cool. Yeah, I think that's good. If anyone disagrees, just say so in the chat. Yeah, let us know. So, let's add our first new page. We're going to do that by going to the pages folder here.

13. Dynamic Routing: Implementing Product Pages

Short description:

We're going to add a new folder called 'products' in the pages folder, which corresponds to the 'products' part of the URL. We'll create a page called handle.server.jsx that will extract the handle from the URL using the use params hook from React Router DOM. We'll use this handle to query the storefront API for our products. After restarting the development server, we can see that the handle is successfully printed on the page.

And like I said earlier, any new components that are added to the pages folder are actually going to be registered as routes in our application. What we're going to do is, we're going to add a new folder here, and we're going to call it products. And this is going to correspond to this little part of the URL right here, products. Next thing we're going to do is, we're going to build a page. Let me just right click here. There we go. We're going to make another page that we're going to call handle in square brackets like this.server.jsx. What that means is that anything after the slash after product, so whether it's a product handle like little, river or any other string, like any string or just a jumble of letters, that's going to be our handle. And we're going to be able to pull that handle out using the use params provided by React Router DOM. And then we're going to use that handle to query the storefront API for all of our products. So let's give that a shot. I'm just going to first build out a little dummy component here. We're just going to say export default function product. And let's just return here a little paragraph that says hello. And we're going to put we're going to print the handle there. So let's go ahead. We're going to use the use params hook from React Router DOM and we're going to extract the handle from it. We're just doing a little bit of object destructuring here. Let's go ahead and use params and let's not forget to import it otherwise none of that's going to work. So let's import use params from React Router DOM. You may be wondering where's React Router DOM coming from? Well, we've already installed it and it's part of the package dot json so you don't have to worry about adding it or anything. It's already included in our project. We're extracting our handle and let's go hello handle just to print it out. One last thing when you add a new page in your products, we need to make sure it gets registered as a route so we're actually going to restart our development server to make that happen. So, I've just canceled it here and I'm using yarn so I'm just going to rerun yarn dev. If you're using npm you can do npm run dev. There we go. If I go here and we wait for this to refresh, here we go! It says hello little river, we're in business. Let's do this.

14. Querying for Product Data

Short description:

We're going to query for our product data using the product provider fragment. We'll copy the query from the index.server file and paste it into the handle.server.jsx file. Import the necessary dependencies and adjust the query to retrieve a single product by handle. We'll also import the product provider fragment from the Shopify/hydrogen bundle.

The next thing we're going to do is let's actually query for our product data. How are we going to do that? We're actually going to use the product provider fragment like we have already used previously with Matt. So, just to save on needing to type it out, I'm going to go over and do a little bit of copy pasting. So, let's just grab this query here. From our index.server file. And let's go ahead and paste it down here in our handle.server.jsx file. Right away, I saw a little flash here saying GQL is not defined, so don't forget to import that. So, we'll import GQL from graph.ql.tag. Perfect. And we're also going to, there was another error saying product provider fragment isn't defined. So let's go ahead and import the product provider fragment from the Shopify slash hydrogen bundle. I know previously when we were doing our demo, we were using Shopify slash hydrogen slash client and that's only for client components. The Shopify slash hydrogen slash client bundle only exports client components because those are the only things we want in our client bundle on the browser. When you're on the server, however, you can just import directly from at Shopify slash hydrogen because we don't really care for importing server components there because we're on the server anyway. So let's go ahead here and just adjust our query.

15. Querying for Product Details and Handling 404

Short description:

We rename the query to 'product details page' and modify it to retrieve a single product by handle. We use the 'USHOP query' hook to query the storefront API and extract the data. We create a client component called 'product details' to display more information about the product. We handle the case of a non-existent product by returning a 404 page. The 'not found' component is used to display the 404 page. We set the fallback prop in the default routes component to always display the 'not found' component for undefined routes.

We're going to rename it. Best practice is always good to have a name for your query. So let's just call it the product details page. We're going to keep all of the same variables because we're still making use of the product fragment, which needs these variables. But let's get rid of this first one here because we're only retrieving one product each time and we're actually retrieving it by handle, right? So what we're going to do instead of using the products field in our query, we're going to query instead the product field. And all we have to do is the source and API here is expecting for us to pass a handle and the handle is what handle that corresponds to the product. And that's what we retrieve back from the storefront API. So let me just go up here and add handles so that we don't forget to define our variable for GraphQL. We're going to say it's a string and it's mandatory. We always have to have it. And lastly, we're just going to clean up our query here because we're only querying for one product. This isn't actually a relay object because we're just getting a single product back. So we can go ahead and remove the edges and the node section there and just to use the product query. Perfect. So let's go ahead now and actually use that query. Like we did previously, we're going to use the USHOP query hook from hydrogen, which lets us query the storefront API from a server component. And then we'll go ahead and extract the data from that response with Object Destructuring. And we'll use USHOP query, and we'll pass our query in like this. And we'll also pass our variables in too. And to avoid needing to copy everything down, I'm just going to go back to the index.server, and I'm just going to copy these variables here from our previous one. I'm going to paste that there. We'll go ahead and we'll take the same number of everything else that we had previously. And don't forget, we also added a handle variable to the query. So let's pass that through as well. And we'll just say we're using this handle. Now, let's console.log our data just to make sure that we have it and that it shows up as expected. So let's see what happens. And again, we're console.logging in a server component. So if you go and you look at your console in your browser, you're not going to see anything there because this console.log is executing on the server. Instead, you're actually going to see it down here in your terminal where you can see your server commands. So there we go. We can see that our product that has the handle, littleriver. We're actually getting some information back. Success. So what are we going to do next? Well, obviously, we need to display a little bit more than just Hello, Little River on our product page. So we're going to build now something that has a bit more interactivity to it that allows people to select different variants associated with the product and to add items to their cart and even check out with a product. And since that has interactivity in it and it's no longer querying the Storefront API, we're going to build a client component. So let's go ahead to our components and build a new file. I'm going to call this the product details.client.jsx file. Let's just go over here and import it before we define too much of it. So we'll just say import product details from. And we need to go all the way to our components folder and grab the productdetails.clients. Now, what I'm going to do is instead of returning Hello, Handle, I'm going to return product details, and let's pass the product information through as the product prop. So we'll just do this. Cool. Let's go over to the product details now and actually build a component that we can use. So we'll export default function product details. We know that we are receiving a product prop. Let's return for the moment just to show that this is working. We'll return hello product title. So it's the same thing we were returning previously. So here we go. If you look over here, after refresh, hello, little river. Let me just say hello from product details. Boom. There we go. Now, there's one thing I want to highlight here is that we're using the URL. Anything that comes after the slash products is going to be used as the handle. But it's entirely possible that someone might put in, mistakenly write the handle. Maybe they'll write little river and add an S to it. It's plural. Well, we don't have a handle. We don't have a product associated with a little rivers handle. So what should we do here? Normally, it would show a 404 page. And so that's exactly what we're going to do. We actually have a component that we pre-built before this workshop. You might have noticed it. It's called notfound.server.js. And this is essentially our 404 page. It's very lightweight just for the purposes of this demo. But you could build it out more to look like what you would want your 404 page to look like. Right now, we're just returning this page could not be found in a paragraph. And so what we'll do is we'll go over here to handle.server. And in the cases where our data is undefined, we're just going to return not found. So let's do if data is equal to null or if data.product is equal to null, let's go ahead and return not found. And don't forget to import not found also. I got the components folder, so we'll go ahead here. And it's a server component since it's just it doesn't have any interactivity to it. It's just outputting a paragraph. So now if we refresh on Little Rivers, we can see this page could not be found. So we're showing a 404. Awesome. I'm also going to, while we're on the topic of 404, I'm going to draw your attention to in the app.server.jsx file. We'll go ahead and open it. And you'll see in this default routes component that we're using that we have a prop called fallback and to that prop, we're passing the not found component. This is just our generic for any route that's not defined at all. This means it'll always fall back to not found. The reason we had to return it from our handle.server component is because, well, technically, there was a route for it, and it was trying to return something, but it didn't work. So in this case, we have to say, OK, specifically when the data's not there, this product's not found. It's a 404 situation.

16. Building the Product Details Page

Short description:

Let's build a product details page using the product provider component. We'll display the product title, description, image, and price. We'll also add an Add to Cart button and a Buy Now button. The Add to Cart button will interact with the cart and add the item to it. The Buy Now button will take the user directly to checkout.

While we're at it, I'm just going to go ahead and commit this. So let's just go git add, git commit, page width, 404. I'll push this up, and you guys can go ahead and pull it down if you want to keep following from there.

Let's get more into the product details. Let's actually build something out that's really cool that looks like a real e-commerce product detail, right? Details page. We're going to make use of the product provider component that Matt already showed you. And we're actually going to make use of it with the product alias that Hydrogen has. So the product provider can be accessed. You could just use the product provider that's exported from Shopify Hydrogen, or you can use its alias slash product that also provides handy namespacing around a lot of related product components.

So what we're going to do here is, whoops, I'm going to screw up my HTML. That's what I'm going to do. Here we go. What we're going to do here is we're going to return instead a product. And remember, like I said, this is just an alias for the product provider. This is something you've seen before already. We're going to pass the product through, just like we were doing with the product card. And if you remember, when we were dealing with the product card, Matt mentioned that the product provider expects an initial variant ID as well. So we're going to go ahead and extract that. So let's do const initial variant. And we could use the flattened connection, like Matt had said. But in this case, we know we just want the first variant. So let's just go ahead and go product.variants. We're going to go to the first edge. And we're going to take the node from there. Let's go ahead here then. We need to pass through to the product an initial variant ID prop. And we'll pass it the initial variant ID value. Let's display the title. That's the most basic thing to display. So let's do a product.title. If you look here, we're still on the 404 page because I didn't update the handle here. So let's just go back to Little River. Here we go. We're displaying our product title. Another thing we would normally show on a product details page is the description. So let's add that. Fantastic. In this case, our product description is literally just some of the lyrics from Hey Jude. You'll notice that some of it is italicized and some of it's bolded and underlined. And that's because in the Shopify admin, this product description was added using a rich text editor, which provides HTML. And what's happening is the product description is using the raw HTML component that Hydrogen provides under the hood. And it's just outputting that and setting the inner HTML so that HTML ends up outputting on the page. Now let's display an image. We're going to use product again. And we're going to use the selected variant image. And previously, you probably remember we were using selected variant image as a component name. But right now, it's namespaced under product selected variants. That's a nice, handy little shortcut for you so you don't have to continuously add new imports here from Hydrogen. And there's our image. Fantastic. Next thing we'll do is we're going to display the price. So a product itself has a price. It usually has a price range associated with it. And then you have to actually use a selected variant price in order to display an actual unique price. So what I'm going to do here is do product.selectedvariants.price. And that's going to display the price for this variant. Now, if memory serves me correct, I added a compareAtPrice for this product. So this product is actually on sale right now. So there is associated with it from the Storefront API, we will have been given a compareAtPrice that shows the original price. You can access that by using the selectedVariant.price component again. But in this case, you want to specify the price type, which in this case, we're going to say is the compareAtPrice. And there you go. Take a look over here. This here, the first one you see is the default price, just the price that it's offered at right now. And then this price here is our compareAtPrice. Super handy. Now, obviously, another thing you like to do on a product details page is you need to be able to add the item to the cart, right? There's not really much point if you land on here and you can't do anything with the product. So we have another little handy utility for that. So if you go to product.selectedVariant, there's a component called the Add to Cart Button component. Now, this is a button that when it's clicked, it's automatically going to interact with the cart, and it's going to add the item to the cart. And you might remember from the beginning, when we were introducing hydrogen, that I said that headless components never include hardcoded content. And what that means here in the case of the Add to Cart button, well, we need to say Add to Cart or Add to Bag or Buy Now or whatever string you want to show on the button. We need to provide it, since hydrogen's not going to do that for you. So here, we're just going to specify Add to Cart. And we'll refresh. And here we go. You can see the button. Fantastic. Right now, if you click it, nothing's going to happen. Under the hood, something is happening. Let's go and inspect the console and just take a look at the Network tab. You'll notice whenever we click the Add to Cart, we're actually doing a graph QL request. And we're actually hitting the storefront API to add this item to the cart. Nothing visually is happening on the page because we haven't actually added any cart UI yet, which will be the next part that we do after this product page is built. Now in some cases on some e-commerce websites, you might see a Buy Now button. So you don't need to add an item to the cart. You can just click Buy Now, and you go right to Checkout with that. We also have one of those built into Hydrogen. So you just need to use the product.selectedvariants slash buy now button. And again, like the Add to Cart, you need to specify the content that you want to display on the button.

17. Adding Media Gallery and Product Options Picker

Short description:

We added a media gallery to display images, videos, and 3D models associated with the product. The media file component automatically determines the media type and outputs the corresponding element. We specified options to resize and crop the images for better user experience. Next, we plan to build a product options picker to allow users to select different variants.

So we're just going to write Buy It Now. And let's save that. There we go. And there you go. You can see the Buy It Now button. I know nothing here on the page is styled yet. We're just using the default styles that are coming from Tailwind. But we're going to get to styling shortly, so just bear with me. Now if you click on the Buy It Now button, you'll notice we're redirecting to checkout. So now if you want to start selling, that's literally all you need. There's still more, obviously, that we need to do. We still need to style it so that people want to buy things and finish up our product page. So let's go back. But at least that's exciting, knowing that, hey, we can buy stuff. What else do we need on this page? Well, let's add a media gallery. Because yeah, there's one image here, but I know for a fact that I've added more images in my admin for this one product. So what I'm going to do is actually I'm going to build a gallery component here. I'm going to just scroll down on this page, and I'll just build out my gallery, Function Gallery. Now, something that's important to note is that, oh, let me just return null in the meantime so we don't have to see that error message. Something to note here is that the product component, product provider component, sets up a product context for any child component that belongs to it. And any child component can make use of a use product hook. And that's what we're going to do right now. So we're going to do const media is equal to use product. Before I forget, I'm just going to scroll up here and import use product from Shopify hydrogen client bundle. Now, what am I going to get from the use product hook? It's going to return to me the product object, but it includes a lot more stuff than just that. The product context is actually it's passing through all of the information that you've already retrieved from the Shopify storefront API. But it's also doing a few different things. Under the hood, it is taking any connection fields that you have in your products. This would be, for example, a media connection, a variance connection, a meta fields connection. And it's automatically flattening them for you. So here, when I say when I'm extracting the media from the use product, I'm just getting a flat array of media files from the storefront API. What we're going to do here is let's just build out an unordered list that has all of our product media displayed. So we'll just do media.map and we'll go over all of the media. And we're going to use one of the hydrogen primitive components, media file. So we'll do this, return. Let's do a list item. We're going to return media file. We're going to pass a prop media and the prop that we're passing through is just the product media that we're mapping over. And I'm going to scroll up here and I'm going to add the media file to our import. Boom, there we go. So as you can see, we had our original image up here, the selected variant image. But now we're also including a bunch of other media for this product. Now I'm going to just mention here that in your Shopify admin, you can add images, you can add videos, you can add 3D models to your products. You don't have to just add images. And you might be wondering, well, why are we referring to this as media instead of images and media file instead of using the image component, for example. The reason here is that the media connection field from the storefront API will return to you all of your media you've associated with the product, regardless of what type it is, whether it's a 3D model, a video, or an image. And what this media file component does is it just takes the media object you've given it and it automatically checks to find what type of media it is, whether it's an image, a video, or a 3D model. And it outputs either an image, a video, or a 3D model for you. So it's just a handy abstraction here for you so that you don't have to go and inspect the product media and be like, oh, do I render an image or a video? Let the media file take care of that. You have more fun things to do. Now, another thing, you'll notice, OK, these images that are being returned are quite large. I don't want to bombard my user with these huge images on the product details page. So what I'm going to do is I'm going to specify some options. Now, the Storefront API, when you upload images to the Shopify admin, they end up being hosted by the Shopify CDN. And what's great about that is that you can adjust the parameters and arguments in the URL to make sure that you retrieve an image of the right size, with the right format, with the right cropping, et cetera. So what we're going to do here for the options is we're actually going to just specify, give me an image with the width 100, height 100. I want you to crop it to sort of maintain a nice aspect ratio for me, but just crop it in the center. So just take your big image, give me 100, 100, right in the center of the image. And that's what's happening. So you'll see here, all of our images are small now. So we don't have to worry about the buyer downloading huge images that are just going to be shown really small, or using up all their mobile bandwidth. So that's awesome. I'm going to go ahead, and I'm just going to commit this for you, those who are following along. If you're lost, let's add. Added media. And we'll push it there. Oh, how are we doing on time? Cool, 2.13 We're on track. What's the next thing we should do? We've got our media gallery. We're displaying our product title. We're showing the regular price. We're showing the Compare At price. We have our Add to Cart buttons, and we have our product description. It's not styled yet, but we're going to get there. But one thing that's missing is I know that I have two different types of variants for this product. I know I've got a burgundy option for color, and I think it was a teal option for color, but we don't have anywhere here to change that. We don't have anywhere on this page right now to adjust that variant. What we're going to do is we're going to build out a product options picker. So let's just scroll up here, and let's say under the price, but before the Add to Cart button, let's render an options component. Let's go ahead and build that. It's not defined because we haven't built it yet. So let's just minimize this gallery. We'll do function options, and let's return null. Now, when we were building up the media gallery, I was telling you all about the use product hook and how it does a bit of processing on the product object for you. Some of the processing that it does is it actually sets up a bunch of state for managing the selected variant for you and provides you with handy callbacks for changing the selected variance and keeping track of everything related to selected variants. So we're going to use that here. Let's go ahead and grab the option objects and set selected option callback from the use product that's returned. The options here is going to be an array that tells us what all the product variances are grouped together. So, for example, if I know I have a product variance that are based on colors, I can get teal or burgundy, so I'm going to have, like, one item in there that's not a color. So I can just pick one and then I'm going to group that into a set of options. So I'm going to be ending up in this array with a title of color and with values of teal and burgundy.

18. Building the Product Options Picker

Short description:

In the media gallery, we iterate over the options and render a list item for each option. We display the option name and render a radio input field for each value associated with the option. We associate a label with each input using the value. When the input changes, the selected variant is updated using the state callback. We use a controlled form component to ensure the correct item is checked. This interactivity is not possible with server components.

Selected options is going to keep track of what option is currently selected. And set selected option will let us update that value. So let's go ahead and build this out. In the media gallery, let's do an unordered list, and let's iterate over the options. We'll map through them. And for each option, let's return a list item. List item will include a span that has the option name. That's option name. See how that looks now. So you can see right here, that's where we're starting to render. So the option name is color. And now for each value associated with that, let's render a radio input field. So let's do option.values. Up. We're going to map over each value. And we're going to return. Let's open a little React fragment here because we're going to return an input. Whoops. An input of type radio. Value is going to be associated with the value. We're going to give it an ID associated with the value so that we can associate the label with this input. And of course, we need to give it a name. So we're going to give it the option.name so that everything is part of the same field set. You know what? It's a bit hard to read this because all of these are going off the screen. So let me just do this for us. Makes it a little bit easier. Next, we're going to do a label to associate with that input. Let's make sure we use an HTML4. And we pass the value in since we want to refer to the ID that's here. And let's just output the value. Like this. Let's go have a look. Excellent. Here we go. We see our options, the name. And we see the different values associated with it. And now, if you remember correctly, this image up here, I'm using the product selected variant image. But when I go and I change the selected variant here, nothing's happening. And that's because we haven't actually updated the selected variant using the state callback. So let's do that here. We'll go into the input. And whenever the input changes, we'll add just an add and on change. Let's take the event. And we're going to say, set selected option. We'll pass the option name, which is color. And let's pass the value. In fact, here, this should be event target value because we want to use the value associated with this input. And lastly, we're going to want to make sure that we use a controlled form component here. So we're just going to just check if selected options with this option name is the same as this value, then this item should be checked. So let's do a little refresh here. All right, let's see. Moment of truth, when I select this, yes, now the image updates. So it's nice little interactivity here. And part of this interactivity is, again, why this couldn't be a server component, because server components can't handle this state and context that we need for this interaction.

19. Styling the Product Page

Short description:

Now we can start styling the page. We have the full functionality with the selected variant image, media list, and price. Hydrogen allows for flexible styling options. Let's wrap everything in a grid and create three columns. We'll place the selected image and gallery on the left side, the other information in the middle, and the gallery in the third column. We'll add rounded edges to the media files and some spacing between the columns. The Add to Cart and Buy It Now buttons will stand out with different styles. Let's finish up the styling and move on to the next topic.

Now I think we can probably start to style this. I think we've got the full functionality here. We have the selected variant image. We have a list of media here. We've got the price. Let's add some styles to make this look a little bit nicer. So you can copy the styles that I'm doing here or you can just do your own. I mean, the great thing about Hydrogen is that you have the freedom to do any styling you want.

So actually, let me do this instead. I'm going to wrap everything in a div and create a grid. And you know what? Before I do that, let me just commit what we have. And I'll push it up, and you guys can pull it down if you're lost or stuck on anything. I'll do a short break to drink some water. So just bear with me for a second. OK. Let's keep going.

Let's add a class name here. We'll set up a grid and we're going to do three columns for this. Is it looking? All right. Looking terrible, but we're getting there. Let's do a class name. Let's put the selected image and the gallery in the left side of the page. And let's make it fill two columns. How does that look? Getting there. And let's put all this other information in a div as well in the middle, just to make sure that the whole thing is showing. And let's put all this other information in a div as well in the third column. Perfect. This is looking good. Let's finish up the gallery over here. Let's also put the gallery in a grid as well. So let's do a class name, grid, grid calls. Let's put four. How does that look? Now this is one of the really nice things about Tailwind, is that the styling really doesn't take long at all when you're really familiar with what all of the utility classes are. Let's put a gap between every image of two. And that's just going to be for the grid gap spacing. And maybe let's make the media files look a little bit nicer. Let's make a class name. And let's put rounded or edges on them. That looks nice. And maybe let's add a little margin between these and the selected image. So let's do a margin top here. And let's just add a margin top of two. Let's see how that looks. Perfect. Let's go up to the selected variant image now, and why don't we also add a class name here to get large rounded edges. Like that. Fresh. Boom. Looks great. Let's add a little bit of spacing between these columns here and this third column. We can do that by adding a margin right with MR. And let's add four here. See how that looks. Great. Let's emphasize the title a little bit. It's so small there. So let's make it text 3XL. So super large compared to everything else. And why don't we make it semi-bold too to stick out a bit. There's not a lot of spacing between everything here. So I'm going to use one of the Tailwind utility classes for spacing everything on the y-axis. So I'm going to use Space-Y2, which puts spacing between each element that we see here. I'm going to go right to the Add to Cart button. And I want to make that stand out. So let's do class name BG-Black. We'll use text-white. And let's do padding. The x padding will be 6, and the y padding is going to be 2. That looks a lot better. Getting there. And let's do rounded. Cool. And why don't we do something similar to the Buy It Now button? Make that stand out, so that people feel like clicking the button. And instead of making it BG-Black, we'll add a border. We'll say Border, Border-Black. We'll keep our text black, so no need to change it there. Fresh. Excellent. Hey, Catherine. Mind your thing. You got a little cheat program actually. Hey, Catherine. Mind your thing. You got two PXs instead of a PX and a PY on those. Nice catch. That would explain why it didn't quite look like what I thought. Thanks, everyone. OK. So I'm going to speed through a little bit. I could keep styling here, but there's one thing I want to show you.

20. Render Props and Custom Static Pages

Short description:

We discussed the usage of Render Props and Render Prop functions for customizing elements, specifically the product price. By accepting a function as a child, the product price component can pass price information to that function. We demonstrated this by logging the price object in the console. The object contains the amount, currency code, currency name, and other breakdowns of the price. We then enhanced the display by customizing the currency code and adding the currency symbol and amount. We also showed how to use Render Props to customize the styling of the price. Additionally, we briefly discussed the possibility of building custom static pages for specific products using Hydrogen. This can be achieved by creating a more specific file for rendering, such as the sparkling shape.server.jsx file. We provided an example of querying for data and rendering a paragraph with the product title and a media image. Please note that this is a purely server component without any client features. We apologize for any mistakes made during the copy-pasting process.

Since we're almost at 230, almost 2 and 1 1 hours so far in the workshop, we talked about Render Props and Render Prop functions as a way of customizing things. So you've seen right now, you've always seen us using Pass-through props and passing class names through. But I'm going to show you how to use Render Props for something like the product price. So what we do here is the product price accepts a function as a child. And it's going to pass price information through as a first argument to that function. What I'm going to do is I'm just going to console log the price here so you can see what's in this object. And since we're on a client component, it will be logged in the console here. So let's scroll up. I always forget to add the keys. I'll fix that later. Now, if you look here, the object that's passed to the Render Prop function includes an amount, a currency code, a currency name, as well as all these parts here that are just sort of the price that has been broken down. And a lot of these are returned from the international number format JavaScript object and all the utilities that are associated with it. And what I'm going to do here is I'm just going to make this look a little bit fancier. Let's instead of just showing the price by default, let's show the price dot currency code. So we can say that it's in Canadian currency. And actually I'm going to put this in a fragment. Yes. And let's display the price currency narrow symbol. So this is the little dollar sign that we see. And then here, I'm going to output the amount. And what I'm going to do is I'm just going to map over the price parts. I'm going to just return the part value. And I'm going to join them together like this. Let's see how that looks. priceParts.map. There we go. So you can see it there. Now it looks slightly different than before. But let's add a little bit of customization to it. So let's say classic price. So let's say class name, we want this to be small text. We want it to be font, like text color gray maybe. Text gray, 400, let's say. There we go. We're starting to add a little more customization there. I'll add a little bit of a margin on the right. We'll do that. So here's an example basically of Render Props and using Render Props to take the default output and sit a lot more by providing your own function that returns its own JSX. I'm going to go ahead and commit this so that you guys can follow along again. And I'm going to take a short break very soon. I just want to show one thing that'll just be sort of a bit of a copy-paste off of some notes since we're a little bit short on time. But it's possible in Hydrogen to build very custom static pages for specific products. And that's done by, for example, instead of using the handle.server.jsx to render a page, you can specify something a lot more specific to use for rendering. So in this case, I'm actually going to use, let's see, I have some notes here. I have a product in my store that's got a handle called sparkling shape. And I want to market that and make this really cool landing page for it that is going to be unique from all the other pages that we have for products. And the way I do that is now by defining this sparkling shape.server.jsx file. When we try to hit that by changing this here. Actually, whoops. Just let me restart the server because I added a new item, a new page, excuse me. And now that I have this new page. It's going to use the sparkling shape.server instead since it has a more specific route it can use. And let's just do a really quick example here. Sparkling shape. Return, let's just return, hello world here. Make sure it returns hello world. Sparkling shape. There we go. And quickly, and I'm sorry about this. I'm going to do a bit of copy pasting just to speed things up. What we're going to do is we're going to use, we're just going to show an example of querying for that data. So we're going to use the same query we had previously in the handle.server page. Let me just copy paste that and put it down here. We'll use that. And we know that the handle we're hard coding to be sparkling shape which corresponds to this handle. And we're going to return it. In this case, let's do something that is a purely server component that doesn't have any client features in it. So let's return here just a paragraph with your product data.product. Title. And maybe we want to also return a media image. So we can use a media file component here. Import it from hydrogen. Go to that Shopify slash hydrogen. And let's just pass the first. Yeah let's just pass the first media file into this. So we're going to use flatten connection just to make this a little bit simpler. Data dot product dot title. And let's just take the first media that we get from there. And let's see. Nope, don't forget to import flattened connection. In GraphQL. And don't forget to import GraphQL. Let's go here. And use shop query. And product provider fragment. Oh my goodness. This is why we don't like to copy and paste. What do we got here? Looks like we have a little mistake. Cannot read property undefined. Oops.

21. Building the Cart Component

Short description:

We're going to build a cart component that allows users to add items, view the cart, and proceed to checkout. The cart component will be a client component that executes on the client side. It will make use of the cart lines component to access and display the merchandise lines in the cart. The cart lines component allows for customization of each cart line, including the title, image, price, and quantity. The cart component will be rendered within the layout component, ensuring it is only displayed on the client side. We will import the necessary components and make use of the cart provider and cart server provider to set up the cart context. The cart lines component will be used to render the cart lines, and we will customize the display of each cart line using properties like product title, image, price, and quantity.

You should be passing the media connection here. There we go. We're displaying a new entirely custom page. And on this page, since let's say we want to keep it just operating on the server with no client, we don't want to use any product provider functionality since that uses a context, then we can make use of a lot of primitive components like the media file or the raw HTML, for example, where we can pass in a string of just the data dot product dot description. But you need to import. And actually, I need to say description HTML here. I used the wrong field. But there we go. And these components, media file, raw.html, these can execute on the server, which means that this entire page, none of the- there's no client code that's being passed to the client. There's no client bundle here. It's just all rendering on the server and just being passed down the wire.

So I'm going to go ahead and save this and push it up. And we're going to take a short break for like, let's just do like a short three minute break, and I'm going to show you how to build out a cart component. And then we should be finishing up the workshop. So if you have any questions, please take them into Discord. Hey, Catherine, I think you need to push those. Yeah. Good point. There we go. It's coming. All right. I'm going to get back to it. Now, we're going to start building out the cart. OK. Just a moment while I get things ready on my end. So we've built out the product list on the index page. We built out a product display page with all the product details. We used the product provider again. We used some of the Used Product hook. We built out our own product option selector. And we also used the Add to Cart and the Buy It Now button. The Buy It Now button we know works already. If you click on it, you're going to get redirected right away to the Shopify checkout. And if you open the order summary, you'll see that you have the item that you've picked already and you can go ahead and purchase it. But I mean, usually people, they want to add more items to their cart and then check their cart out. So let's go ahead and build the cart so that we can do all of that. What we're going to start with is let's go and make a new client component. And we're going to call this cart.client.jsx. And it's important to note that the cart has a lot of interactivity to it. It's actually, I think, the only hydrogen component that makes queries on the client side. So we need to make sure that this is a client component. It will only execute properly on the client. So let's go ahead and define this. So we'll export default function cart. And for now, I'm just going to say, hello cart. Go down here to our layout component. And what we're going to do is we're going to render the cart just right here. Let's make sure we import it. And you might be wondering, hey, we're using a client component on the server. That's fine. The layout component will just, it's not going to render the cart on the server. That's only going to happen when all of the information is sent to the client. So let's go ahead and look here if we refresh. Ah. You know what? It's not displaying because we actually need to use the layout in the product details page. So let's just go back to handle.server here, and let's wrap this in the layout component. And we'll import layout from components here. There we go. This looks a lot better. You can see we've got our cart rendering just at the bottom here. I'm going to go back to the cart page, and we're going to start using the cart-related components and the cart context. Now, if you remember, if we go back to the app.server file that we showed way at the beginning of the workshop, you'll see here that we're using a cart server provider and a cart provider component here. And this sets up a context global to your entire application, so that all the children in your application have access to the cart context. What that means for us is that in the cart, we can make use of really handy components, such as the cart lines component and the cart line component. Let's go ahead and import those. Again, we'll do it from the client bundle here. And what we're going to do is let's use the cart lines first. What does this component do? The cart lines component accesses all of the cart merchandise lines in your cart context. And any children you define within this, it will apply to every single child or, sorry, excuse me, every single cart line for the cart. That means you can do something like this, CartLines dot CartLineTitle. You could even do CartLine dot Image. And if we render that, whoops, something isn't right here. Check the Render Method at cart. Can I just try this for a second? Aha, that's one of the things, OK. This should be CartLine dot Product Title. There we go. So now if we look and we scroll down, you can see we have one CartLine rendering because we've already added this item previously to the cart. So we have little river with its image. Let's make the image a little bit smaller. We'll use the options again like we did previously. Let's just do a width of 75 and a height of 75, and we'll crop it in the center. How that looks, excellent. Let's also display the CartLine price. Because it's a good idea to know what it is you're buying. Perfect. Also, it's pretty standard to show the quantity that you've got for your CartLine, so let's do CartLine.quantity. Refresh this, and you can see a little one here. If we add to cart again, we see it go up to two. If you click add to cart again, we see it go up to three. Fantastic.

22. Cart Functionality and Custom Responses

Short description:

In the cart, you can increase and decrease the quantity using the quantity adjust buttons. There is also a remove button. The cart can display the subtotal and total, along with checkout buttons. Custom responses allow you to return other things, like generating a PDF catalog dynamically. The response object is used to send a different response to the client.

And sometimes in the cart, you also see quantity adjusters so that you can increase and decrease directly in the cart. And we actually have one of those. So you can use CartLine.quantity, adjust button. And let's just add a little plus here to show that this is to increase. Here we go. We'll add also another button for decreasing the quantity. So we'll do quantity, adjust button. And we'll do minus as our symbol. And what we're going to want to do here is by default, the quantity adjust button will render for only increasing the quantity. And so here we're just going to say adjust, decrease. And this will signify I want to decrease the quantity. So now if I go ahead and add a quantity to my cart, so now if I go ahead and click these, there we go. We're increasing the quantity. And we're decreasing the quantity. And it's updating right away in the price that's rendered as well.

Lastly, in the cart, there's often also a remove button because I actually don't want to buy that item anyway. So let's just add a cart quantity adjust button. We're going to say adjust this time is remove. And let's just add a little bit of remove text here. And then when that's clicked, we will remove an item. We can add a few more things. Let's see what time it is. It's 12.45. I'm going to zoom through this really quick so that we can cover everything that we want in the workshop. So I'm sorry that we're not going to get to a really nicely styled cart. But it's showing you the main functionality that you can get right out of the box really quickly. So in a cart, often when we display the cart, we want to show the subtotal and the total, as well as checkout buttons, because we want people to buy the cart. So let's go ahead and use a component called cart estimated cost. And what that's going to do after I import it is it's going to automatically display whatever amount I specify here. And here, I'm going to say, I want you to display the subtotal of the cart. And that's what you're seeing right there, $12. Maybe I also want to display the total price as well. So let's do, oops, cart estimated cost. We'll do amount type total. And it will display the total, which just so happens to be exactly the same as the subtotal at the moment. If I want to add a label to it, let me just put subtotal in front. And we'll put total here as well. Lastly, let's add some checkout buttons so that we can actually go to checkout with this cart. And we've got a cart checkout button component here. And it's like the add to cart button. We're going to have to specify the content. So let's say, checkout now for example. And let's import that. There we go, we can see our button. And if I click it, I'm automatically going to go to checkout again with my item. So let me just take a look at time. Matt, what do you think? Do you want to pause now so we can go on to custom responses? Or do you want me to go on a bit more with the cart? It's up to you. I think a few minutes for custom responses at the end would be good. But up to you, I think. Probably a good idea, I guess, to leave some time at the end for questions as well. There's still a bit more for cart I would like to do, because ideally you don't see the cart being displayed at the bottom of the page. Usually, you see it up in the top corner and it pops in and out. If we had a bit more time, I would get into how to build the state to manage that and pop the cart open and closed. But just so that we don't miss out on the cart on the customer responses stuff, I'm going to end it here. I definitely recommend that everyone check out, actually, I'll send a branch in the Discord. But there is actually a branch called slashcart in the Hydrogen Workshop that goes into a lot more detail about stuff. I just don't have time to do right now. So you can take a look there to see where we wanted to end up eventually. And if you have any questions, you can always email me or ask me in Discord. So let's just add this stuff. I just took over your screen, but if you just committing it, just say. I'm just committing. Nothing fancy. Go right ahead. All right. So let's get back over to where we left off here. Just pull down. Actually, do one more poll here just to be right up to date with Catherine's last work. OK. Great. So the final thing that we are hoping to show was just this idea of custom responses. With custom responses, you can return other things that are not necessarily React pages from the Pages directory. So what we're going to do is we're going to go into our Pages directory, and we're going to add a new file here. And we're going to call this so there's lots that you can do with custom responses. But we're just going to quickly show this idea of maybe you wanted to generate a PDF catalog dynamically from your store data. So we thought of a file here called catalog.server.csx. And what we're going to do just because we don't have the time to totally run through this, we're just going to paste in some already done code. So I'm just going to grab this. And we'll just step through it. Fine. So starting from the top here, we're using a lot of the same utilities that we've already seen throughout this workshop, but we're also pulling in a bunch of stuff from this react PDF render. And this is the library that is third party library. It has been into Shopify, but we're going to use it to render out a PDF. There is some specific styles that are for this PDF that we're just going to glance over. But if we just go right down to the function that's actually going to produce the PDF, you can see that we also, in addition to service state and other stuff that we get in these page level components, we also get a response object. And we're going to first call, the very first thing we're going to do this, call response to the downstream. And this tells react that, so this tells hydrogen that we want a different response body than the react rendered HTML. So this allows us to, if we look down at the end here, we can send down a different response to the client. So in this case, we're sending down a, we're rendering our component, rendering it to string.

23. Custom Responses and PDF Generation

Short description:

We're rendering our component to a string and generating a PDF using the React PDF library. Each component represents a page in the PDF, and a title page is created. The resulting document is then rendered and sent as a response to the client. This allows for the creation of custom responses, such as generating a PDF catalog of products. Other options include CSV exports and returning JSON. Hydrogen provides full access to the page lifecycle, enabling powerful customization within your shop.

So in this case, we're sending down a, we're rendering our component, rendering it to string. This is from the PDF library, setting the response headers to application PDF. And inside of the body of our component, we're just getting the data from our query, flattening the edges, and building out a PDF using the API. Don't really want to touch too much on this, because it's specific to React PDF. But basically, creating a page for every component, and then creating a bit of a title page, and then rendering that all as a document, setting the header, and then rendering that out to the client. So if this all works correctly, I'm just going to restart the server, because I added a new page-level component. At this point, we should be able to go to slash catalog in our shop. And hopefully, we'll get a PDF catalog of all of our products, well, the first 10 of them, into a PDF with their descriptions, and title, and the vendor. We could add more to this. This is just one example of using returning kind of almost building out something other than just like a React page. So you can use a CSV export here. You can return JSON. You could do I don't know. This is where you can get creative. So this is the idea of custom responses that we just wanted to touch on briefly as if is like something that would be pretty powerful within your shop. And one of the benefits of using something like hydrogen and having the full access to the lifecycle of a page getting built.

Watch more workshops on topic

React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Data Fetching Strategies
WorkshopFree
- 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 Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Building a Shopify App with React & Node
WorkshopFree
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.
React Advanced Conference 2023React Advanced Conference 2023
153 min
React Server Components Unleashed: A Deep Dive into Next-Gen Web Development
Workshop
Get ready to supercharge your web development skills with React Server Components! In this immersive, 3-hour workshop, we'll unlock the full potential of this revolutionary technology and explore how it's transforming the way developers build lightning-fast, efficient web applications.
Join us as we delve into the exciting world of React Server Components, which seamlessly blend server-side rendering with client-side interactivity for unparalleled performance and user experience. You'll gain hands-on experience through practical exercises, real-world examples, and expert guidance on how to harness the power of Server Components in your own projects.
Throughout the workshop, we'll cover essential topics, including:
- Understanding the differences between Server and Client Components- Implementing Server Components to optimize data fetching and reduce JavaScript bundle size- Integrating Server and Client Components for a seamless user experience- Strategies for effectively passing data between components and managing state- Tips and best practices for maximizing the performance benefits of React Server Components
Workshop level: 
No matter your current level of React expertise, this workshop will equip you with the knowledge and tools to take your web development game to new heights. Don't miss this opportunity to stay ahead of the curve and master the cutting-edge technology that's changing the face of web development. Sign up now and unleash the full power of React Server Components!
React Summit 2023React Summit 2023
139 min
Create a Visually Editable Next.js Website Using React Bricks, With Blog and E-commerce
WorkshopFree
- 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
React Advanced Conference 2023React Advanced Conference 2023
104 min
Building High-Performance Online Stores with Shopify Hydrogen and Remix
WorkshopFree
I. Introduction- Overview of Shopify Hydrogen and Remix- Importance of headless e-commerce and its impact on the industry
II. Setting up Shopify Hydrogen- Installing and setting up Hydrogen with Remix- Setting up the project structure and components
III. Creating Collections and Products- Creating collections and products using Hydrogen’s React components- Implementing a Shopping Cart- Building a shopping cart using Hydrogen’s built-in components
VI. Building the home page with Storyblok- Cloning the space and explaining how it works- Implementing Storyblok in the repo- Creating the Blok components- Creating the Shopify components- Implementing personalisation

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

React Advanced Conference 2023React Advanced Conference 2023
27 min
Simplifying Server Components
Server Components are arguably the biggest change to React since its initial release but many of us in the community have struggled to get a handle on them. In this talk we'll try to break down the different moving parts so that you have a good understanding of what's going on under the hood, and explore the line between React and the frameworks that are built upon it.
React Day Berlin 2023React Day Berlin 2023
21 min
Exploring React Server Component Fundamentals
I've been developing a minimalistic framework for React Server Components (RSC). This talk will share my journey to deeply understand RSC from a technical perspective. I'll demonstrate how RSC features operate at a low level and provide insights into what RSC offers at its core. By the end, you should have a stronger mental model of React Server Components fundamentals.
React Summit 2023React Summit 2023
26 min
Server Components: The Epic Tale of Rendering UX
Server components, introduced in React v18 end these shortcomings, enabling rendering React components fully on the server, into an intermediate abstraction format without needing to add to the JavaScript bundle. This talk aims to cover the following points:1. A fun story of how we needed CSR and how SSR started to take its place2. What are server components and what benefits did they bring like 0 javascript bundle size3. Demo of a simple app using client-side rendering, SSR, and server components and analyzing the performance gains and understanding when to use what4. My take on how rendering UI will change with this approach
React Advanced Conference 2023React Advanced Conference 2023
28 min
A Practical Guide for Migrating to Server Components
Server Components are the hot new thing, but so far much of the discourse around them has been abstract. Let's change that. This talk will focus on the practical side of things, providing a roadmap to navigate the migration journey. Starting from an app using the older Next.js pages router and React Query, we’ll break this journey down into a set of actionable, incremental steps, stopping only when we have something shippable that’s clearly superior to what we began with. We’ll also discuss next steps and strategies for gradually embracing more aspects of this transformative paradigm.
React Day Berlin 2023React Day Berlin 2023
27 min
React Server Components
React Server Components are a newer way of working with React that is widely adopted in frameworks like Next.js. In this talk, we will look under the surface of how they work and are executed on the server side, and how they fit with server rendering and traditional React apps.