Loops em React JSX: Um mergulho profundo no básico

texto

Loops são importantes em programação, pois eles podem executar operações em segundos enquanto reduzem longas linhas de código. Neste blog, aprenderemos os fundamentos do Loops in React JSX e como eles são usados praticamente.

O que é JSX?

JSX é apenas uma extensão de sintaxe JavaScript e significa XML JavaScript. Podemos escrever código HTML diretamente no React no código JavaScript. É mais rápido que o JavaScript normal porque realiza otimização enquanto converte para o JavaScript normal.

Exemplo de código JSX

const handleButton = () => {
  alert('Hello, Welcome to loop Tutorial')
}

return (
  <div>
    <button onClick={() => handleButton()} title="submit">Click Me</button>
  </div>
)

Como renderizar loops no React JSX?

Loops em JSX oferecem uma maneira rápida e fácil de realizar algo repetidamente. Para resolver isso, veremos 5 formas diferentes de loops usados para renderizar elementos no React JSX.

Map

Você pode iterar sobre um objeto usando o método de map. Você pode usar esse método para renderizar o mesmo componente repetidamente. Vamos entender por um exemplo.

import React from 'react'

const App = () => {
  const users = ['Rahul', 'Shivam', 'Ayesha', 'Akash', 'Poonam'];
  
  return (
    <div>
      <ul>
        <li>
          {users.map((names, i) => {
            return (
              <li key={i}>{names}</li>
            )
          })}
        </li>
      </ul>
    </div>
  )
}

export default App;

For

Os usuários podem usar o loop padrão for para criar o elemento. Aqui você deve usar a função length para fornecer o último ponto do loop.

import React from 'react'

const App = () => {
  const users = [
    { id: 1, Name: 'Rahul' },
    { id: 2, Name: 'Shivam' },
    { id: 3, Name: 'Ayesha' },
    { id: 4, Name: 'Akash' },
    { id: 5, Name: 'Poonam' }
  ];

  const displayUser = (users) => {
    let name = [];
    for (let i = 0; i < users.length; i++) {
      name.push(<li key={users[i].id}>{users[i].Name}</li>);
    }
    return name;
  }

  return (
    <div>
      <ul>
        {displayUser(users)}
      </ul>
    </div>
  )
}

export default App;

forEach

O método forEach é usado para executar uma função em cada elemento do array.

import React from 'react'

const App = () => {
  const users = [
    { id: 1, Name: 'Rahul' },
    { id: 2, Name: 'Shivam' },
    { id: 3, Name: 'Ayesha' },
    { id: 4, Name: 'Akash' },
    { id: 5, Name: 'Poonam' }
  ];

  const name = [];

  users.forEach((user) => {
    name.push(<li key={user.id}>{user.Name}</li>);
  });

  return (
    <div>
 
     

For-in:

O loop for-in é usado para iterar sobre as propriedades de um objeto JavaScript. Este loop pode ser usado com a API de objeto de iteração ou com a API de matriz.

import React from 'react'
const App = () => {
  const user = {id: 1, Name: 'Rahul', Age: 25, Country: 'India'};
  const properties = [];
  for (let key in user) {
    properties.push(<li key="{key}">{user[key]}</li>);
  }
  return <div><ul>{properties}</ul></div>;
}
export default App;

For-of:

O loop for-of é usado para iterar sobre os valores de uma matriz, uma string ou um objeto iterável. Este loop é usado quando você deseja acessar os valores de um objeto JavaScript, em vez de suas propriedades.

import React from 'react'
const App = () => {
  const user = ['Rahul', 'Shivam', 'Ayesha', 'Akash', 'Poonam'];
  const names = [];
  for (let name of user) {
    names.push(<li key="{name}">{name}</li>);
  }
  return <div><ul>{names}</ul></div>;
}
export default App;

Conclusão

Os loops são uma parte importante da programação em JavaScript e também são usados no desenvolvimento do React. O uso de loops pode ajudar a acelerar o desenvolvimento e reduzir a quantidade de código que você precisa escrever. Neste post, vimos como usar loops para renderizar elementos em JSX no React e examinamos vários métodos diferentes, incluindo map(), for(), forEach(), for-in e for-of.

Espero que este post tenha sido útil para você e que você possa aplicar esses conceitos em seus próprios projetos de desenvolvimento do React.

Desafio

Claro, vou criar um pequeno desafio para você:

Crie uma função em JavaScript que receba como parâmetro um array de números inteiros e retorne a soma de todos os números pares do array.

Dica: utilize o método reduce() para somar os números pares.

Só um detalhe: como neste caso vc está criando um novo array, no qual cada elemento é o resultado do processamento do respectivo elemento no array original, então acredito que map seria o mais adequado, afinal ele é feito pra isso (para cada elemento do array, faz algo e retorna outro array com os resultados). Ou então o for "tradicional" mesmo (ou for..of, que pessoalmente tenho preferido quando não preciso dos índices, somente dos valores).

Se bem que os exemplos não são equivalentes: no map vc usa o índice do elemento como key, nos outros usa propriedades do objeto, no for..in vc itera por todas as propriedades de um único usuário (em vez de ter um array de usuários), e no for..of o próprio nome é usado como key. Mas enfim...


Lembrando também que existem diferenças sutis entre o for "tradicional", for..in e for..of - veja aqui e aqui. Em muitos casos pode não fazer diferença, mas é importante saber esses detalhes para não ser pego de surpresa em determinadas situações.


Quanto a usar reduce para somar os números, tenho minhas ressalvas. Eu acho que nesse caso é um canhão pra matar mosca, e ainda prefiro um loop simples. reduce tem seus usos, claro, mas percebo um certo abuso dele. Mas pelo jeito sou exceção, parece que "o mercado" pensa diferente...

muito boa observação! o intuito do post foi mesmo mostrar varias formas de fazer a mesma coisa e mostrar que não só tem uma forma de fazer algo, o desafio foi mais para quem nunca usou ter uma noção que o método existe e em desafios para vagas normalmente ajuda muito saber.