Crie um projeto React.js com Vite.js do zero

Hoje vou ensinar como fazer uma pequena aplicação web com os frameworks React.js e Vite.js para implantar na web, de forma que qualquer pessoa possa acessá-la em menos de 5 minutos. Parece incrível, mas é muito fácil, pois o Vite.js nos ajuda a gerar a estrutura de trabalho de forma rápida e ordenada.

Este artigo será de grande ajuda para quem deseja automatizar seus projetos e avançar com seus clientes com o mínimo de esforço. Também é ideal para quem tem vários clientes e deve apresentar projetos que exijam atualização constante.

Para tanto, utilizaremos uma plataforma de repositório GitHub para gerenciar nossos projetos de forma ordenada e escalável.

A seguir, compartilharei as partes em que este artigo está dividido, bem como as ferramentas que você precisará para desenvolver o projeto:

Partes

1. Criação de um aplicativo React.js com Vite.js.
2. Modificação do aplicativo.
3. Implantação em um servidor web.

Ferramentas

1. Visual Studio Code (editor de código-fonte).
2. Vite.js (Ferramenta frontend que gera a estrutura do projeto (React, Vue, Vanilla, etc.).
3. React.js (biblioteca Frontend com JavaScript)
4. NPM (Node Package Manager ou gerenciador de pacotes).
5. Netlify (plataforma web em nuvem).

NPM

É uma ferramenta de gerenciamento de pacotes (Node Package Manager) para bibliotecas JavaScript vinculadas ao Node.js.

O NPM nos ajuda a instalar pacotes de bibliotecas JavaScript de forma dinâmica e sustentável.

Você pode encontrar mais informações aqui.

Para utilizar esta biblioteca, devemos ter o Node.js instalado, que já vem com o NPM. Deixo aqui o link para download e depois prossigo com os outros instaladores.

React.js

É uma biblioteca JavaScript de software livre projetada para criar aplicativos front-end que facilitam o desenvolvimento de aplicativos de página única (SPA). Mantida pelo Facebook e pela comunidade de software livre, esta biblioteca é muito rica e cheia de plugins para adicionar ao seu aplicativo.

Com este framework JavaScript iremos avançar nosso projeto, pois ele possui uma comunidade muito grande e uma grande variedade de bibliotecas que, para mim, possuem todos os benefícios que você precisa para iniciar um projeto JavaScript.

Você precisa de mais informações sobre o React.js? Entre aqui.

Vite.js

É uma ferramenta para o frontend JavaScript com a qual você pode gerar estrutura de código de vários frameworks como React, Vanilla, Vue, Svelte e outros. Além de ser um gerador muito rápido, o Vite.js nos poupa muito tempo configurando outras bibliotecas.

Aqui você pode encontrar mais detalhes sobre o Vite.js.

Netlify

Esta plataforma de desenvolvimento inclui serviços de back-end e aplicações web estáticas e dinâmicas. Também oferece pacotes gratuitos para usar e testar seus serviços em nuvem.

Existem outras plataformas que também incluem serviços gratuitos, como:

Cloudflare CDN

• Amazon CloudFront
• Pantheon
• Webflow
• Fastly
• HubSpot CMS Hub
• Platform.sh
• Cloudways

No nosso caso, usaremos o Netlify que, segundo minha experiência, é super simples, fácil de configurar e iniciar nossos aplicativos. Na verdade, cada plataforma inclui serviços diferentes.

Você precisa saber mais sobre o Netlify? Entre aqui.

Vamos começar o projeto

Antes de trabalhar com as bibliotecas, devemos ter o NPM instalado (acima compartilhei o link para download). Uma vez instalado no computador, abrimos o terminal de comando e escrevemos o seguinte script: npm.

Uma instrução de como usar o comando npm deve aparecer como na imagem anterior. Se tivermos esse resultado, podemos começar a baixar as bibliotecas que vamos usar em nosso projeto.

Agora abrimos o terminal de comando e executamos o comando npm create vite@latest my-react-app --template react (create vite@latest vite command | my-react-app project name | template é a opção para escolher o framework que irá ser instalado -neste caso React-). Isso instalará alguns pacotes do Vite (se ainda não os tivermos).

Agora escolhemos a opção Reagir na lista. Outras opções aparecerão.

Em seguida, executamos o comando cd my-react-app. Isso nos faz entrar no diretório do projeto para atualizar as bibliotecas necessárias para o nosso projeto funcionar.

Como próximo passo, executamos o comando npm install, que irá instalar todos os pacotes necessários para iniciar o projeto.

Neste ponto, é hora de executar o comando npm run dev que inicia o projeto.

E pronto! Temos o aplicativo instalado e funcionando. Caso apresente algum erro, devemos verificar se todas as nossas bibliotecas React, Vite e NPM estão instaladas.

Feito tudo isso, implantamos nosso aplicativo na plataforma Netlify, algo que será alcançado com as seguintes etapas:

1) Crie uma conta na plataforma Netlify.

2) Compile nosso aplicativo com o comando npm run build. Isso irá gerar uma pasta dist (aquela que vamos construir na plataforma).

Esta é a pasta dist que precisamos copiar para a plataforma.

1. Copie a pasta dist para a plataforma. Se tudo correu bem, nosso aplicativo na plataforma está pronto. Em seguida, entramos na plataforma Netlify, escolhemos a opção Adicionar novo site e selecionamos a opção Implantar manualmente.

Isso nos levará a esta seção, onde precisamos arrastar nossa pasta dist.

Aqui, arrastamos nossa pasta dist onde nosso aplicativo compilado está localizado.

Voilá! Nosso aplicativo em nuvem já está na plataforma.

A seta indica o link no qual eles devem entrar para ver o aplicativo ou compartilhar com alguém.

Com isso finalizamos o processo de criação de um app em React with Vite e sua publicação na web.

Ah, você pode ver o resultado do nosso processo aqui.

Na próxima parte falaremos sobre como conectar nosso projeto com o GitHub e publicá-lo automaticamente em nosso site, para que outras pessoas possam acompanhar o andamento de nossos projetos. Também adicionaremos estilos e algumas outras bibliotecas para nosso projeto React tomar forma.

Saudações.