English 中文 العربية 日本語 Português

Vite Setup Configuração de projeto com Vite

Última atualização: 2026-11-03

Vite Setup Configuração de projeto com Vite

O Vite é o gerador de projetos React mais usado hoje: um comando cria um ambiente de desenvolvimento com hot reload, e o tempo de inicialização e de build é bem mais rápido do que no antigo CRA. Tanto para aprender quanto para publicar um produto novo, começar por ele é o caminho recomendado. O projeto gerado é um pacote npm comum, então todas as ferramentas do ecossistema funcionam sem configuração extra.

GrupoConceitos Básicos
TipoFerramenta
DesdePadrão na era React 18 / Vite 5

ℹ️ 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

npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev   # Inicia o servidor de desenvolvimento em http://localhost:5173

⚙️ Parâmetros

--template reactSeleciona o template React (JavaScript); use react-ts para um projeto com TypeScript.

Retorna：Sem valor de retorno — isto é uma ferramenta de scaffolding: o que ela produz é um diretório de projeto local e um conjunto de scripts npm.

▶ Exemplo

O exemplo roda direto: renderiza automaticamente ao expandir e edições valem na hora.

Saída：

Um cartão em monoespaçado lista quatro linhas no formato "nome do arquivo — descrição"; clicar em qualquer linha destaca a linha, e a linha de baixo mostra "Currently selected: xxx", imitando a navegação pelo diretório de um projeto Vite e a responsabilidade de cada arquivo.
▶ Experimente

💡 Pontos-chave

ℹ️ Informação O create-react-app não é mais mantido e não deve ser escolhido para projetos novos; o Vite é o padrão da comunidade hoje.
💡 Dica O npm run dev serve na porta 5173 por padrão; mude server.port no vite.config.js para usar outra.
⚠️ Aviso O Vite exige Node.js 18 ou mais recente — rode node -v depois de instalar para confirmar.
entry-file devtools component jsx
Mais casos em breve.

📚 Tutoriais Relacionados

Configurando o ambiente e o JSX
Lição 2: da instalação do Node até rodar o seu primeiro projeto Vite + React.

❓ Perguntas Frequentes

P Ainda posso usar o create-react-app?
R Ele roda, mas não é mais recomendado: o time oficial não o mantém ativamente, ele inicializa devagar e depende de pacotes desatualizados. Use Vite (ou um framework como o Next.js) em projetos novos.
P Como crio um projeto React com Vite?
R Rode npm create vite@latest my-project -- --template react, entre na pasta, rode npm install e depois npm run dev.
P A página não abre depois do npm run dev — e agora?
R Leia primeiro o erro no terminal: porta ocupada significa trocar a porta, dependências faltando significa rodar npm install e versão do Node abaixo de 18 significa atualizar.
Web-Tutorial.com

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

100%