Section

As Sections são componentes de UI criados com Preact que pode receber props configuradas por usuários no Admin da deco.cx. As implementações locais de Section vivem na pasta sections/ no código do Site, porém é possível Instalar novas apps.

Alguns exemplos de Section para uma loja de ecomemerce seriam:

• ProductShelf.tsx: exibe uma prateleira com imagem, título e preço.
• Header.tsx: exibe o cabeçalho padrão da loja, contendo logotipo, categorias de menu e links para carrinho e login.
• Banner.tsx: exibe imagem, texto e alguns Call to action para campanha ou departamento específico.

​

Interatividade

Observe que as seções são executadas somente no lado do servidor, portanto, gerenciamento de estado e ciclo de vida como useState, useEffect e callbacks como onClick, onInput não irão funcionar. Para que funcionem, você precisará usar Islands.

No Admin da deco.cx é possível interagir com as Sections em dois locais:

• Library: permite que desenvolvedores configurem as propriedades das Section e visualizaem automaticamente a UI renderizada. (Funciona semelhante ao Storybook)
• Pages: Permite que a Section seja adicionada à Pages no Site, sendo também configuráveis por lá.

​

Leitura adicional

• Tutorial: Codificando uma nova seção
• Desenvolvendo: Seções personalizáveis