Como Usar o Vite e Criar Projetos em React

Aprenda como usar o Vite e configurá-lo para criar projetos em React. Este é um recurso essencial para quem deseja se tornar um desenvolvedor front-end.

Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!

O que você aprende neste vídeo

Resposta rápida: O vídeo monta um projeto React do zero com o Vite: terminal na pasta, npm create vite@latest, escolha do framework e da variante, npm install e npm run dev. O Node.js tem de estar instalado antes, porque os comandos vêm do npm, e o servidor sobe em um endereço local com a página de exemplo já funcionando.

Neste vídeo (17 min):

• 1:00 - O que o Vite é: um servidor de desenvolvimento e a caixa de ferramentas do front-end em um pacote só.
• 2:00 - Por que o Node.js vem antes: todo comando do Vite roda pelo npm.
• 3:00 - Escolher a pasta onde o projeto vai nascer, lembrando que o Vite cria uma subpasta ali dentro.
• 4:00 - Abrir o terminal já apontando para essa pasta, pelo botão direito ou pelo cd.
• 5:00 - Caminho com espaço no nome precisa de aspas, senão o terminal reclama.
• 5:30 - Rodar npm create vite@latest para montar a estrutura do projeto.
• 6:00 - Dar nome ao projeto na primeira pergunta do assistente.
• 7:00 - Escolher o framework na lista: Vanilla para JavaScript puro, React, Vue e outros.
• 8:00 - Escolher a variante JavaScript e conferir a pasta que apareceu no disco.
• 9:00 - Entrar na pasta criada e rodar npm install para baixar as dependências.
• 10:00 - O Vite não é exclusivo do React: quem criou o Vue foi quem criou o Vite.
• 12:00 - Abrir o VS Code já na pasta certa com code . no próprio terminal.
• 13:00 - Subir o servidor com npm run dev e abrir o endereço local que ele imprime.
• 14:00 - A página de exemplo com o contador de cliques, que é a prova de que a base funciona.

Trechos do vídeo:

• O navegador só entende HTML, CSS e JavaScript puros: o Vite é quem traduz o código escrito com React para essa versão simples na hora de executar.
• A base de código que o Vite cria serve para provar que o projeto roda. Nos projetos seguintes ela é apagada e só a estrutura permanece.

Resposta rápida: para usar o Vite, abra o terminal na pasta onde o projeto vai ficar e rode npm create vite@latest. Escolha o framework (React, Vue ou Vanilla) e a variante (JavaScript ou TypeScript), entre na pasta criada e rode npm install e npm run dev para subir o servidor local. O único pré-requisito é ter o Node.js instalado.

JavaScript Impressionador

Como usar JavaScript em qualquer empresa e qualquer área, com exemplos totalmente aplicados à realidade do Mercado de Trabalho, seja para se tornar um Desenvolvedor Front End, Backend, Full Stack ou Mobile.

Começar agora

Como Usar o Vite e Criar Projetos em React

Na aula de hoje, vou te mostrar como usar o Vite e configurá-lo para criar projetos em React!

Ao longo desta aula, vou te mostrar como configurar o Vite no seu computador e utilizá-lo para criar seus projetos front-end, começando por uma página com React.

Esta é uma aula importante, pois além de ensinar sobre essa ferramenta essencial para o front-end, usaremos a página criada em React como base para os projetos das próximas aulas.

Curtiu a ideia? Quer se aprofundar mais no front-end e dominar o Vite e o React? Então vem comigo!

O que é o Vite?

O Vite é uma ferramenta poderosa e moderna para desenvolvimento front-end. Ele funciona como um conjunto de ferramentas e um servidor de desenvolvimento altamente eficiente e rápido para projetos front-end.

O Vite oferece funcionalidades que simplificam a criação de projetos front-end mais elaborados. É amplamente utilizado na construção de projetos em JavaScript e oferece suporte nativo para frameworks como o React.

Em resumo, o Vite proporciona melhor desempenho, simplicidade e flexibilidade para o desenvolvimento de projetos front-end. Você pode acessar a página oficial do Vite aqui.

Node.js

Antes de começarmos o nosso projeto com Vite, é necessário que você tenha o Node.js instalado em seu computador. Caso ainda não tenha, confira essa aula completa onde ensino o passo a passo para baixar e configurar o Node.js. As versões atuais do Vite exigem o Node.js 20.19 ou superior. Instale sempre a versão LTS mais recente e confira a sua no terminal com node -v.

Iniciando o Projeto com Vite e React

Por padrão, o Vite cria uma pasta contendo os elementos essenciais para o desenvolvimento do seu projeto.

Primeiro, crie ou selecione uma pasta onde deseja que a subpasta do projeto do Vite seja criada.

Dentro dela, clique com o botão direito do mouse e selecione a opção Abrir no Terminal para abrir o prompt de comando nessa pasta.

Se o Windows não apresentar essa opção, abra o menu Iniciar, busque por “CMD” e abra o Prompt de Comando.

Com o Prompt de Comando aberto, você precisará navegar até a pasta onde deseja iniciar seu projeto com Vite. Para isso, copie o caminho da pasta selecionada e digite o seguinte comando no terminal: cd "caminho para a pasta selecionada"

Em alguns casos pode ser que você precise utilizar o caminho da pasta selecionada entre aspas.

Feito isso, você verá o caminho completo da pasta no terminal.

Com o terminal olhando a pasta correta, digite o comando: npm create vite@latest. Esse comando criará uma estrutura de projeto utilizando a última versão do Vite.

Configurando o Projeto com Vite

Depois de executar o comando acima, será necessário escolher um nome para o projeto e para o pacote. Vamos chamá-los de Primeiro-Projeto-React.

Na próxima etapa, você terá as opções para escolher o framework com o qual iremos trabalhar. Entre elas, estão o Vanilla, para um projeto em JavaScript puro, e o React, que é o que utilizaremos.

Utilize as setas do teclado para navegar até a opção do React e pressione Enter.

Em seguida, precisamos definir qual o tipo de projeto com React criaremos.

Neste caso, criaremos um projeto de React com JavaScript puro. Então, navegue até a opção JavaScript e pressione Enter novamente

O Vite terá criado a pasta com a base para o desenvolvimento do nosso projeto em React.

Além disso, no terminal, você verá três comandos que precisam ser executados para inicializar o projeto.

Inicializando o Projeto

Para inicializar o projeto, basta executar os comandos na ordem em que eles foram informados.

Começamos acessando a pasta do projeto executando:

cd Primeiro-Projeto-React

Em seguida, vamos instalar todas as bibliotecas e ferramentas necessárias:

npm install

Feito isso, antes de executar o último comando, precisamos rodar outro comando para abrir a pasta do projeto com o VS Code.

code .

Nesse comando, o code é o atalho para o VS Code no terminal, e o ponto índica a pasta atual aberta.

Após executar esse comando, caso você tenha o VS Code instalado em seu computador, ele será aberto olhando para a pasta do nosso projeto.

Agora, para rodar e inicializar o projeto no localhost do seu computador, execute:

npm run dev

Página Inicial do Projeto

Acesse o link fornecido no terminal para abrir a página inicial do projeto no seu navegador.

Essa página é construída com HTML, CSS e JavaScript seguindo os padrões de interface do React, proporcionando uma estilização e interatividade adequadas.

Conclusão – Como Usar o Vite e Criar Projetos em React

Nessa aula, você aprendeu a usar o Vite e configurá-lo para criar projetos em React.

Essa é a base que utilizaremos ao longo das próximas aulas para desenvolver diversos projetos com React.

Além disso, essa é uma ferramenta essencial que todo desenvolvedor front-end precisa conhecer e saber como utilizar para desenvolver seus projetos de forma rápida e eficiente.

Perguntas frequentes

Hashtag Treinamentos

Para acessar publicações de JavaScript, clique aqui!