> ## Documentation Index
> Fetch the complete documentation index at: https://docs.base44.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Editando o código do seu app

> Assuma o controle total do seu app editando o código e pré-visualizando alterações lado a lado no editor.

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.

<Frame caption="Editando o código do seu app e pré-visualizando instantaneamente as alterações">
  <img src="https://mintcdn.com/base44/HSXlsKQvBkYN-DXR/codeer.png?fit=max&auto=format&n=HSXlsKQvBkYN-DXR&q=85&s=845561c033d8e1acadf501429ed5efbb" alt="Editando o código do seu app e pré-visualizando instantaneamente as alterações" width="1915" height="958" data-path="codeer.png" />
</Frame>

***

## 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**.

<Frame caption="Acessando o código do seu app no Base44">
  <img src="https://mintcdn.com/base44/hrVkAqsRzoi9NYCy/images/codepanel.png?fit=max&auto=format&n=hrVkAqsRzoi9NYCy&q=85&s=26096b47df03c978b9a81a823cd179fd" alt="Acessando o código do seu app no Base44" width="1912" height="955" data-path="images/codepanel.png" />
</Frame>

***

## 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.

<Frame caption="Tela dividida para pré-visualizar alterações de código">
  <img src="https://mintcdn.com/base44/Kb6mZTf4mNXOF_gr/images/split.png?fit=max&auto=format&n=Kb6mZTf4mNXOF_gr&q=85&s=3b0556cac2c3cac886d1332d10521dc4" alt="Tela dividida para pré-visualizar alterações de código" width="1908" height="390" data-path="images/split.png" />
</Frame>

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.

<Warning>
  **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.
</Warning>

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.

<Frame caption="Visualizando e navegando pelos arquivos de código do seu app">
  <img src="https://mintcdn.com/base44/hrVkAqsRzoi9NYCy/images/codefiles.png?fit=max&auto=format&n=hrVkAqsRzoi9NYCy&q=85&s=c47137a59a24c8125eb2095eff963770" alt="Visualizando e navegando pelos arquivos de código do seu app" width="971" height="791" data-path="images/codefiles.png" />
</Frame>

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.

<AccordionGroup>
  <Accordion title="Posso editar todas as partes do código do meu 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.
  </Accordion>

  <Accordion title="Preciso usar a tela dividida para editar o código?">
    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.
  </Accordion>

  <Accordion title="O que acontece se eu clicar em Discard?">
    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.
  </Accordion>

  <Accordion title="Preciso ser um desenvolvedor experiente para editar o código?">
    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.
  </Accordion>
</AccordionGroup>

<Note>Esta página foi traduzida usando IA. Para informações mais precisas e atualizadas, consulte a [versão em inglês](/). </Note>
