Como utilizar Vite para criar aplicações React com TypeScript

Ele se destaca por sua velocidade e eficiência quando comparado ao Webpack, especialmente em projetos maiores. Conforme os projetos JavaScript cresceram em complexidade, o Webpack, embora poderoso, passou a apresentar um desempenho inferior ao recarregar alterações e iniciar o servidor de desenvolvimento.

Isso resultou em experiências frustrantes para as pessoas desenvolvedoras e tempos de construção mais longos.  

Por muito tempo, o Create React App foi uma das formas mais comuns de iniciar projetos React. No entanto, em fevereiro de 2025, o React anunciou oficialmente sua depreciação para novos projetos.

A recomendação passou a ser o uso de frameworks quando o projeto precisa de recursos de produção, como roteamento, busca de dados, renderização no servidor ou geração estática. Quando fizer sentido criar uma aplicação do zero, ferramentas de build como o Vite são uma alternativa recomendada. 

Por isso, a escolha do Vite deve considerar as necessidades do projeto, a familiaridade da equipe com a ferramenta e os requisitos de desempenho. 

Dito isso, vamos colocar a mão na massa? 

Como instalar o Vite e criar projeto React Vite TypeScript" 

Para começar, abra um terminal em um diretório de sua preferência e siga os seguintes passos: 

• 1. Certifique-se de ter o Node.js instalado em uma versão compatível com o Vite. Atualmente, o Vite requer Node.js 20.19+ ou 22.12+.  
• 2. Crie uma nova aplicação React com TypeScript usando o Vite: 

Esse comando usará a versão mais recente do Vite em seu projeto. 

• 3. Responda as perguntas feitas pelo Vite, como o nome da aplicação, o framework e se deseja usar JavaScript ou Typescript na sua aplicação: 

No exemplo acima, chamei minha aplicação de `minha-aplicacao-react` e estou usando o React com o TypeScript. 

• 4. Agora, o Vite dá as instruções para que você termine de instalar as dependências do seu projeto. Ele pede para que você vá até a pasta com o nome do seu projeto, instale as dependências e depois suba a sua aplicação no navegador, respectivamente: 

• 5. Ao rodar o comando “npm run dev”, deverá aparecer no seu terminal as seguintes linhas: 

Essas linhas informam a porta onde sua aplicação está rodando e te dá dicas para mais opções de comandos. 

• 6. Agora, se você clicar na URL local do passo anterior, deverá ser capaz de ver uma janela no seu navegador como esta:

Um detalhe importante aqui é que o Vite usa HMR para aplicar alterações rapidamente durante o desenvolvimento. Em projetos React, o plugin oficial @vitejs/plugin-react integra o React Fast Refresh, permitindo atualizar componentes preservando o estado sempre que possível. 

Mas antes de você modificar o código da aplicação, que tal entender melhor essa estrutura de pastas que o Vite cria pra gente? Vamos lá? 

Estrutura de Pastas 

A estrutura de pastas criada com o Vite e TypeScript, para uma aplicação React, será semelhante a isto: 

Confira o que significa cada uma dessas pastas e arquivos: 

1. node_modules/: essa pasta contém todas as dependências do projeto que são instaladas pelo “npm” ou “Yarn”. Você geralmente não precisa se preocupar com o conteúdo aqui, pois o gerenciador de pacotes cuida disso; 
2. public/: a pasta `public` é usada para arquivos que precisam ser servidos diretamente pela raiz, como /robots.txt, /favicon.ico ou arquivos que devem manter o nome original. Para imagens e assets usados por componentes, geralmente prefira importá-los a partir de src/, pois o Vite pode processar, versionar e otimizar esses arquivos no build. 
3. src/: essa é a pasta principal do código-fonte da sua aplicação. Aqui estão os arquivos que você irá criar e editar enquanto desenvolve a aplicação: 

1. assets/: essa pasta é usada para armazenar arquivos de recursos estáticos, como imagens, fontes, listas, etc., que serão importados no código; 
2. App.css: esse é um arquivo de estilo CSS que contém estilos específicos para o componente `App`; 
3. App.tsx: o arquivo `App.tsx` é o componente principal da sua aplicação React. É onde você define a estrutura e o comportamento geral da sua aplicação; 
4. index.css: esse é o arquivo de estilos globais da sua aplicação; 
5. main.tsx: esse é o ponto de entrada da sua aplicação React. Ele renderiza o componente App na página HTML; 
6. vite-env.d.ts: esse arquivo é usado para declarações de tipos globais que podem ser necessárias no seu projeto. 
7. .eslintrc.cjs: esse é o arquivo de configuração do ESLint, que é uma ferramenta para ajudar a manter um código JavaScript/TypeScript limpo e consistente. Ele define as regras e configurações para a análise estática do código; 
8. .gitignore: esse arquivo lista os arquivos e pastas que você deseja que o Git ignore ao controlar as mudanças do projeto. Isso geralmente inclui arquivos gerados automaticamente, como `node_modules`, bem como arquivos de compilação e cache; 
9. index.html: é o arquivo HTML principal da sua aplicação. É aqui que o ponto de entrada do React é incorporado e onde você pode incluir metadados, links para estilos e outros recursos; 
10. package-lock.json: esse arquivo é gerado automaticamente pelo “npm” e registra as versões exatas de todas as dependências do seu projeto. Ele é usado para garantir que as mesmas versões das dependências sejam instaladas em diferentes máquinas; 
11. package.json: esse arquivo contém informações sobre o projeto, como nome, versão, dependências e scripts personalizados. Você pode usá-lo para gerenciar dependências e definir scripts para tarefas comuns de desenvolvimento; 
12. README.md: é um arquivo de documentação para o seu projeto. É onde você pode fornecer informações sobre como instalar, configurar e usar a aplicação; 
13. tsconfig.json e tsconfig.node.json: são os arquivos de configuração do TypeScript que definem as opções de compilação para o seu código. O `tsconfig.json` é usado para o código da aplicação, enquanto o `tsconfig.node.json` pode ser usado para configurar o TypeScript em ambientes Node.js; 
14. vite.config.ts: esse arquivo é usado para configurar o Vite. Ele pode conter configurações relacionadas a plugins, roteamento, aliases de importação, entre outras coisas. 

Para melhorar ainda mais seu processo de aprendizagem, sugiro que visualize um projeto React criado com Vite. Recomendo que você utilize uma IDE para repetir os passos de criação da aplicação, para que assim possa se familiarizar com os arquivos e ter um projeto salvo em sua máquina. 

Agora que vimos como criar uma aplicação React com TypeScript usando o Vite, vamos analisar por que ele se destaca em relação a outros métodos, além de conferir suas principais vantagens e algumas limitações. 

Por que criar uma aplicação React com Vite 

O Create React App (CRA) foi oficialmente descontinuado, tornando o Vite a principal recomendação para iniciar projetos SPA (Single Page Application) do zero. Escolher o Vite traz vantagens técnicas significativas, especialmente após o lançamento do Vite 8: 

• Desempenho Revolucionário: O Vite 8 substituiu completamente o antigo modelo dual (esbuild + Rollup) pelo Rolldown como seu bundler unificado. Essa mudança arquitetural nativa resulta em builds de 10 a 30 vezes mais rápidos, conforme detalhado no guia de migração e novidades do Vite 8. 
• Instalações Mais Leves: O plugin oficial @vitejs/plugin-react (a partir da v6) removeu a dependência do Babel por padrão, adotando o Oxc para transformações de código. Isso reduz drasticamente o tamanho da instalação e acelera o tempo de setup, como aponta a documentação do plugin React do Vite. 
• Recarregamento Instantâneo: O suporte nativo a Fast Refresh garante que as alterações no código sejam refletidas no navegador instantaneamente sem perder o estado dos componentes, um comportamento explicado no guia de funcionalidades do Vite. 
• Configuração Simplificada: Menos burocracia com arquivos de configuração intuitivos em JavaScript ou TypeScript, fáceis de estender, conforme a documentação de configuração do Vite. 

Nota importante: Embora o Vite seja excelente para criar projetos do zero e focar no lado do cliente (client-side), para aplicações em produção complexas, frameworks baseados em servidor como o Next.js são os mais recomendados e utilizados atualmente pelo mercado, conforme orienta a página oficial sobre criação de novos projetos na documentação do React. 

Pontos de atenção ao usar Vite 

Embora seja extremamente eficiente, o Vite exige atenção em cenários específicos: 

• Suporte a Navegadores Antigos: Por ser baseado em Módulos ESM nativos, o suporte a ambientes legados exige o uso do plugin oficial @vitejs/plugin-legacy, documentado na seção de builds para produção do Vite. 
• Compatibilidade de Ecossistema: Algumas bibliotecas mais antigas do ecossistema JavaScript que não suportam ESM podem exigir etapas de pré-construção, processo detalhado no guia de pré-bundling de dependências do Vite. 

Como o Vite lida com bibliotecas externas 

Diferente do antigo modelo do CRA (baseado em Webpack), que agrupava todas as dependências em pacotes pesados de forma estática, o Vite adota uma abordagem moderna baseada em ESM (ECMAScript Modules). 

As dependências instaladas via NPM são pré-bundladas pelo Rolldown para otimizar o carregamento e, durante o desenvolvimento, os módulos são servidos sob demanda pelo navegador.

Isso garante que apenas o código efetivamente utilizado em cada tela seja processado, minimizando o tempo de inicialização do ambiente de desenvolvimento e reduzindo o tamanho final do pacote em produção, conforme explicado na arquitetura conceitual do Vite. 

Como aprender mais sobre o tema

Se quiser aprender mais sobre Vite React e aprofundar seu conhecimento em como criar projetos React com Vite, confira os cursos: React: estilize componentes com Styled Components e manipule arquivos estáticos e React: migrando para o Vite e implementando autenticação baseada em Token.

Assim, você estará preparado para trabalhar com as melhores práticas e ferramentas atuais do ecossistema React JS."

Vale a pena criar projeto React com Vite? Próximos passos

E aí, já conhecia o Vite? Sabia que dava para utilizar ele para criar aplicações React muito mais leves, de fácil configuração e bem mais rápidas? 

Neste artigo, você aprendeu como utilizar o Vite para criar uma aplicação React com TypeScript do zero, como também aprendeu sobre as vantagens do Vite em relação a bundlers populares como o webpack.

Você fez via CLI todos os passos para criar uma aplicação React, compreendeu a estrutura de pastas e o significado de cada arquivo e subiu sua aplicação em um navegador através do comando `npm run dev`. 

Até a próxima!