⚛

【Shopify.dev和訳】App Bridge/React components/Overview

2021/09/05に公開

React

Shopify

apps

tech

この記事について

この記事は、App Bridge/React components/Overview の記事を和訳したものです。

Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。

React コンポーネント

Shopify App Bridge は、いくつかのアクションに対して React コンポーネントのラッパーを提供しています。これは、すでに React を使用していて、慣れ親しんだパターンに従いたい場合に最適なオプションです。

App Bridge 自体と同様に、App Bridge React コンポーネントライブラリはnpm の JavaScript モジュールとして利用できます。

App Bridge React 内の App Bridge クライアントappには、（Polaris のように）React Context API を使ってアクセスできます。詳細は、<Provider>コンポーネントを参照してください。

はじめに

import React from 'react';
import ReactDOM from 'react-dom';
import {Provider, TitleBar} from '@shopify/app-bridge-react';

function MyApp() {
  const config = {apiKey: '12345', host: host};

  return (
    <Provider config={config}>
      <TitleBar title="My page title"/> (タイトルバー)
    </Provider>
  );
}

const root = document.createElement('div');
document.body.appendChild(root);
ReactDOM.render(<MyApp />, root)となります。

App Bridge React と Polaris の併用

App Bridge React はPolarisと完全な互換性があります。両方を一緒に使用するには、Polaris の<AppProvider>コンポーネントと App Bridge React の<Provider>コンポーネントの両方でアプリをラップします。

詳細は、<Provider>コンポーネントを参照してください。

Shopify アプリのご紹介

Discussion

ログインするとコメントできます