Composants spéciaux

Ce guide suppose que vous connaissez le fonctionnement du routage dans une boutique PWA Kit. Pour en savoir plus, consultez notre guide sur le Routage.

Le SDK React de PWA Kit comprend les composants spéciaux suivants : AppConfig, App, Error et Document.

L'implémentation par défaut de chaque composant spécial peut être remplacée par votre propre version personnalisée. Vous pouvez ainsi configurer et personnaliser le comportement de votre boutique sur plusieurs pages.

Examinons chaque composant spécial séparément :

Le composant AppConfig se place près du sommet de la hiérarchie des composants dans votre application React. De cet emplacement, il vous permet d'insérer du code pour configurer et prendre en charge des fonctionnalités à l'échelle de l'application, telles que la gestion des états ou la thématisation des composants. Dans Retail React App, le composant ChakraProvider est inséré dans AppConfig pour mettre les valeurs du thème (pour les couleurs, l'espacement, etc.) à la disposition de tous les composants Chakra UI.

Le composant AppConfig vous permet également d'étendre l'ensemble des arguments transmis à tous les composants améliorés par routeComponent via la fonction getProps. Pour ajouter ces arguments, définissez une fonction appelée extraGetPropsArgs comme une propriété du composant AppConfig.

Retail React App utilise la fonction extraGetPropsArgs pour donner accès à tous les composants améliorés par routeComponent à un objet permettant d'interagir avec Salesforce Commerce API :

La version du composant AppConfig du SDK React de PWA Kit ne fait pas grand-chose, à moins de le remplacer. Pour remplacer la version SDK d'AppConfig, définissez un fichier dans app/components/_app-config/index.jsx. Un projet PWA Kit récemment généré comprend déjà ce fichier pour vous permettre de commencer.

Le composant App est un enfant du composant AppConfig. Son objectif principal est d'inclure tous les composants de mise en page et d'interface utilisateur qui persistent dans votre application React, tels que l'en-tête, le pied de page et la barre latérale.

Le composant App est également amélioré par la fonction routeComponent. Si vous définissez une fonction getProps comme une propriété du composant App, elle est appelée lors du rendu de chaque composant du tableau routes. Utilisez-la si vous souhaitez exécuter une logique sur toutes les pages.

Comme le composant AppConfig, une version par défaut du composant App existe dans le SDK React de PWA Kit, et vous êtes encouragé à la remplacer. Pour remplacer la version SDK d'App, définissez un fichier dans app/components/_app/index.jsx. Un projet PWA Kit récemment généré comprend déjà ce fichier pour vous permettre de commencer.

Parmi les fonctionnalités implémentées dans App pour un projet récemment généré, citons : le suivi analytique, la détection hors ligne et le composant SkipNavLink pour l'accessibilité.

Le composant Error est rendu à la place du composant App dans l'une des conditions suivantes :

  • L'utilisateur lance une request pour un chemin qui n'est pas détecté dans le tableau routes.
  • Un composant du tableau routes lève une erreur dans sa fonction getProps.
  • Un composant du tableau routes lève une erreur lors du rendu.

Si le composant Error est renvoyé, un état HTTP 404 est également inclus dans l'en-tête de réponse.

Comme pour les autres composants spéciaux, le SDK React de PWA Kit comprend une version par défaut du composant Error, et vous êtes encouragé à la remplacer. Pour remplacer la version SDK d'Error, définissez un fichier dans app/components/_error/index.jsx. Un projet PWA Kit récemment généré comprend déjà ce fichier pour vous permettre de commencer.

En remplaçant le composant Error, vous pouvez par exemple personnaliser la page d'erreur pour votre marque, ajouter des redirections et suivre l'erreur comme un événement sur le plan analytique.

Le composant Document définit le HTML qui entoure votre application, comme les balises <html>, <head> et <body>.

Comme les autres composants spéciaux, le SDK React de PWA Kit comprend une version par défaut du composant Document qui peut être remplacée. Mais, dans ce cas, nous ne vous recommandons pas de le faire. Si toutefois vous avez besoin d'un contrôle plus fin de votre application, vous pouvez remplacer Document en définissant un fichier dans app/components/_document/index.jsx. Un projet PWA Kit généré récemment n'inclut pas ce fichier.

Plutôt que de remplacer le composant Document, nous recommandons d'utiliser la bibliothèque React Helmet pour modifier les balises HTML dans Document, comme <head>.