Vite é a ferramenta mais recente para criar projetos em React do zero, e o seu crescimento tem sido enorme graças à velocidade e à experiência de desenvolvimento que oferece. Se procuras uma alternativa moderna ao Create React App ou ao Webpack manual, aqui descobres como configurar o teu primeiro projeto React com Vite e que ficheiros realmente importam.

Por que Vite se pronuncia vit e não bait?

A primeira coisa que precisas saber é que Vite é uma palavra francesa, não inglesa, e isso está logo no ReadMe do repositório oficial. Foi criado por Evan You, o mesmo autor de Vue.js, mas a ferramenta foi pensada para funcionar com qualquer framework, incluindo React [00:18].

¿Que é o Vite? É uma ferramenta de build e servidor de desenvolvimento criada por Evan You, focada em velocidade e na experiência do programador, compatível com React, Vue e outros frameworks.

A confusão de pronúncia é comum, mas vale a pena corrigi-la antes de a usares em entrevistas ou apresentações públicas.

Como crio um projeto React com Vite desde zero?

O comando oficial mudou ligeiramente em relação a outras ferramentas que talvez já tenhas usado. Em vez de create-react-app, usas o CLI oficial do Vite com npm create [01:45].

O comando completo é:

bash npm create vite@latest vitetest -- --template react

Atenção a um detalhe importante: a sintaxe depende da tua versão de npm. Se estás na versão 7 ou superior, o comando funciona tal como está acima. Se tens uma versão anterior, terás de adaptar a sintaxe, e a recomendação é simplesmente atualizares o npm sempre que possível [02:30].

• Indicas o nome da pasta: nesta aula é vitetest.
• Especificas o template com --template react.
• Confirmas a instalação da última versão quando o CLI te pergunta.

Depois de instalado, entras na pasta e corres npm install para baixar as dependências. A velocidade do Vite nesta fase é uma das suas marcas registadas.

Que ficheiros gera o Vite num projeto React?

Ao abrires o projeto no Visual Studio Code vais encontrar uma estrutura diferente da que conheces de outras ferramentas. No package.json aparece o Vite nas dependências de desenvolvimento, junto com o React e o React DOM nas dependências principais [04:20].

Onde está a configuração principal?

O ficheiro vite.config.js é onde manipulas o comportamento do Vite. Por defeito vem com o plugin oficial do React, que é o que permite que tudo funcione sem fricção dentro deste ecossistema.

Por que existem dois SVG em pastas diferentes?

Uma das curiosidades do template é que vais ver um SVG em public e outro em src/assets. Isto é uma demonstração intencional: o Vite mostra todas as formas em que podes lidar com ficheiros estáticos, seja referenciando-os diretamente desde o HTML ou importando-os como módulos dentro dos teus componentes React [05:15].

O index.html também muda de lugar: fica na raiz do projeto, não dentro de public como acontece em outras ferramentas.

Devo usar a extensão .jsx ou .js nos meus ficheiros?

Aqui há uma diferença que pode confundir-te se vens de outros setups. No Vite, o ficheiro de entrada chama-se Main.jsx, com extensão .jsx explícita, e não .js como talvez estejas habituado [06:00].

Quando devo usar .jsx em vez de .js? Quando configuras manualmente um bundler como o Webpack ou usas o Vite, a recomendação é usar .jsx para qualquer ficheiro que contenha sintaxe JSX. Ferramentas como Next.js e Create React App são mais flexíveis e aceitam .js, mas o Vite recomenda explicitamente .jsx.

Isto não é um capricho: é uma forma de o bundler identificar de imediato que ficheiros precisam do transform especial para JSX, sem ter de configurar regras adicionais.

Dentro do projeto podes importar SVG como src de uma imagem, criar estados com useState, e usar tudo o que já sabes de React exatamente da mesma forma. A funcionalidade base é idêntica, o que muda é o motor por baixo do capô.

Que ferramenta escolher para criar projetos React?

Ao longo destas aulas viste as três opções mais usadas para arrancar com React: Create React App, Next.js e Vite. Cada uma resolve necessidades diferentes:

1. Create React App: o clássico, simples mas com manutenção limitada nos últimos tempos.
2. Next.js: ideal quando precisas de server-side rendering, rotas e otimizações de produção.
3. Vite: a opção mais rápida em desenvolvimento e com configuração mínima para single page applications.

Também podes saltar todas estas ferramentas e configurar manualmente o teu projeto com Webpack ou outros bundlers mais recentes, alguns inclusive escritos em C++ para ganhar velocidade. Esta abordagem é mais tediosa, mas oferece flexibilidade total e é uma competência valorizada por muitas empresas durante entrevistas técnicas de React.

Os fundamentos de React que aprendeste mantêm-se válidos independentemente da ferramenta. Mesmo que saiam as versões 19, 20 ou 50, a base do que constróis hoje vai continuar a funcionar com pequenas migrações.

Qual destas ferramentas vais usar no teu próximo projeto? Conta nos comentários como foi a tua experiência ao criar o primeiro projeto com Vite.