Componentes especiales
Esta guía asume que ya está familiarizado con el funcionamiento del enrutamiento en un escaparate de PWA Kit. Para obtener más información, consulte nuestra guía sobre Enrutamiento.
El SDK de React de PWA Kit incluye los siguientes componentes especiales: AppConfig, App, Error y Document.
La implementación predeterminada de cada componente especial puede ser reemplazada con su propia versión personalizada para que pueda configurar y personalizar el comportamiento de su escaparate en varias páginas.
Veamos cada componente especial por separado:
El componente AppConfig se coloca cerca de la parte superior de la jerarquía de componentes en su aplicación React. Desde esta posición, le permite insertar código para configurar y apoyar las características de toda la aplicación, como la gestión de estado o la tematización de componentes. En la Retail React App, el componente ChakraProvider se inserta en AppConfig para que los valores del tema (para los colores, el espaciado, etc.) estén disponibles para todos los componentes de la IU de Chakra.
El componente AppConfig también permite ampliar el conjunto de argumentos que se pasan a todos los componentes mejorados por routeComponent a través de la función getProps. Para añadir estos argumentos, defina una función llamada extraGetPropsArgs como propiedad del componente AppConfig.
La Retail React App utiliza la función extraGetPropsArgs para dar a todos los componentes mejorados por routeComponent acceso a un objeto para interactuar con Salesforce Commerce API:
La versión del componente AppConfig del SDK de React del PWA Kit no hace mucho, a menos que lo reemplace. Para reemplazar una versión de SDK de AppConfig, defina un archivo en app/components/_app-config/index.jsx. Un proyecto de PWA Kit recién generado ya incluye este archivo para empezar.
El componente App es un derivado del componente AppConfig. Su propósito principal es incluir cualquier componente para el diseño y la IU que persiste a través de la aplicación React, como el encabezado, el pie de página y la barra lateral.
El componente App también se ve mejorado con la función routeComponent. Si define una función getProps como propiedad del componente App, esta recibe un llamado cuando se renderiza cualquier componente del grupo routes. Utilícelo para cualquier lógica que quiera ejecutar en cada página.
Al igual que AppConfig, existe una versión predeterminada del componente App en el SDK de React del PWA Kit que se recomienda reemplazar. Para reemplazar una versión de SDK de App, defina un archivo en app/components/_app/index.jsx. Un proyecto de PWA Kit recién generado ya incluye este archivo para empezar.
Algunas de las funciones que se implementan en App para un proyecto recién generado: el seguimiento analítico, la detección fuera de línea y el componente SkipNavLink de accesibilidad.
El componente Error se renderiza en lugar del componente App en cualquiera de las siguientes condiciones:
- El usuario hace una solicitud a una ruta que no se encuentra en el grupo
routes. - Un componente del grupo
routesda error en esta funcióngetProps. - Un componente del grupo
routesda error durante la renderización.
Cuando se devuelve el componente Error, también se incluye un estado HTTP 404 en el encabezado de respuesta.
Al igual que el resto de componentes especiales, el SDK de React del PWA Kit incluye una versión predeterminada del componente Error, y se recomienda reemplazarlo. Para reemplazar una versión de SDK de Error, defina un archivo en app/components/_error/index.jsx. Un proyecto de PWA Kit recién generado ya incluye este archivo para empezar.
Al reemplazar el componente Error, puede hacer cosas como personalizar la página de error para su marca, añadir redireccionamientos y hacer un seguimiento del error como un evento analítico.
El componente Document define el HTML que rodea a la aplicación, como las etiquetas <html>, <head> y <body>.
Al igual que el resto de componentes especiales, el SDK de React del PWA Kit incluye una versión predeterminada del componente Document que se puede reemplazar. Pero, en este caso, no recomendamos reemplazarlo. Pero si necesita un control detallado de su aplicación, puede reemplazar Document definiendo un archivo en app/components/_document/index.jsx. Un proyecto de PWA Kit recién generado no incluye este archivo.
En lugar de reemplazar el componente Document, recomendamos usar la biblioteca Helmet de React para modificar las etiquetas de HTML en Document, como <head>.