Programar secções em React no editor de código

Na Feitora podes programar as tuas próprias secções de site em React, como um tema do Shopify mas com componentes modernos. Cada secção tem um esquema com os campos que o lojista edita no editor visual (textos, imagens, botões, listas, coleções…) e pode ter zonas livres onde ele larga o conteúdo que quiser. O código é guardado na loja, compilado no servidor e só fica público quando publicas.

Abrir o editor de código

No menu lateral abre Conteúdo → Código (também em Ctrl K, escrevendo "código", ou em Definições → Loja online). O editor ocupa o ecrã inteiro:

• à esquerda, a árvore de ficheiros;

• ao centro, o editor com abas dos ficheiros abertos;

• à direita, a Pré-visualização, os Problemas, as Secções detetadas e o histórico de Builds.

Se a loja ainda não tem código, carrega em Criar ficheiros de exemplo para começar com uma secção, um CSS e o feitora.json.

Como se organizam os ficheiros

1. 1
   Passo 1:

   Para criar um ficheiro carrega no ícone Novo ficheiro no topo da árvore (ou no de uma pasta).

2. 2
   Passo 2:

   Escolhe o modelo — Secção, Componente, CSS, Funções (JS) ou Ficheiro vazio — e escreve o nome. Nas secções usa minúsculas, números e "-" (ex.: hero-video).

3. 3
   Passo 3:

   No menu ⋯ de cada ficheiro tens Renomear ou mover, Duplicar e Apagar. Mudar o nome de uma secção muda o tipo: as páginas que a usavam deixam de a mostrar.

Escrever e guardar

O editor realça JSX, JavaScript, CSS e JSON, indenta sozinho e completa o que escreves: ao escolher uma função do SDK (useProducts, Img, addToCart…) junta-a ao import de @feitora/site automaticamente. Dentro de type: '…' sugere os tipos de campo do esquema.

• Ctrl S guarda o ficheiro aberto; Guardar tudo guarda todos.

• Um ponto laranja na aba ou na árvore indica alterações por guardar.

Compilar e corrigir erros

1. 1
   Passo 1:

   Carrega em Compilar (ou Ctrl B). Os ficheiros por guardar são guardados antes.

2. 2
   Passo 2:

   Se houver erros, abre o separador Problemas. Cada erro diz o ficheiro, a linha e a coluna — carrega nele para ir diretamente a essa linha. O erro também aparece sublinhado no código.

3. 3
   Passo 3:

   Erros comuns: importar um pacote que não é permitido (só react, react-dom, @feitora/site e lucide-react), esquecer o export default ou usar variáveis dentro do schema (tem de ser um objeto escrito à mão).

Pré-visualizar e publicar

1. 1
   Passo 1:

   Depois de compilar sem erros, o separador Pré-visualização mostra o site real com o teu rascunho, em computador, tablet ou telemóvel. Só quem tem o link o vê.

2. 2
   Passo 2:

   O separador Secções mostra cada secção detetada com os campos, as zonas livres e os valores por omissão do esquema.

3. 3
   Passo 3:

   Carrega em Publicar e confirma. A partir daí as secções aparecem no editor visual em Adicionar secção.

4. 4
   Passo 4:

   Em Builds podes Repor um build anterior (voltar atrás) ou Despublicar o código.

O guia completo para programadores (esquema, SDK, limites e segurança) está em docs/programar-na-feitora.md no repositório da Feitora.