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

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.