Section

Referência do runtime Fresh / Deno descontinuado. Estas instruções são do runtime original do Blocks. O Site Editor do Studio está documentado separadamente; adotá-lo e migrar o framework são mudanças independentes. Os exemplos e as capturas de tela mantêm o contexto do runtime original.

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