O autor selecionou Code.org para receber uma doação como parte do programa Write for DOnations.
Introdução
Normalmente, 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 31 MB de dependências, o que economizará tempo ao iniciar um novo projeto. Vite também utiliza os módulos nativos do navegador ES (ECMAScript) para vincular 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 o Vite.
Este tutorial irá criar uma nova aplicação React usando 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 DigitalOcean. Implante o React diretamente do GitHub em minutos.
Pré-requisitos
Para seguir este tutorial, você precisará do seguinte:
- Node.js versão 12.2.0 ou superior instalada em sua máquina. Você pode instalar a versão mais recente do Node.js com nosso tutorial em Como Instalar o Node.js.
- Gerenciador de pacotes Yarn, versão 1.22.0 ou superior, instalado em sua máquina. Você pode instalar o Yarn com o Passo 1 em Como Instalar e Usar o Gerenciador de Pacotes Yarn para o Node.js.
- Familiaridade com HTML, CSS e JavaScript moderno. Também é útil ter conhecimento em JS moderno usado no React.
- A foundational knowledge of React, which you can learn with the How To Code in React series.
- A mobile phone connected to the same Wifi network as your computer so you can preview your app from mobile.
Passo 1 — Criando um Projeto Vite
Neste passo, você irá criar um novo projeto React usando a ferramenta Vite a partir da linha de comando. Você usará o gerenciador de pacotes yarn para instalar e executar os scripts.
Execute o seguinte comando no seu terminal para criar um novo projeto Vite:
- yarn create vite
Este comando executará o executável Vite do repositório remoto do npm. Ele configurará as ferramentas necessárias para criar um ambiente de desenvolvimento local React. Por fim, abrirá um menu de linha de comando para configurações do projeto e tipo de linguagem.
Após a conclusão do script, você será solicitado a inserir um nome de projeto:
Outputyarn 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):
- digital-ocean-vite
Depois de inserir o nome do projeto, o Vite solicitará que você escolha 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 React, Preact, Vue, Lit, Svelte e vanilla JavaScript.
Use as teclas de seta do 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 em 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 indicando que o projeto foi criado. Em seguida, o Vite instruirá você a instalar as dependências usando o Yarn:
OutputDone:
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:
- cd digital-ocean-vite
Então, use o comando yarn para instalar as dependências do projeto:
- yarn
Quando terminar, a instalação das dependências retornará uma saída com o tempo que levou para instalar as dependências.
Outputsuccess Saved lockfile.
Done in 43.26s.
Você configurou um novo projeto React usando o Vite e instalou os pacotes necessários para o React e o 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.
A partir do interior da pasta digital-ocean-vite, use o seguinte comando para executar o servidor de desenvolvimento:
- yarn run dev
Este comando é um alias do comando vite. Ele executará seu projeto no modo de desenvolvimento.
Você receberá a seguinte saída:
OutputVITE 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á em execução na porta 5173:
Quando você ver este aplicativo em execução, você instalou com sucesso o React com o Vite. Em seguida, você vai visualizar seu aplicativo a partir do seu celular.
Passo 3 — Visualizando Seu Aplicativo a Partir do 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 pré-visualizá-lo do seu telefone 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:
- yarn run dev --host
A bandeira --host informa ao Vite para expor seu aplicativo para a rede local.
Você receberá esta saída no seu terminal:
OutputVITE 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 sua rede de computadores ou roteador.
Abra um navegador no seu telefone celular e digite o endereço IP acima e a porta para acessar a pré-visualização do seu aplicativo Vite do seu telefone celular:
Agora você executou seu aplicativo no ambiente de desenvolvimento e verificou que ele funciona. No próximo passo, você irá remover o código de boilerplate que veio com o Vite.
Passo 4 — Removendo o Boilerplate Padrão
Nesta etapa, você irá remover os arquivos de boilerplate do projeto Vite do diretório src/, o que permitirá configurar um novo aplicativo. Você também irá se familiarizar com a estrutura padrão do projeto do aplicativo atual.
Use o seguinte comando para visualizar o conteúdo do seu diretório src/:
- ls src/
A saída listará todos os arquivos disponíveis:
OutputApp.css
App.jsx
assets
index.css
main.jsx
Use o comando rm para excluir um arquivo ou diretório. Utilize os comandos a seguir para excluir os arquivos padrão do projeto:
- rm src/App.css
- rm src/App.jsx
- rm src/index.css
Exclua o diretório assets usando o seguinte comando:
- rm -r src/assets
A bandeira -r é uma operação recursiva, necessária ao excluir um diretório junto com seu conteúdo.
Após excluir esses arquivos, apenas main.jsx permanecerá no diretório src/. Execute novamente o comando ls src/ para ver os arquivos restantes:
- ls src/
Agora, o diretório conterá apenas o arquivo main.jsx:
Outputmain.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:
- nano src/main.jsx
Remova a linha destacada para desvincular a referência ao arquivo CSS:
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 no diretório src/ com o seguinte comando:
- nano src/App.jsx
Adicione o seguinte código ao arquivo 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 o texto Hello World.
Salve e feche o arquivo App.jsx.
Utilize o seguinte comando para executar novamente o servidor de desenvolvimento:
- yarn run dev --host
Agora, abra ou atualize http://localhost:3000 em seu navegador para acessar uma página em branco exibindo o texto Olá Mundo:
Neste passo, você removeu alguns dos arquivos padrão do projeto Vite. Em seguida, você irá construir um aplicativo básico com novos componentes, arquivos CSS e arquivos de imagem.
Passo 5 — Criando um Aplicativo Básico
Neste passo, você irá criar componentes, adicionar arquivos CSS e vincular imagens criando um aplicativo básico. Comece encerrando o servidor de desenvolvimento.
Na subseção seguinte, você irá criar um novo componente para seu Aplicativo React.
Criando um Componente
Criar um novo componente adiciona modularidade ao seu projeto. Você irá 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/:
- mkdir src/components
Em seguida, crie um novo arquivo chamado Welcome.jsx dentro do diretório src/components/ com o comando:
- nano src/components/Welcome.jsx
Adicione o seguinte código ao arquivo 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 direcionar 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 no seu arquivo App.jsx.
Abra o App.jsx com o seguinte comando:
- nano src/App.jsx
Atualize o conteúdo do App.jsx com o código destacado:
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 sob o diretório src/ com o seguinte comando:
- mkdir src/img
Navegue até o seu diretório src/img com este comando:
- cd src/img
Você irá baixar esta imagem do Sammy para src/img.
Baixe a imagem com o wget:
- wget https://html.sammy-codes.com/images/small-profile.jpeg
Renomeie a imagem com o seguinte comando:
- 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.
Retorne ao seu diretório raiz com este comando:
- cd ../../
Em seguida, você atualizará o arquivo Welcome.jsx para vincular a esta imagem. Abra o arquivo:
- nano src/components/Welcome.jsx
Atualize seu arquivo Welcome.jsx adicionando as linhas destacadas:
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ê adicionará CSS ao seu projeto.
Adicionando CSS
Nesta subseção, você adicionará um arquivo CSS personalizado ao seu projeto para estilizar seu aplicativo.
Crie um novo diretório chamado css sob o diretório src/ usando o seguinte comando:
- mkdir src/css
Agora, crie um novo arquivo CSS chamado main.css em src/css:
- nano src/css/main.css
Adicione o seguinte código ao arquivo 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 grid e coloca itens no centro para o body. Você também define uma família de fontes e cor de fundo.
A classe .wrapper selecionará a div de wrapper no seu arquivo Welcome.jsx. Os estilos para essa classe farão o seguinte:
- Definir uma cor de fundo.
- Adicionar padding de 20 pixels.
- Adicionar cantos arredondados de 10 pixels.
O seletor h1 irá direcionar a tag no HTML, definindo sua cor para uma tonalidade 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:
- nano src/components/Welcome.jsx
Atualize o conteúdo do arquivo com a linha destacada:
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 importará o arquivo CSS como um módulo no seu componente. Talvez você precise 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 subseção seguinte, você irá alterar a barra de título do 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á alterá-lo para um título descritivo.
Abra o index.html no seu diretório raiz:
- nano index.html
Atualize a tag <title> com o texto destacado:
<!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 pelo título personalizado do seu aplicativo.
Salve e feche o arquivo index.html.
Se precisar reiniciar o servidor de desenvolvimento, execute este comando:
- yarn run dev --host
Depois de todas essas alterações, visite http://localhost:5173 para ver seu aplicativo. Você verá uma nova versão do seu aplicativo.
Você pode fechar o servidor de desenvolvimento quando estiver pronto para prosseguir com a construção.
Agora você adicionou uma imagem, alterou estilos e criou uma interface do usuário polida. Na próxima e última etapa, você irá criar um pacote de aplicativo otimizado para implantação.
Passo 6 — Construindo para Produção
Neste passo, você irá criar um pacote de aplicativo otimizado pronto para ser implantado em um servidor. Para criar uma compilação, execute o seguinte comando no terminal:
- 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:
Outputvite 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, você pode carregar o conteúdo manualmente. Você também pode usar uma plataforma de aplicativo 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. Após 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 Vite, veja o que mais você pode fazer com React na série Como Programar em React.js e explore outros tutoriais do React.
Source:
https://www.digitalocean.com/community/tutorials/how-to-set-up-a-react-project-with-vite