React: configurando e estruturando projetos com Vite

Iniciando o projeto - Apresentação

Deseja aprimorar seus conhecimentos em front-end e aprender sobre a biblioteca React? Então, está no lugar certo! Meu nome é Mônica Hillman e serei sua instrutora nesta jornada.

Audiodescrição: Monica se autodeclara como uma mulher branca. Ela tem cabelos longos, levemente ondulados, castanhos e com mechas loiras. Usa óculos de armação arredondada preta e transparente e tem um piercing no septo. Veste uma camiseta na cor azul com desenho de coelhos. Ao fundo, uma iluminação degradê em tons de roxo.

O projeto que será desenvolvido ao longo do curso é a plataforma Code Connect, uma rede social para pessoas desenvolvedoras compartilharem seus conhecimentos através de artigos. Para construir essa aplicação, vamos criar alguns componentes, como uma barra de menu lateral, que consiste em um logo e uma lista de menu de navegação. Temos também uma barra de pesquisa, uma seção de filtros e de ordenação.

O componente principal dessa aplicação são os cards, contendo as imagens de prévia da publicação, título, resumo, quantidade de interação e a informação sobre quem publicou na plataforma.

Para gerar toda essa aplicação, vamos passar por alguns conceitos, como a criação de projetos React utilizando o Vite. Vamos aprender a construir componentes, especificamente function components, que são componentes construídos como funções.

Através dos componentes, vamos trabalhar com props para transformar alguns componentes em dinâmicos. Com props, conseguimos enviar valores do componente pai para o componente filho e renderizar seu conteúdo de acordo com o que está sendo enviado.

Também aprenderemos sobre os hooks do React, como o useState, para criar variáveis de estado, e o useEffect, para construir uma requisição para uma API externa. Por fim, como bônus, mas não menos importante, aprenderemos como fazer o deploy dessa aplicação, tanto no GitHub Pages quanto no Vercel. Para isso, veremos que há algumas configurações extras que precisamos fazer.

Mas por que precisamos aprender tudo isso? Porque, cada vez mais, aprender React é um pré-requisito para vagas que podem ser encontradas no mercado de trabalho. Então, é importante ter esse conhecimento.

Para iniciar este curso, precisamos noções de HTML, CSS e JavaScript, porque, apesar de estarmos utilizando o React, esses três conceitos são a base do front-end e serão utilizados. Vamos nessa?

Iniciando o projeto - Ferramenta Vite

Iniciar um projeto utilizando a biblioteca React pode parecer um pouco complicado, já que estamos acostumados a utilizar HTML, CSS e JavaScript, e a estrutura inicial de um projeto utilizando essas três tecnologias é composta de apenas três arquivos. Agora, vamos a uma dica para facilitar a criação de um projeto React.

Primeiro, vamos acessar o site "vitejs.dev". Nele, temos aqui descrição em Inglês informando que o front-end da próxima geração é feito com o Vite. Então, o Vite é uma ferramenta que facilita na criação dessa estrutura base quando queremos utilizar tanto o React quanto outros frameworks e bibliotecas.

Ainda na página inicial, após o título e subtítulo, temos um botão com o texto "Get Started", que significa algo como "Iniciar". Ao clicá-lo, uma tela será aberta com algumas explicações de particularidades do Vite. O conteúdo está em Inglês, mas pode ser traduzido.

Vamos rolar a página até encontrar a seção "Scaffolding Your First Vite Project", que ensina como iniciamos o nosso primeiro projeto utilizando o Vite. Nos é informado que precisamos do Node.js, especificamente da versão 18 para cima, dependendo do template que será utilizado.

Também é informado que a base da criação de um projeto com o Vite, é o código npm create vite@latest. Na sequência, é explicado como podemos utilizar bibliotecas e frameworks com esse comando. Então, no nosso exemplo, vamos criar uma aplicação usando a versão 7 em diante.

Nesta documentação, temos o comando npm create vite@latest my-vue-app -- --template vue. Neste comando, utiliza-se o vue porque é um exemplo. Na sequência, usa-se --template e o nome da tecnologia. Vamos ver na prática como isso funciona?

No explorador de arquivos do computador, vamos procurar um local onde possamos colocar essa aplicação. Aqui, optaremos por uma pasta chamada dev, dentro de documentos, mas fique à vontade para salvar no local de sua preferência.

Dentro da pasta dev, clicaremos com o botão direito do mouse e vamos em "Abrir no terminal". Com o terminal aberto, vamos minimizar a pasta dev para olhar a documentação do Vite, pois é importante ter essa anotação do que precisamos escrever no terminal.

Seguindo o exemplo da documentação, vamos digitar o comando npm create vite@latest. Em seguida, colocaremos o nome codeconnect e -- --template react.

npm create vite@latest -- --template react

Neste comando, usamos o npm para utilizar o Node Pack Manager e conseguir instalar dependências. Depois, com o comando create, criaremos uma aplicação utilizando vite@latest, ou seja, a última versão do Vite no momento que estamos construindo esse projeto. Na sequência, definimos qual é o nome da nossa aplicação. No exemplo da documentação, era my-vue-wapp, e no nosso caso, codeconnect.

Em seguida, colocamos --, que precisamos utilizar quando estamos utilizando o NPM 7 para cima, conforme consta na documentação. Depois, especificamos que queremos utilizar um template, ou seja, uma definição de estrutura de arquivos e pastas já criada, e definimos a tecnologia que será utilizada. Em nosso caso, a tecnologia é o React.

Vamos executar este comando teclando "Enter". Ao fazer isso, aparecerá uma série de dados no terminal, o que significa que vários arquivos estão sendo gerados.

Entre as informações do terminal, nos é dito que precisamos executar alguns comandos. O primeiro deles é cd codeconnect. Com ele, podemos visualizar que o caminho de pastas que tem no terminal, agora apresenta uma barra: /codeconnect. Isso significa que abrimos essa pasta codeconnect e estamos construindo comandos dentro dela.

Na sequência, vamos executar o comando npm install, que deve instalar todas as dependências necessárias para fazer o projeto React. Então, existem várias bibliotecas e ferramentas que precisam ser instaladas para o ambiente ser configurado adequadamente. Vamos aguardar a finalização.

Feito isso, as nossas dependências do projeto React foram instaladas com sucesso!

Agora, precisamos executar o comando npm run dev. Ao executá-lo, algumas informações aparecerão no terminal, da seguinte maneira:

Local: http://127.0.0.1:5173/

Network: use --host to expose

press h + enter to show help

Este "Local", que possui uma URL "http://127.0.0.1:5173/", significa que ele está fazendo um servidor local para nós, onde conseguiremos visualizar todas as nossas alterações em tempo real. Por padrão, quando criamos a estrutura de projeto utilizando o Vite, ele também já tem um exemplo de código, e podemos acessar essa URL para visualizar o que aconteceu.

Para isso, vamos copiá-la e colar no navegador. Ao acessá-la, aparece na tela o logo das duas tecnologias (Vite e React), seguidas do texto "Vite + React" e um contador que incrementa o valor conforme clicamos sobre ele.

Então, já construímos a base desse projeto e podemos abrir no VS Code para visualizar todas as estruturas de pastas geradas com o Vite. No próximo vídeo, vamos analisar essa estrutura e entender cada coisa que o Vite faz para facilitar a construção de um projeto React.

Iniciando o projeto - Estrutura de pastas

Vamos entender o que o Vite fez para facilitar a criação deste projeto em React?

Primeiro, vamos para o explorador de arquivos do computador, especificamente na pasta dev. Note que dentro dela há uma pasta chamada codeconnect, assim como construímos no comando do terminal.

Agora, vamos abrir essa pasta, clicar com o botão direito do mouse e selecionar a opção "Abrir no Terminal". Nesse terminal, vamos executar code . para abrir o VS Code com esse projeto. Existem várias maneiras de abrir o projeto no VS Code e essa é uma delas, mas você pode fazer como preferir.

Com o projeto abeto no VS Code, vamos observar o explorador de arquivos, que fica à esquerda. Note que há muitos arquivos e pastas. Vamos entender essas pastas agora.

A primeira pasta que conseguimos visualizar é node_modules. Ao abri-la, vemos que há várias subpastas. Basicamente, essa pasta lista todas as tecnologias externas que estamos utilizando em nosso projeto como, por exemplo, o Babel, que faz toda a tradução do conteúdo de um projeto React para o navegador conseguir entender e imprimir na tela.

Então, todas as dependências e bibliotecas que instalarmos no projeto para utilizar, ficarão dentro da pasta node_modules. Ela é uma pasta grande, geralmente muito pesada. Pensando nisso, ao colocar esse projeto em um repositório, precisamos nos ater ao aviso de não incluí-la. Isso, porque, quando executarmos o comando npm install, que vimos no vídeo anterior, importaremos tudo o que estiver dentro do projeto e precisa ser utilizado, criando uma nova pasta node_modules.

A próxima pasta que temos aqui é a public. Nela, podemos colocar algumas imagens, funções e outras coisas que podem ser utilizadas no projeto inteiro. Um exemplo é o arquivo vite.svg. Se abrirmos, aparecerá apenas um código, mas, basicamente, se trata da logo do Vite no formato SVG. Uma dica do que podemos colocar dentro dessa pasta public são imagens estáticas que serão reutilizadas em vários locais do projeto. No caso, temos o logo do Vite como padrão.

Depois, temos a pasta src. Nela, temos vários arquivos que, posteriormente, entenderemos a funcionalidade. Mas, basicamente, colocamos nela tudo que será renderizado, toda a lógica e tudo que vamos codificar.

Agora que conhecemos as três pastas principais do nosso projeto React, vamos explorá-las para entender o que são cada um desses arquivos.

Sobre o curso React: configurando e estruturando projetos com Vite

O curso React: configurando e estruturando projetos com Vite possui 121 minutos de vídeos, em um total de 44 atividades. Gostou? Conheça nossos outros cursos de React em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Iniciando o projeto
• Construíndo componentes
• Gerenciando estados
• Criando requisições
• Compartilhando a aplicação