Cómo Hacer Un Bucle For en React (JSX)

4 minuto(s)

En esta página:

Cuando estamos trabajando con la librería React, necesitamos hacer un bucle For.

Hacerlo es fácil, solo debes seguir ciertos pasos.

En este tutorial aprenderás a Cómo Hacer Un Bucle For en React (JSX), vamos con ello.

Haciendo Un Bucle For en React (JSX)

Vamos a realizar un ejemplo base.

Para que se te haga fácil comprenderlo.

Creación de proyecto

Creamos un nuevo proyecto usando la popular herramienta Vite JS.

Ejecutamos el siguiente comando para crear el proyecto:


# Comando para crear el proyecto
npm create vite@latest react-bucle-form 

> npx
> create-vite react-bucle-form

# Elegimos React 
? Select a framework: » - Use arrow-keys. Return to submit.
    Vanilla
    Vue
>   React
    Preact
    Lit
    Svelte
    Solid
    Qwik
    Angular
    Others
√ Select a framework: » React

# Elegimos la variante 
? Select a variant: » - Use arrow-keys. Return to submit.
    TypeScript
    TypeScript + SWC
    JavaScript
>   JavaScript + SWC
    Remix ↗
√ Select a variant: » JavaScript + SWC

# El proyecto ha sido creado 
Scaffolding project in D:\contenidos\nc\tutoriales\blog\react-microfrontend\react-bucle-form...

Done. Now run:

  cd react-bucle-form
  npm install
  npm run dev

# Comando para crear el proyecto

npm create vite@latest react-bucle-form

> npx

> create-vite react-bucle-form

# Elegimos React

? Select a framework: » - Use arrow-keys. Return to submit.

Vanilla

Vue

> React

Preact

Lit

Svelte

Solid

Qwik

Angular

Others

√ Select a framework: » React

# Elegimos la variante

? Select a variant: » - Use arrow-keys. Return to submit.

TypeScript

TypeScript + SWC

JavaScript

> JavaScript + SWC

Remix ↗

√ Select a variant: » JavaScript + SWC

# El proyecto ha sido creado

Scaffolding project in D:\contenidos\nc\tutoriales\blog\react-microfrontend\react-bucle-form...

Done. Now run:

cd react-bucle-form

npm install

npm run dev

Si te fijas, al final he elegido la variante JavaScript + SWC.

En este artículo te explico porque la variante JavaScript + SWC, es la mejor variante que podemos elegir para un proyecto de React con Vite.

Datos a Usar

Lo ideal es tratar a los datos a los cuales queremos pasarle el bucle for, como un array o matriz de datos.

Entonces considera primero tener tus datos convertidos a array.

Vamos a usar una lista de lenguajes de programación.

Cada lenguaje tiene un id, nombre y creador.

Estos datos también los puedes colocar en un archivo aparte:


// Array de datos 
const lenguajes = [{
    id: 0, 
    nombre: "C",
    creador: "Dennis Ritchie"
  }, {
    id: 1, 
    nombre: "Java",
    creador: "James Gosling"
  }, {
    id: 2, 
    nombre: "PHP",
    creador: "Rasmus Lerdorf"
  }, {
    id: 3, 
    nombre: "Python",
    creador: "Guido van Rossum"
  }, {
    id: 4, 
    nombre: "JavaScript",
    creador: "Brendan Eich"
  }, {
    id: 5, 
    nombre: "Ruby",
    creador: "Yukihiro Matsumoto"
  }
];

// Array de datos

const lenguajes = [{

id: 0,

nombre: "C",

creador: "Dennis Ritchie"

}, {

id: 1,

nombre: "Java",

creador: "James Gosling"

}, {

id: 2,

nombre: "PHP",

creador: "Rasmus Lerdorf"

}, {

id: 3,

nombre: "Python",

creador: "Guido van Rossum"

}, {

id: 4,

nombre: "JavaScript",

creador: "Brendan Eich"

}, {

id: 5,

nombre: "Ruby",

creador: "Yukihiro Matsumoto"

}

];

Tu array o matriz puede tener más datos.

Sabías que la empresa Amazon usa la librería React en sus proyectos.

Haciendo el bucle For en React

Ahora hacemos el bucle para recorrer los datos.

En React la forma más conveniente de hacer un bucle for es mediante el método map() de JavaScript.

Creamos una variable llamada items, tu le puedes colocar el nombre que desees.

Dentro de la variable items llamamos a la variable lenguajes, la cual tiene los datos a recorrer.

Le pasamos el método .map() a la variable lenguaje.

Le asignamos el id de cada dato como key.

Imprimimos el nombre del lenguaje y el creador:


// Bucle for en React '.map()' 
const items = lenguajes.map(lenguaje =>
  <li key={lenguaje.id}>
    <p>
      {lenguaje.nombre} ({lenguaje.creador})
    </p>
  </li>
);

// Bucle for en React '.map()'

const items = lenguajes.map(lenguaje =>

<p>

{lenguaje.nombre} ({lenguaje.creador})

</p>

</li>

);

Ahora pasemos a mostrar los datos en la vista.

Mostrando los Datos

Por último mostramos el resultado en el Front.

Llamamos a la variable items y la colocamos en una lista desordenada <ul></ul>:


// Mostramos los datos en la vista
return (
  <>
    <div>
      <h1>Lenguajes de programación</h1>
      <ul>{items}</ul>
    </div>
  </>
);

// Mostramos los datos en la vista

return (

<div>

<h1>Lenguajes de programación</h1>

<ul>{items}</ul>

</div>

</>

);

Iniciamos el servidor de desarrollo de Vite:


npm run dev

VITE v5.4.11  ready in 248 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

npm run dev

VITE v5.4.11 ready in 248 ms

➜ Local: http://localhost:5173/

➜ Network: use --host to expose

➜ press h + enter to show help

Si abrimos la ruta local http://localhost:5173/ en el navegador.

Podemos ver que los datos se muestran sin problemas:

Bucle for realizado correctamente en React — También puedes mostrar imágenes con un bucle for en React

Tú puedes mostrar los datos que desees.

Código completo del proyecto

A continuación te dejo todo el código del archivo App.jsx:


/* 
import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg' 
*/

import './App.css'

function App() {

  // Array de datos 
  const lenguajes = [{
    id: 0, 
    nombre: "C",
    creador: "Dennis Ritchie"
  }, {
    id: 1, 
    nombre: "Java",
    creador: "James Gosling"
  }, {
    id: 2, 
    nombre: "PHP",
    creador: "Rasmus Lerdorf"
  }, {
    id: 3, 
    nombre: "Python",
    creador: "Guido van Rossum"
  }, {
    id: 4, 
    nombre: "JavaScript",
    creador: "Brendan Eich"
  }, {
    id: 5, 
    nombre: "Ruby",
    creador: "Yukihiro Matsumoto"
  }];  
  
  // Bucle for en React '.map()' 
  const items = lenguajes.map(lenguaje =>
    <li key={lenguaje.id}>
      <p>
        {lenguaje.nombre} ({lenguaje.creador})
      </p>
    </li>
  );

  // Mostramos los datos en la vista
  return (
    <>
      <div>
        <h1>Lenguajes de programación</h1>
        <ul>{items}</ul>
      </div>
    </>
  );  

}

export default App