hydrogen

Shopify Hydrogen is an open-source React-based framework for building custom storefronts on Shopify. It provides a set of tools, components, and utilities to create fast, dynamic, and customizable e-commerce experiences using React Server Components and Shopify's APIs.

Pros

• Built on React Server Components, offering improved performance and SEO
• Seamless integration with Shopify's ecosystem and APIs
• Provides pre-built components and hooks for common e-commerce functionalities
• Supports both server-side rendering and static site generation

Cons

• Relatively new framework, still evolving and may have some stability issues
• Limited community resources and third-party integrations compared to more established frameworks
• Learning curve for developers unfamiliar with React Server Components
• Tied to Shopify's ecosystem, which may limit flexibility for non-Shopify use cases

Code Examples

1. Fetching and displaying a product:

import {useShopQuery, gql, useRouteParams, Link, Image} from '@shopify/hydrogen';

export default function Product() {
  const {handle} = useRouteParams();
  const {data} = useShopQuery({
    query: PRODUCT_QUERY,
    variables: {
      handle,
    },
  });

  const product = data.product;

  return (
    <div>
      <h1>{product.title}</h1>
      <Image data={product.featuredImage} />
      <p>{product.description}</p>
      <Link to={`/products/${product.handle}`}>View Details</Link>
    </div>
  );
}

const PRODUCT_QUERY = gql`
  query Product($handle: String!) {
    product(handle: $handle) {
      title
      description
      featuredImage {
        url
        altText
        width
        height
      }
    }
  }
`;

2. Creating a custom cart component:

import {useCart} from '@shopify/hydrogen';

export function Cart() {
  const {lines, cost, checkoutUrl} = useCart();

  return (
    <div>
      <h2>Cart</h2>
      {lines.map((line) => (
        <CartItem key={line.id} {...line} />
      ))}
      <p>Total: {cost.totalAmount.amount}</p>
      <a href={checkoutUrl}>Checkout</a>
    </div>
  );
}

function CartItem({merchandise, quantity}) {
  return (
    <div>
      <p>{merchandise.product.title}</p>
      <p>Quantity: {quantity}</p>
      <p>Price: {merchandise.priceV2.amount}</p>
    </div>
  );
}

3. Adding a product to the cart:

import {useCart} from '@shopify/hydrogen';

export function AddToCartButton({variantId}) {
  const {linesAdd} = useCart();

  const addToCart = () => {
    linesAdd([{merchandiseId: variantId, quantity: 1}]);
  };

  return <button onClick={addToCart}>Add to Cart</button>;
}

Getting Started

To create a new Hydrogen project:

npm create @shopify/hydrogen@latest

# Follow the prompts to set up your project

cd your-project-name
npm install
npm run dev

This will set up a new Hydrogen project and start the development server. You can then begin building your custom storefront using Hydrogen's components and APIs.