Como Instalar da Estrutura Inicial de um Projeto React com Vite em 2025

Tutorial: Instalação da Estrutura Inicial do Projeto React com Vite

Pré-requisitos

Antes de começar, é essencial ter o VS Code (Visual Studio Code) e o Node.js (que inclui o npm - Node Package Manager) instalados e configurados na sua máquina. O Node.js permite que você execute código JavaScript fora do navegador.

Passo 1: Abrir o Terminal no VS Code ou Pasta do Projeto

Abra o VS Code e navegue até a pasta onde deseja criar seu projeto. Em seguida, abra o terminal:

1. Clique em Terminal ou use o atalho Command J ou Control J.

2. Navegue até a pasta desejada (se necessário, usando o comando cd <nome_da_pasta>).

Passo 2: Criar o Projeto React usando Vite

Utilize o npm para criar o projeto React usando a ferramenta Vite.

Comando:

npm create vite@latest

ou, para instalar na pasta atual:

npm create vite@latest .

Se você usar o ponto (.) ao final do comando, o projeto será instalado dentro da pasta atual. Se não usar o ponto, o Vite perguntará qual nome você quer dar ao pacote e criará uma nova subpasta.

O Vite fará algumas perguntas interativas no terminal:

1. Nome do Pacote (Package name): Digite o nome do seu projeto (ex: lista-mercado ou react-boiler-plate).

2. Framework: Escolha react (navegue com as setas e pressione Enter).

3. Variante (Linguagem): Escolha JavaScript (ou TypeScript, se preferir).

Após responder, o Vite criará os arquivos iniciais.

Passo 3: Instalar as Dependências

Se o Vite criou uma nova pasta (e você não usou o .), você precisará navegar até ela (ex: cd lista-mercado).

Em seguida, instale todas as dependências listadas no arquivo package.json (que são pacotes, bibliotecas e tecnologias usadas no projeto que ainda não estão instaladas no seu computador):

Comando:

npm install

ou a forma abreviada:

npm i

Este comando criará uma pasta chamada node_modules.

Passo 4: Rodar o Servidor Local de Desenvolvimento

Para iniciar o projeto e ver o que o Vite criou, execute o script de desenvolvimento:

Comando:

npm run dev 

Este comando busca o script dev dentro do package.json, que por sua vez roda o servidor local. O terminal fornecerá um link (geralmente localhost:5173) que você pode acessar segurando Control e clicando no link para abrir o navegador.

Limpeza e Modificação da Estrutura Inicial

O projeto inicial criado pelo Vite inclui muitas coisas úteis, mas também arquivos desnecessários para começar do zero. A limpeza é recomendada para simplificar a estrutura.

Arquivos que Devem Ser Deletados

Arquivo/Pasta	Localização	Ação/Justificativa	Fonte(s)
vite.svg	public/	Logo do Vite, considerado inútil para o projeto.
react.svg	src/assets/	Imagem do React.
App.css	src/	Arquivo de estilização que não será usado.
index.css	src/	Arquivo de estilização (em algumas estruturas, é totalmente deletado).
App.jsx	src/	O componente principal (se você for recriá-lo do zero).
README.md	Raiz do projeto	Apresentação padrão do projeto no GitHub (pode ser deletado).

Arquivos que Devem Ser Modificados ou Limpos

Arquivo/Pasta	Localização	Modificação/Ação	Fonte(s)
src/App.jsx	src/	Se você não deletou o arquivo, deve apagar todo o conteúdo dentro do return (incluindo as tags vazias, se existirem) e apagar as importações de CSS e SVGs. O componente deve retornar apenas uma estrutura vazia (<></>) inicialmente.
src/main.jsx	src/	Deletar as importações dos arquivos que foram removidos, como index.css e App.jsx (se você recriou o App).
src/index.css	src/	Se o arquivo foi mantido, apague todo o seu conteúdo.
index.html	Raiz do projeto	Altere o texto dentro da tag <title> (por exemplo, de "Vite + React" para o nome do seu projeto). Também é possível comentar ou deletar o link do favicon (que aponta para o vite.svg deletado).

Estrutura de Pastas Profissional Recomendada (Estrutura Completa)

Após a limpeza, é recomendado organizar a pasta src para manter a aplicação modular e organizada, o que é fundamental no desenvolvimento React.

A estrutura profissional comum utilizada em grandes empresas inclui as seguintes pastas:

1. containers ou pages: Para guardar as páginas da sua aplicação (ex: Home, Carrinho, Cadastro). Cada página (container) geralmente tem um arquivo index.jsx (para o componente da página) e um arquivo de estilos, como styles.js (se usando Style Components).

2. components: Para guardar componentes reutilizáveis que são usados em várias partes da aplicação (ex: um botão, um cartão, um formulário).

3. services: Para guardar a lógica de chamadas a APIs (Application Programming Interface).

4. styles: Para centralizar estilos globais da aplicação (ex: definir margens e paddings padrão para todo o body).

5. assets: Para guardar imagens e ícones (embora os ícones possam ser mantidos em components se forem um componente reutilizável).

6. utils: (Utilities) Para funções auxiliares que se repetem globalmente (ex: formatação de valores em moeda).

7. hooks: Para guardar custom hooks (como useContext), usados para compartilhar estado global na aplicação.

Ao criar novos componentes (sejam páginas ou elementos reutilizáveis), a convenção é que o nome do arquivo seja em PascalCase (primeira letra de cada palavra em maiúscula e juntas, ex: ItemLista.jsx ou AddTask.jsx).

--------------------------------------------------------------------------------

Conceito Chave: O React utiliza o conceito de componentes, que são entidades independentes (geralmente funções JavaScript que retornam JSX) que representam partes específicas da sua página. Essa modularidade torna o desenvolvimento em equipe e a manutenção muito mais eficientes. O uso do Vite ajuda a estabelecer rapidamente o ambiente necessário para trabalhar com esses componentes.

Analogia: Imagine montar um carro (sua aplicação). O Vite é a linha de montagem inicial, que fornece a base. Os arquivos que deletamos são embalagens e manuais genéricos que você não precisa. A estrutura de pastas profissional (Containers, Components, Services) é como separar a montagem em setores: o setor de Components fabrica peças padronizadas (rodas, botões), e o setor de Containers/Pages é onde o carro final (a página) é montado usando essas peças. Isso garante que, se você precisar de uma roda nova, só precisa ir ao setor de Components e mudar o molde uma única vez.

.