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!
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.
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.
Hashtag Treinamentos
Para acessar publicações de JavaScript, clique aqui!
Expert em conteúdos da Hashtag Treinamentos. Auxilia na criação de conteúdos de variados temas voltados para aqueles que acompanham nossos canais.