Skip to main content
Você pode editar o código de qualquer parte do seu app Base44 para ajustar layout, conteúdo e comportamento. Isso te dá total flexibilidade para ir além de templates e código gerado por IA para que seu app corresponda exatamente ao que você tem em mente. Ative a tela dividida para ver a pré-visualização ao vivo do seu app ao lado do editor de código e aplique suas alterações sem mudar para uma pré-visualização separada.
Editando o código do seu app e pré-visualizando instantaneamente as alterações

​
Acessando o código do seu app

Abra o editor de código a partir do dashboard do seu app. Lá, você pode ver os arquivos do seu projeto à esquerda e pode pular direto para eles e começar a editar. Para acessar o código do seu app:
  1. Vá para o dashboard do seu app.
  2. Clique em Code.
Acessando o código do seu app no Base44

​
Pré-visualizando alterações com tela dividida

A tela dividida permite trabalhar no editor de código enquanto a pré-visualização do seu app permanece visível ao lado. Você vê como suas edições afetam a página sem sair da visualização de código. Como a pré-visualização está sempre na tela, você não precisa ir e voltar para um modo de pré-visualização separado. Você pode continuar escrevendo código, salvar quando estiver pronto e ver imediatamente como a página fica.
Tela dividida para pré-visualizar alterações de código
Quando você entra na tela dividida, o lado esquerdo mostra o código do arquivo que você está editando e o lado direito mostra a mesma página ou rota em uma pré-visualização ao vivo. Sempre que você faz alterações no código:
  • Clique em Save na parte inferior da tela para aplicar suas alterações e atualizar a pré-visualização com o código mais recente.
  • Clique em Discard na parte inferior da tela se quiser descartar todas as edições não salvas e voltar à última versão salva do arquivo.
Importante: Se você fizer alterações no código do seu app, certifique-se de clicar em Publish para que elas entrem no ar no seu app.
Quando estiver pronto para sair da tela dividida, clique em Exit split.

​
Fazendo alterações nos arquivos de código

O editor de código organiza seu app em pastas e arquivos para que você possa encontrar rapidamente o que deseja alterar. Você pode trabalhar em qualquer arquivo do seu app e fazer alterações incluindo:
  • Editar arquivos de página na pasta Pages.
  • Atualizar componentes como seções hero, grades de funcionalidades, cards ou rodapés.
  • Alterar como seu app se conecta a entidades e APIs.
  • Ajustar classes de layout e estilo para que seções, tipografia e espaçamento fiquem do jeito que você quer.
  • Refatorar a estrutura do seu app renomeando, movendo ou reutilizando componentes.
Visualizando e navegando pelos arquivos de código do seu app
Se você está familiarizado com React, pode importar e reutilizar componentes em várias páginas, atualizar props e hooks para controlar o fluxo de dados e a interatividade e adicionar ou remover seções no JSX para alterar a estrutura de uma página.

​
Perguntas frequentes

Clique em uma pergunta abaixo para saber mais sobre como editar código no seu app.
Sim. Você pode abrir e editar qualquer arquivo de código que aparece no painel de arquivos Code, incluindo páginas, componentes, layouts e auxiliares de entidade. Se uma parte do app é gerada para você, ela ainda aparece como código regular que você pode modificar.
Não. Você pode trabalhar no editor de código em tela cheia se preferir mais espaço. A tela dividida é útil quando você quer ver a pré-visualização ao lado do seu código, mas você pode desligá-la a qualquer momento e reabri-la depois.
Discard remove todas as alterações não salvas no arquivo ativo e restaura a última versão salva. Isso é útil se você tenta algo que não funciona e quer voltar rapidamente. Depois de clicar em Discard, você não pode recuperar o código não salvo dessa sessão.
Você não precisa ser especialista, mas familiaridade básica com React e JSX ajuda. Você pode começar com pequenas mudanças como atualizar texto, trocar componentes ou alterar estilos simples, depois passar para lógica mais avançada conforme ganha confiança.
Esta página foi traduzida usando IA. Para informações mais precisas e atualizadas, consulte a versão em inglês.