Como Configurar um Projeto React com Vite

Tutoriais
JavaScript React

O autor selecionou Code.org para receber uma doação como parte do programa Write for Donations.

Introdução

Geralmente, você pode criar um novo projeto usando Create React App, mas pode levar muito tempo para instalar mais de 140 MB de dependências. Vite é uma ferramenta leve que ocupa apenas 31 MB de dependências, o que economizará tempo ao iniciar um novo projeto. Vite também utiliza os módulos ES nativos do navegador (ECMAScript) para fazer link para arquivos JavaScript, o que não reconstrói o pacote inteiro após cada alteração de arquivo. Essas diferenças resultam em uma experiência mais rápida ao criar, atualizar e construir um aplicativo React com Vite.

Este tutorial irá estruturar um novo aplicativo React utilizando a ferramenta Vite. Você criará um aplicativo básico com um novo componente, CSS e um arquivo de imagem, e preparará um pacote otimizado para implantação.

Simplifique a implantação de aplicativos React com a Plataforma de Aplicativos da DigitalOcean. Implante o React diretamente do GitHub em minutos.

Pré-requisitos

Para seguir este tutorial, você precisará do seguinte:

Passo 1 — Criando um Projeto Vite

Neste passo, você criará um novo projeto React usando a ferramenta Vite a partir da linha de comando. Você usará o yarn gerenciador de pacotes para instalar e executar os scripts.

Execute o seguinte comando no seu terminal para criar uma nova estrutura de projeto Vite: 

  1. yarn create vite

Este comando executará o executável Vite do repositório remoto npm. Ele configurará as ferramentas necessárias para criar um ambiente de desenvolvimento React local. Por fim, abrirá um menu de linha de comando para configurações do projeto e tipo de linguagem.

Após o script terminar, você será solicitado a inserir um nome de projeto: 

Output
yarn create v1.22.10
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Installed "[email protected]" with binaries:
- create-vite
- cva
? Project name: » vite-project

Digite o nome do seu projeto (este tutorial usará digital-ocean-vite como exemplo): 

  1. digital-ocean-vite

Após inserir o nome do seu projeto, o Vite solicitará que você selecione um framework: 

Output
? Select a framework: » - Use arrow-keys. Return to submit.
Vanilla
Vue
> React
Preact
Lit
Svelte
Others

O Vite permite inicializar uma variedade de tipos de projeto, não apenas React. Atualmente, ele suporta projetos React, Preact, Vue, Lit, Svelte e projetos JavaScript vanilla.

Use as teclas de seta do seu teclado para selecionar React.

Após selecionar o framework React, o Vite solicitará que você escolha o tipo de linguagem. Você pode usar JavaScript ou TypeScript para trabalhar no seu projeto.

Use as teclas de seta para selecionar JavaScript: 

Output
? Select a variant: » - Use arrow-keys. Return to submit.
> JavaScript
TypeScript
JavaScript + SWC
TypeScript + SWC

Após configurar o framework, você verá uma saída informando que o projeto foi criado. Em seguida, o Vite instruirá você a instalar as dependências usando o Yarn: 

Output
Done:
Scaffolding project in path\to\digital-ocean-vite...

Done. Now run:

cd digital-ocean-vite
yarn
yarn dev

Done in 129.89s.

Navegue até a pasta do seu projeto conforme indicado: 

  1. cd digital-ocean-vite

Então, use o comando yarn para instalar as dependências do projeto:

  1. yarn

Quando terminar, a instalação de dependências retornará uma saída com quanto tempo levou para instalar as dependências:

Output
success Saved lockfile.
Done in 43.26s.

Você agora configurou um novo projeto React usando Vite e instalou os pacotes necessários pelo React e pelo Vite.

Em seguida, você iniciará o servidor de desenvolvimento para testar a aplicação.

Passo 2 — Iniciando o Servidor de Desenvolvimento

Neste passo, você iniciará o servidor de desenvolvimento para verificar se tudo está funcionando.

De dentro da pasta digital-ocean-vite, use o seguinte comando para executar o servidor de desenvolvimento:

  1. yarn run dev

Este comando é um alias do comando vite. Ele executará seu projeto no modo de desenvolvimento.

Você receberá a seguinte saída:

Output
VITE v4.0.4 ready in 847 ms

➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h to show help

Em seguida, abra seu navegador e visite http://localhost:5173/. O projeto React padrão estará sendo executado na porta 5173:

Quando você ver este aplicativo em execução, você instalou com sucesso o React com o Vite. Em seguida, você irá visualizar seu aplicativo a partir do seu celular.

Passo 3 — Visualizando Seu Aplicativo pelo Celular

Vite não expõe sua aplicação de desenvolvimento para sua rede por padrão. Nesta etapa, você irá expor o aplicativo para sua rede local para visualizá-lo em seu celular.

Para executar seu aplicativo em sua rede local, você precisa primeiro parar o servidor atual. No seu terminal, use CTRL+C para encerrar o servidor de desenvolvimento que está em execução atualmente.

Em seguida, use o seguinte comando para executar seu projeto:

  1. yarn run dev --host

A flag --host diz ao Vite para expor seu aplicativo para a rede local.

Você receberá esta saída no seu terminal:

Output
VITE v4.0.4 ready in 747 ms

➜ Local: http://localhost:5173/
➜ Network: http://your_ip_address:5173/
➜ press h to show help

Este é um endereço IP local, único para a sua rede de computadores ou roteador.

Abra um navegador em seu celular, depois digite o endereço IP acima e a porta para acessar a pré-visualização do seu aplicativo Vite em seu celular:

Você agora executou seu aplicativo no ambiente de desenvolvimento e verificou que funciona. No próximo passo, você irá remover o código boilerplate que veio com o Vite.

Passo 4 — Removendo o Boilerplate Padrão

Nesta etapa, você irá remover os arquivos boilerplate do projeto Vite do diretório src/, o que permitirá que você configure um novo aplicativo. Você também irá se familiarizar com a estrutura de projeto padrão do aplicativo atual.

Use o seguinte comando para visualizar o conteúdo do seu diretório src/:

  1. ls src/

A saída listará todos os arquivos disponíveis:

Output
App.css
App.jsx
assets
index.css
main.jsx

Use o comando rm para excluir um arquivo ou diretório. Use os seguintes comandos para excluir os arquivos padrão do projeto:

  1. rm src/App.css

  2. rm src/App.jsx

  3. rm src/index.css

Exclua o diretório assets usando o seguinte comando:

  1. rm -r src/assets

A flag -r é uma operação recursiva, necessária ao excluir um diretório juntamente com seu conteúdo.

Após excluir esses arquivos, apenas main.jsx permanece no diretório src/. Execute novamente o comando ls src/ para ver os arquivos restantes:

  1. ls src/

Agora, o diretório só conterá o arquivo main.jsx:

Output
main.jsx

Como você removeu todos os outros arquivos, agora precisa remover uma referência em main.jsx para um arquivo CSS excluído.

Abra o main.jsx para edição com o seguinte comando:

  1. nano src/main.jsx

Remova a linha destacada para desvincular a referência ao arquivo CSS:

/src/main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import "./index.css"

ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)

Salve e feche o arquivo main.jsx.

Crie um novo arquivo chamado App.jsx sob o diretório src/ com o seguinte comando:

  1. nano src/App.jsx

Adicione o seguinte código ao arquivo App.jsx:

/src/App.jsx
export default function App() {
return (
<>
<div>Hello World</div>
</>
);
}

Este código cria um novo componente funcional React chamado App. O prefixo export default informa ao JavaScript para exportar esta função como uma exportação padrão. O corpo da função contém um <div> com texto Hello World.

Salve e feche o arquivo App.jsx.

Use o seguinte comando para executar o servidor de desenvolvimento novamente:

  1. yarn run dev --host

Agora, abra ou atualize http://localhost:3000 em seu navegador para acessar uma página em branco exibindo o texto Hello World:

Neste passo, você removeu alguns dos arquivos padrão do projeto Vite. Em seguida, você construirá um aplicativo básico com novos componentes, arquivos CSS e arquivos de imagem.

Passo 5 — Criando um Aplicativo Básico

Neste passo, você criará componentes, adicionará arquivos CSS e fará links para imagens criando um aplicativo básico. Comece saindo do servidor de desenvolvimento.

Na subseção seguinte, você criará um novo componente para o seu aplicativo React.

Criando um Componente

Criar um novo componente adiciona modularidade ao seu projeto. Você adicionará todos os componentes ao diretório components para manter as coisas organizadas.

Use o seguinte comando para criar um novo diretório chamado components dentro de src/:

  1. mkdir src/components

Em seguida, crie um novo arquivo chamado Welcome.jsx dentro do diretório src/components/ com o comando:

  1. nano src/components/Welcome.jsx

Adicione o seguinte código ao arquivo Welcome.jsx:

/src/components/Welcome.jsx
export default function Welcome() {
return (
<>
<div className="wrapper">
<h1>Welcome To My App</h1>
<p>This is going to be the coolest app in the world!</p>
</div>
</>
);
}

O código acima criará um novo componente funcional React chamado Welcome. O prefixo export default indica ao JavaScript para exportar essa função como uma exportação padrão.

A tag div com um nome de classe wrapper permite segmentar esta seção no CSS. As tags h1 e p exibirão a mensagem na tela.

Salve e feche o arquivo.

Em seguida, você fará referência a este novo componente em seu arquivo App.jsx.

Abra o App.jsx com o seguinte comando:

  1. nano src/App.jsx

Atualize o conteúdo do App.jsx com o código destacado:

/src/App.jsx
import Welcome from "./components/Welcome"

export default function App() {
return (
<>
<Welcome />
</>
)
}

Esta linha de código importará Welcome.jsx para o aplicativo e vinculará o novo componente ao corpo da função. Quando terminar, salve e feche o arquivo.

Na subseção seguinte, você adicionará uma imagem ao seu aplicativo.

Adicionando uma Imagem

Adicionar imagens no React é um caso de uso comum no desenvolvimento de aplicativos.

Crie um novo diretório chamado img dentro do diretório src/ com o seguinte comando:

  1. mkdir src/img

Navegue até o seu diretório src/img com este comando:

  1. cd src/img

Você irá baixar esta imagem de Sammy para src/img.

Baixe a imagem com wget:

  1. wget https://html.sammy-codes.com/images/small-profile.jpeg

Renomeie a imagem com o seguinte comando:

  1. mv small-profile.jpeg sammy.jpeg

Este comando renomeia o arquivo de imagem de small-profile.jpeg para sammy.jpeg, o que facilitará a referência posteriormente.

Volte para o diretório raiz com este comando:

  1. cd ../../

Em seguida, você irá atualizar o arquivo Welcome.jsx para vincular a esta imagem. Abra o arquivo:

  1. nano src/components/Welcome.jsx

Atualize seu arquivo Welcome.jsx adicionando as linhas destacadas:

/src/components/Welcome.jsx
import Sammy from "../img/sammy.jpeg"

export default function Welcome() {
return (
<>
<div className="wrapper">
<h1>Welcome To My App</h1>
<p>This is going to be the coolest app in the world!</p>
<img src={Sammy} alt="Sammy Image" width={200} height={200} />
</div>
</>
)
}

A primeira linha importará a imagem para o React como um módulo.

A outra linha dentro do corpo da função criará uma nova tag <img> e vinculará o atributo src ao componente de imagem que você acabou de importar. As props width e height definirão os atributos de imagem correspondentes para 200 pixels.

Salve e feche o arquivo Welcome.jsx.

Em seguida, você irá adicionar CSS ao seu projeto.

Adicionando CSS

Nesta subseção, você irá adicionar um arquivo CSS personalizado ao seu projeto para estilizar seu aplicativo.

Crie um novo diretório chamado css dentro do diretório src/ usando o seguinte comando:

  1. mkdir src/css

Agora, crie um novo arquivo CSS chamado main.css em src/css:

  1. nano src/css/main.css

Adicione o seguinte código ao arquivo main.css:

/src/css/main.css
body {
display: grid;
place-items: center;
background-color: #b4a7d6;
font-family: Arial, Helvetica, sans-serif;
}

.wrapper {
background-color: #fff9e6;
padding: 20px;
border-radius: 10px;
}

h1 {
color: #8873be;
}

No CSS acima, você define um display de grade e coloca itens no centro para o body. Você também define uma família de fontes e cor de fundo.

A classe .wrapper irá selecionar a div de envolvimento no seu arquivo Welcome.jsx. Os estilos para esta classe irão fazer o seguinte:

  • Definir uma cor de fundo.
  • Adicionar um preenchimento de 20 pixels.
  • Adicionar cantos arredondados de 10 pixels.

O seletor h1 irá direcionar a tag no HTML, definindo sua cor para um tom de roxo.

Ao terminar, salve e feche o arquivo main.css.

Em seguida, você irá referenciar o novo arquivo CSS a partir do componente Welcome.jsx. Abra o arquivo Welcome.jsx:

  1. nano src/components/Welcome.jsx

Atualize o conteúdo do arquivo com a linha destacada:

/src/components/Welcome.jsx
import Sammy from "../img/sammy.jpeg"
import "../css/main.css"

export default function Welcome() {
return (
<>
<div className="wrapper">
<h1>Welcome To My App</h1>
<p>This is going to be the coolest app in the world!</p>
<img src={Sammy} alt="Sammy Image" width={200} height={200} />
</div>
</>
)
}

Esta linha irá importar o arquivo CSS como um módulo no seu componente. Você pode precisar atualizar a linha com o caminho correto do arquivo para a pasta do seu projeto.

Ao terminar, salve e feche o arquivo Welcome.jsx.

Na próxima subseção, você irá alterar a barra de título do seu aplicativo.

Alterando a Barra de Título do Aplicativo

Por padrão, o aplicativo Vite exibe o texto Vite + React na barra de título da janela do navegador. Neste passo, você irá mudá-lo para um título descritivo.

Abra o arquivo index.html no seu diretório raiz:

  1. nano index.html

Atualize a tag <title> com o texto destacado:

/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Cool App</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>

Este texto substitui a barra de título padrão do Aplicativo Vite com o título personalizado do seu aplicativo.

Salve e feche o arquivo index.html.

Se precisar executar novamente o servidor de desenvolvimento, use este comando:

  1. yarn run dev --host

Após todas essas mudanças, visite http://localhost:5173 para ver o seu aplicativo. Você verá uma nova versão do seu aplicativo.

Você pode fechar o servidor de desenvolvimento quando estiver pronto para avançar para a construção.

Agora você adicionou uma imagem, mudou estilos e criou uma interface de usuário polida. No próximo e último passo, você irá construir um pacote de aplicativo otimizado para implantação.

Passo 6 — Construção para Produção

Neste passo, você irá construir um pacote de aplicativo otimizado pronto para implantar em um servidor. Para criar um build, execute o seguinte comando no terminal:

  1. yarn run build

Este comando cria uma nova pasta dist com arquivos de origem minificados que você pode implantar em seu servidor para produção.

Você receberá uma saída semelhante a esta:

Output
vite v4.0.4 building for production...
✓ 34 modules transformed.
dist/index.html 0.45 kB
dist/assets/sammy-9cb83ad5.jpeg 6.74 kB
dist/assets/index-d1c95597.css 0.19 kB │ gzip: 0.16 kB
dist/assets/index-e0751083.js 143.19 kB │ gzip: 46.04 kB
✨ Done in 1.63s.

Você pode agora implantar o conteúdo da pasta dist em um servidor online. Se você tiver um servidor Apache ou Nginx, pode carregar o conteúdo manualmente. Você também pode usar uma plataforma de aplicativos para executar o script de compilação e gerar os arquivos de compilação automaticamente. Para implantar seu aplicativo React na plataforma de aplicativos da DigitalOcean, siga nosso tutorial sobre Como implantar um aplicativo React na plataforma de aplicativos da DigitalOcean.

Conclusão

Neste tutorial, você criou um novo aplicativo React usando a ferramenta Vite. Você criou um novo aplicativo React com o comando yarn create vite. Depois de remover o código de boilerplate, você criou seus componentes adicionando uma imagem personalizada, um arquivo CSS e alterando a barra de título. Finalmente, você criou um pacote otimizado usando o comando yarn run build, pronto para implantação.

Agora que você tem um aplicativo React construído com o Vite, veja o que mais você pode fazer com o React na série Como Codificar em React.js e explore outros tutoriais React.

Source:
https://www.digitalocean.com/community/tutorials/how-to-set-up-a-react-project-with-vite