Arreglos en JSX

Estoy tomando un curso para aprender lo basico de REACT, y hoy quiero compartir como crear un arreglo (parecido a lo que seria una lista en Python) con JSX.

Este es el codigo:

import React from 'react';
import ReactDOM from 'react-dom';

const jugadores = ['Jordan', 'Bird', 'Magic'];

const JSX = (
  <>
    <div>
      <h1>Estos son los mejores basketbolistas</h1>
      <ul>
        {jugadores.map((jugador, index) => <li key={index}>{jugador}</li>)}
      </ul>
    </div>

  </>
);

ReactDOM.render(JSX, document.getElementById('root'));

Explicacion:

Importaciones:

• import React from ‘react’;: Importa la biblioteca principal de React.
• import ReactDOM from ‘react-dom’;: Importa el módulo ReactDOM, que se utiliza para renderizar componentes React en el DOM.

Array de jugadores:

const jugadores = ['Jordan', 'Bird', 'Magic'];

• Define un array llamado jugadores que contiene los nombres de algunos jugadores de baloncesto.

JSX

const JSX = (
  <>
    <div>
      <h1>Estos son los mejores basketbolistas</h1>
      <ul>
        {/* Mapeo de los nombres de jugadores para crear elementos de lista */}
        {jugadores.map((jugador, index) => <li key={index}>{jugador}</li>)}
      </ul>
    </div>
  </>
);

• Crea un fragmento (<> … ) que envuelve la estructura JSX. Los fragmentos son utilizados cuando necesitas devolver varios elementos sin agregar nodos adicionales al DOM.
• Contiene un <div> que engloba un encabezado<h1> y una lista no ordenada (<ul>) que se genera utilizando el método map en el array jugadores. Cada nombre de jugador se representa como un elemento de lista <li> . El atributo key={index} se utiliza para dar a cada elemento de la lista una clave única, lo cual es importante cuando se trabaja con listas en React.

ReactDOM.render:

• Utiliza ReactDOM para renderizar el JSX en el elemento con el ID ‘root’ en el DOM. Este es un punto de entrada común para las aplicaciones React.

Resumen

• En resumen, este código representa una aplicación simple de React que muestra una lista de los mejores jugadores de baloncesto utilizando componentes JSX y el método map para iterar sobre un array de datos.

Y esta es la salida: