Configurando e Executando um Projeto React com Vite

Até agora, você trabalhou com exemplos isolados de React. No desenvolvimento real, aplicações React são criadas e executadas como projetos com uma estrutura e ferramentas predefinidas.

Neste capítulo, você aprenderá como criar e executar um projeto React utilizando o Vite, uma ferramenta de build moderna, rápida, leve e comumente utilizada em projetos de produção.

Criando um Projeto React com Vite

Para criar um novo projeto React, abra o terminal e execute o seguinte comando:

npm create vite@latest

Você será solicitado a:

1. Informar um nome para o projeto;
2. Selecionar um framework → escolha React;
3. Selecionar uma variante → escolha JavaScript.

Após a configuração, navegue até a pasta do projeto:

cd project-name

Instale as dependências do projeto:

npm install

Executando o Servidor de Desenvolvimento

Para iniciar o servidor de desenvolvimento do React, execute:

npm run dev

Após executar este comando:

• O Vite inicia um servidor de desenvolvimento local;
• Uma URL local (geralmente http://localhost:5173) aparece no terminal;
• Ao abrir essa URL no navegador, sua aplicação React será exibida.

Quaisquer alterações feitas no código serão atualizadas automaticamente no navegador.

Entendendo o Que Acabou de Acontecer

Quando você executou o servidor de desenvolvimento:

• O Vite empacotou seu código React;
• O React renderizou a aplicação no navegador;
• O app entrou em modo de desenvolvimento, otimizado para feedback rápido.

Agora você tem um projeto React real rodando localmente.