Entry File Arquivo de entrada
Última atualização: 2026-11-03
Entry File Arquivo de entrada
O arquivo de entrada — normalmente src/main.jsx — é onde um aplicativo React começa: ele monta o componente raiz no nó do DOM declarado no index.html. Você raramente mexe nele no dia a dia, mas entender o fluxo de montagem ajuda a depurar problemas de inicialização como uma página em branco. É também o arquivo que decide qual pipeline de build e quais plugins se aplicam ao aplicativo inteiro.
| Grupo | Conceitos Básicos |
|---|---|
| Tipo | Ferramenta |
| Desde | React 18 (API createRoot) |
ℹ️ Informação O editor transpila JSX para JavaScript e renderiza a UI real na sandbox; os componentes são montados automaticamente — sem render manual.
📝 Sintaxe
// src/main.jsx — o aplicativo começa aqui
import { createRoot } from 'react-dom/client'
import App from './App'
createRoot(document.getElementById('root')).render(<App />)
// ↑ encontra o nó #root no index.html ↑ monta o componente raizRetorna：Sem valor de retorno — este é o arquivo de inicialização do projeto.
▶ Exemplo
O exemplo roda direto: renderiza automaticamente ao expandir e edições valem na hora.
Saída：
Um cartão intitulado "Application startup flow" mostra apenas o passo ① no início; cada clique no botão revela mais uma linha e, depois do quarto passo, o próximo clique recomeça, simulando toda a cadeia pela qual o arquivo de entrada monta o aplicativo.💡 Pontos-chave
⚠️ Aviso Para uma página em branco, verifique duas coisas primeiro: se o #root existe no index.html e se o main.jsx é incluído corretamente pelo index.html.
ℹ️ Informação Desde o React 18 usa-se a API createRoot; a chamada antiga ReactDOM.render pertence à era do React 17.
💡 Dica Uma página deve montar o componente raiz exatamente uma vez; quando vários aplicativos React coexistem, dê a cada um o seu próprio nó de montagem.
🏷️ Mais Conceitos Básicos
💡 Casos Relacionados
Mais casos em breve.
📚 Tutoriais Relacionados
❓ Perguntas Frequentes
P Qual é o arquivo de entrada do React?
R Em um projeto Vite, por padrão, é src/main.jsx (main.tsx no template de TypeScript). O index.html o carrega com uma tag <script> e ele é responsável por montar o componente raiz.
P O que o createRoot faz?
R Ele cria uma raiz do React no nó do DOM informado e devolve uma instância de raiz com um método render; todos os recursos concorrentes do React 18 são habilitados por essa entrada createRoot.
P Como uma página em branco se relaciona com o arquivo de entrada?
R Com muita frequência: um id #root divergente, um script de entrada faltando ou um erro lançado pelo componente raiz produzem uma página em branco. Leia primeiro o erro no console e depois verifique o arquivo de entrada.
