Componentes especiais

Este guia considera que você sabe como encaminhar trabalhos em uma loja (virtual) criada com o PWA Kit. Para saber mais, veja o guia Roteamento.

O PWA Kit React SDK inclui os seguintes componentes especiais: AppConfig, App, Error e Document.

A implementação padrão de cada componente especial pode ser substituída por sua própria versão personalizada para que você possa configurar e personalizar o comportamento de sua loja (virtual) em várias páginas.

Vejamos cada componente especial separadamente:

O componente AppConfig é posicionado próximo ao topo da hierarquia de componentes em seu React App. Dessa posição, ele permite que você insira código para configurar e dar suporte a recursos do aplicativo, como gerenciamento de estado ou a temática do componente. No Retail React App, o componente ChakraProvider é inserido no AppConfig para fazer com que os valores de temas (para cores, espaçamento e assim por diante) estejam disponíveis para todos os componentes do Chakra UI.

O componente AppConfig também permite que você amplie o conjunto de argumentos que é enviado a todos os componentes que são melhorados pelo routeComponent via a função getProps. Para adicionar esses argumentos, defina uma função chamada extraGetPropsArgs como uma propriedade do componente AppConfig.

O Retail React App usa a função extraGetPropsArgs para dar a todos os componentes aprimorados pelo routeComponent acesso a um objeto para fins de interação com Salesforce Commerce API:

A versão do componente AppConfig do PWA Kit React SDK não desempenha muitas funções, a menos que você a substitua. Para substituir a versão SDK do AppConfig, defina um arquivo em app/components/_app-config/index.jsx. Um projeto do PWA Kit recentemente gerado já inclui esse arquivo, para ajudá-lo a começar.

O componente App é um elemento secundário do componente AppConfig. O propósito dele é incluir qualquer componente no layout e na IU que persista em todo o React App, como cabeçalho, rodapé e barra lateral.

O componente App também é melhorado pela função routeComponent. Se você define uma função getProps como uma propriedade do componente App, ela é chamada quando qualquer componente do array routes é renderizado. Use-a para qualquer lógica que queira executar em cada página.

Como o AppConfig, existe uma versão padrão do componente App no PWA Kit React SDK, e incentivamos você a substituí-la. Para substituir a versão SDK do App, defina um arquivo em app/components/_app/index.jsx. Um projeto do PWA Kit recentemente gerado já inclui esse arquivo, para ajudá-lo a começar.

Alguns dos recursos que são implementados no App para um projeto recentemente gerado incluem: acompanhamento analítico, detecção offline e o componente SkipNavLink para acessibilidade.

O componente Error é renderizado no lugar do componente App em qualquer uma as condições a seguir:

  • O usuário faz uma solicitação de caminho que não é encontrado no array routes.
  • Um componente do array routes emite um erro em sua função getProps.
  • Um componente do array routes emite um erro durante a renderização.

Quando o componente Error é retornado, um estado HTTP 404 também é incluído no cabeçalho de resposta.

Assim como outros componentes especiais, o PWA Kit React SDK inclui uma versão padrão do componente Error, que pode ser substituída. Para substituir a versão SDK do Error, defina um arquivo em app/components/_error/index.jsx. Um projeto do PWA Kit recentemente gerado já inclui esse arquivo, para ajudá-lo a começar.

Ao substituir o componente Error, você pode, por exemplo, personalizar a página de erro para sua marca, adicionar redirecionamentos e rastrear o erro como um evento analítico.

O componente Document define o HTML em torno do seu aplicativo, como as tags <html>, <head> e <body>.

Assim como outros componentes especiais, o PWA Kit React SDK inclui uma versão padrão do componente Document, que pode ser substituída. Mas, nesse caso, não recomendamos que você a substitua. Mas se você precisa de um maior controle sobre seu aplicativo, você pode substituir o componente Document definindo um arquivo em app/components/_document/index.jsx. Um projeto do PWA Kit recentemente gerado não inclui esse arquivo.

Em vez de substituir o componente Document, recomendamos usar a biblioteca do React Helmet para modificar as tags HTML em Document, como <head>.