拡張テンプレートによるコンポーネントのカスタマイズ

このチュートリアルでは、拡張テンプレートを使用して、サイトのカスタムコンポーネントを作成します。この例では、カスタムフッターを作成します。フッターはベーステンプレートの既存のコンポーネントであり、ページレイアウトの変更を避ける必要があるため、コンポーネントレベルでフッターを上書きします。

詳細については、ベストプラクティスおよびトラブルシューティングのドキュメントを参照してください。

このチュートリアルのコマンドを実行する前に、プレースホルダーを実際の値に置き換えてください。プレースホルダーは $PLACEHOLDER の形式になっています。

このチュートリアルを完了するには、次のいずれかの操作を行います。

1. PWA Kit バージョン 3.x で作成されたプロジェクトを使用します。

   または

2. プロジェクトがない場合は、次のコマンドを実行して PWA Kit プロジェクトを作成します。

   npx @salesforce/pwa-kit-create-app@latest ——outputDir $PATH/TO/NEW/LOCAL/PROJECT

• overrides/app の下に components というフォルダーを作成します。
• components フォルダーに、footer というフォルダーを作成します。
• footer フォルダーに、index.jsx というファイルを作成します。

新しいフォルダーとファイルの構造は次のとおりです。

次のコードを overrides/components/footer/index.jsx に追加します。

• npm start を実行します。
• http://localhost:3000 に移動します。

• プロジェクトの必須ファイルが overrides フォルダーに含まれていることを確認します。
• バンドルをデプロイします。

• 拡張テンプレート
• Retail React App