Listas no React - Como posso utilizar no meu projeto?

Neste artigo, você aprenderá a usar Listas no React e como elas podem agilizar o desenvolvimento de várias aplicações web. Esse recurso tem um papel fundamental ao permitir a reutilização de listas distintas ou iguais em qualquer componente criado.

Listas são elementos importantes em muitas aplicações web, e o React (junto com o JavaScript) oferece uma maneira fácil e eficaz de criá-las e utilizá-las. Com as Listas no React, você pode gerar listas de elementos que podem ser renderizadas em seu aplicativo web. Além disso, as Listas no React são altamente personalizáveis e podem ser usadas para criar uma variedade de componentes, como menus, tabelas e muito mais.

Ao usar Listas no React, você pode economizar tempo e esforço em seu desenvolvimento de aplicativos web, pois pode reutilizar listas em diferentes componentes. Além disso, as Listas no React permitem que você crie componentes mais modulares e fáceis de manter, ajudando a tornar seu código mais limpo e organizado.

Neste artigo, você também aprenderá como criar Listas no React e como elas podem ser personalizadas para atender às suas necessidades específicas.

Então, vamos começar a aprender como utilizar as Listas no React em seu projeto na prática!

Requisitos desejáveis

• Conhecimento intermediário/avançado em JavaScript;
• Conhecimento básico em CSS ou em algum outro pré-processador CSS (como SASS, por exemplo);
• Conhecimento básico em React.
  

Requisitos obrigatórios

VS Code: Certifique-se de ter o Visual Studio Code instalado em sua máquina. Ele é uma ferramenta de desenvolvimento de código-fonte popular e amplamente utilizada.

Node.js: O Node.js é necessário para executar os comandos NPM (gerenciador de pacotes) e NPX (execução de scripts). Se você ainda não possui o Node.js em seu sistema, você pode baixá-lo aqui. Ao fazer a instalação, tanto o Node.js quanto o NPM serão instalados automaticamente. Para verificar se eles foram instalados corretamente, siga estas etapas:

1. Abra o Visual Studio Code.
2. Abra o terminal do Visual Studio Code.
3. No terminal, execute o comando a seguir (sem as aspas): "node -v". Isso mostrará a versão atualmente instalada do Node.js.
4. Repita o mesmo procedimento para verificar a versão do NPM. Execute o comando a seguir no terminal (sem as aspas): "npm -v".
   

Iniciando o projeto com Vite

Observação: você pode nomear os arquivos e pastas do jeito que preferir, não é obrigatório a seguir totalmente a nomenclatura, mas por recomendação, aconselho que os nomes sejam iguais para evitar futuros conflitos e confusões.

Nesse projeto iremos usar o React integrado com o Vite. Para isso, crie uma pasta raíz chamada renderizarListaComReact. Em seguida, vamos acessá-la e criar nossa estrutura de pastas do React com Vite:

1) Abra o terminal e execute npm create vite@latest para criar um projeto Vite em sua versão mais atual.

2) Project name: listasReact. Package name: listareact. Framework: React. Variant: JavaScript.

3) Ainda no terminal, execute: cd listasReact e, em seguida, npm install.

4) As pastas do projeto estarão assim:

5) Por enquanto, não iremos usar alguns arquivos, então, vamos retirá-los do nosso projeto:

a) Excluir pasta assets;

b) Excluir arquivos App.css, index.css;

c) Apagar todo o conteúdo de dentro do arquivo App.jsx;

d) Apagar a linha 4 que contém import ./index.css dentro do arquivo main.jsx.

Criando a estrutura inicial

Dentro do arquivo App.jsx que está vazio, iremos criar a estrutura básica do projeto, ficando desta forma:

Criando a primeira lista

Nesse primeiro exemplo, vamos criar uma lista simples, que tem como objetivo renderizar uma lista de funcionários de alguma empresa. Para isso siga os passos:

1. Dentro da pasta src, crie uma pasta chamada listas e, dentro dela, crie uma nova pasta chamada funcionários.
   
2. Dentro do arquivo funcionários, vamos criar a lista que vai conter os nomes dos funcionários da empresa. A empresa possui 20 funcionários. O arquivo ficará assim:

Observação: em um contexto real, essa lista poderia vir de alguma API externa da empresa, na qual essa API possui os nomes e index de cada funcionário.

Renderizando a primeira lista

Agora que a lista de funcionários foi criada, é necessário renderizar cada nome e identificador de cada funcionário. Para isso, siga os passos:

1) No arquivo App.jsx iremos importar a lista de funcionários, dessa forma:

2) Agora que vem a mágica. Como estamos importando um array, teremos acesso a todos os métodos que um array possui como: push(), pop(), map(), shift() e uma série de métodos. Entretanto, vamos utilizar o método map(). Para saber mais sobre esse método, você pode clicar aqui.

a) Dentro da div vamos renderizar a lista dessa forma:

b) O que fizemos no código acima foi chamar o array funcionários e utilizar o método map() para selecionar, respectivamente, o nome e o index de cada funcionário. Agora, é necessário mostrar esses dados na tela. Para isso, basta seguir o código abaixo:

Dessa forma, estamos mostrando o nome do funcionário e seu identificador correspondente. Adicionei + 1 no index, pois o array inicia sua contagem no zero. Portanto, para visualizar essa renderização, execute o comando npm run dev no seu terminal.

Observação: nessa parte, os nomes podem ser diferentes por serem aleatórios, mas isso não está errado.

No navegador estará assim:

c) Como você pode ver, eu abri o console do meu navegador para mostrar sobre um aviso importante: as keys. Cada elemento deve ter uma key única para ser possível que o React consiga identificar e diferenciar cada elemento. Para corrigir isso, basta incluir a propriedade key no elemento h5 e o erro será resolvido.

Ficando dessa forma:

Pronto, agora você sabe o essêncial para renderizar uma lista usando React!

Renderizando uma lista mais completa

Agora que você aprendeu a base para renderizar listas no React, vamos avançar para um contexto mais frequente e bastante utilizado. Nesse exemplo, vamos utilizar uma lista que contém informações climáticas fictícias da cidade de São Paulo.

Observação: nesse exemplo que iremos ver, você vai perceber que seria possível utilizar no contexto de consumir APIs RESTful. Caso você saiba como consumir uma API usando React, fique à vontade para utilizar essa mesma ideia consumindo uma informação externa!

Criando lista climática

Observação: nessa etapa eu acrescentei um arquivo chamado “.prettierrc”, apenas para que ele possa fazer a formatação correta do meu código. Não é necessário incluí-lo em seu projeto! Se você quer conhecer mais sobre o Prettier, clique aqui.

Siga os passos:

1. Dentro da pasta listas, crie uma nova pasta chamada clima e, dentro dela, crie um arquivo chamado index.js.
   
2. Dentro desse novo arquivo index.js, adicione essa nova lista que é um array de objetos, que contém informações que iremos utilizar:

Analisando a lista climática

Como você pôde notar, o código anterior contém diversas informações e, no início, pode parecer um pouco confuso. Mas, vamos analisar por partes: a lista é um array de objetos e, em algumas propriedades, ela contém outro array de objetos. Vamos ver isso na prática:

No array de objetos que é referenciado pela variável clima, há uma propriedade chamada wheater. Esta propriedade retorna um novo array de objetos que inclui outras propriedades: id, main, description e icon. Observe a parte do código destacada em cor amarela.

Agora que analisamos essa questão, sabemos que em alguns momentos é necessário utilizar para acessar uma posição específica do array.

Renderizando a lista climática

Vamos começar a renderização de alguns dados desta lista. Para isso, siga estes passos:

1) No arquivo App.jsx, comente ou apague a linha de código da primeira lista que fizemos. Por aqui, após apagar o código, ficou assim:

2) Vamos importar a lista climática:

3) Usando o map() na lista. Nessa etapa, o map() vai pegar informações climáticas do array clima. Portanto, vamos passar como paramêtro da função map() o nome “infos” que se refere às informações que iremos capturar da lista.

Ficando assim:

Capturando e renderizando os dados

Seguindo o tema anterior, vamos exibir as seguintes informações: o nome da cidade e o código do país correspondente, no arquivo App.jsx:

1) Renderizando o nome da cidade e colocando a key. A key será identificada pela propriedade cod da lista clima:

2) Renderizando o código do país e da cidade:

Por enquanto, a tela está assim:

4) Agora, vamos acessar a propriedade weather da lista. Nessa etapa vamos ter que usar a lógica que foi comentada no tópico Analisando a lista climática para conseguirmos capturar os valores da propriedade weather, acessando a primeira e única posição do array, que no caso será a posição 0.

Ficando assim:

5) Nossa tela ficará assim:

Conclusão

Neste artigo, abordamos como utilizar listas no React, desde um exemplo simples até um exemplo mais complexo, que pode incluir diversos cenários, como uma resposta de uma API RESTful, como mencionado anteriormente. Além disso, discutimos detalhes importantes para renderizar listas, como a necessidade de uma chave única para cada elemento.

Com o exemplo de uma lista climática, pudemos visualizar como acessar informações específicas em um array de objetos. Você aprendeu como utilizar a função map(), que é muito útil para renderizar listas, além de ter visto como é possível acessar informações aninhadas em um objeto.

Espero ter contribuído ainda mais para o seu aprendizado em React. Lembre-se de que a prática é fundamental para o seu crescimento, então continue desenvolvendo seus projetos e aplicando o que aprendeu neste artigo.

Muito obrigado novamente por ler meu artigo. Até a próxima!