Listas en React: ¿cómo utilizarlas en mi proyecto?

En este artículo, aprenderás cómo utilizar Listas en React y cómo pueden acelerar el desarrollo de varias aplicaciones web. Esta característica juega un papel fundamental al permitir la reutilización de listas iguales o diferentes en cualquier componente creado.

Las listas son elementos importantes en muchas aplicaciones web y React (junto con JavaScript) ofrece una manera fácil y efectiva de crearlas y usarlas. Con Listas en React, puede generar listas de elementos que se pueden representar en su aplicación web. Además, las listas en React son altamente personalizables y se pueden usar para crear una variedad de componentes como menús, tablas y más.

Al utilizar Listas en React, ahorras tiempo y esfuerzo en el desarrollo de tu aplicación web, ya que puedes reutilizar listas en diferentes componentes. Además, las listas en React permiten crear componentes más modulares y fáciles de mantener, lo que ayuda a que tu código sea más limpio y organizado.

En este artículo, también aprenderás cómo crear listas en React y cómo pueden personalizarse para satisfacer necesidades específicas.

Entonces, ¡comencemos a aprender cómo usar Listas en React en tu proyecto en la práctica!

Requisitos deseables

• Conocimiento intermedio/avanzado en JavaScript;
• Conocimiento básico en CSS o en algún otro preprocesador CSS (como SASS, por ejemplo);
• Conocimiento básico en React.
  

Requisitos obligatorios

VS Code: Asegúrate de tener Visual Studio Code instalado en tu equipo. Es una herramienta de desarrollo de código fuente popular y ampliamente utilizada.

Node.js: Se requiere Node.js para ejecutar comandos NPM (administrador de paquetes) y NPX (ejecución de scripts). Si aún no tienes Node.js en tu sistema, puedes descargarlo aquí. Node.js como NPM se instalarán automáticamente. Para verificar que se instalaron correctamente, sigue estos pasos:

1. Abre Visual Studio Code.
2. Abre la terminal de Visual Studio Code.
3. Ejecuta el comando node -v. Esto mostrará la versión actualmente instalada de Node.js.
4. Repite el mismo procedimiento para verificar la versión de NPM. Ejecuta el siguiente comando: npm -v.
   

Iniciando el proyecto con Vite

Nota: puedes nombrar los archivos y carpetas como prefieras. No es obligatorio seguir la nomenclatura al completo, pero como recomendación te aconsejo que los nombres sean los mismos para evitar futuros conflictos y confusiones.

En este proyecto usaremos React integrado con Vite. Para hacer esto, crea una carpeta raíz llamada renderizarListaComReact. A continuación, accedamos a él y creemos nuestra estructura de carpetas de React con Vite:

1) Abre la terminal y ejecuta npm create vite@latest para crear un proyecto Vite en su versión más actual.

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

3) Todavía en la terminal, ejecuta: cd listasReact y, enseguida, npm install.

4) Las carpetas del proyecto lucirán así:

5) Por ahora, no usaremos algunos archivos, así que eliminémoslos de nuestro proyecto:

a) Eliminar la carpeta assets;

b) Eliminar los archivos App.css, index.css;

c) Eliminar todo el contenido del archivo App.jsx;

d) Eliminar la línea 4 que contiene import ./index.css dentro del archivo main.jsx.

Creando la estructura inicial

Dentro del archivo App.jsx que está vacío, crearemos la estructura básica del proyecto, luciendo así:

Creando la primera lista

En este primer ejemplo, crearemos una lista simple, cuyo objetivo es representar una lista de empleados de alguna empresa. Para hacer esto, sigue estos pasos:

1. Dentro de la carpeta src, crea otra llamada listas y, dentro de ella, crea una nueva llamada funcionarios.
   
2. Dentro del archivo funcionarios, creamos la lista que contendrá los nombres de los empleados de la empresa. La empresa tiene 20 empleados. El archivo se verá así:

Nota: en un contexto real, esta lista podría provenir de alguna API externa de la empresa. Esta API tiene los nombres e índice de cada empleado.

Renderizando la primera lista

Ahora que se ha creado la lista de empleados, debes representar el nombre y el identificador de cada empleado. Para hacer esto, sigue los pasos:

1) En el archivo App.jsx importaremos la lista de funcionarios:

2) Ahora viene la magia. Como estamos importando un array, tendremos acceso a todos los métodos que un array posee como: push(), pop(), map(), shift() y una serie de métodos. Entre tanto, vamos a utilizar el método map(). Para saber más sobre ese método, haz clic aquí.

a) Dentro de la div vamos a renderizar la lista de esta forma:

b) Lo que hicimos en el código arriba fue llamar al array funcionarios y utilizar el método map() para seleccionar, respectivamente, el nombre e índice de cada empleado. Ahora, necesitas mostrar estos datos en la pantalla. Para hacer esto, simplemente sigue este código:

De esa forma, estamos mostrando el nombre del funcionario y su identificador correspondiente. Añadí + 1 en el índice porque el array inicia su cuenta en cero. Por lo tanto, para visualizar esta renderização, ejecuta el comando npm run dev.

Nota: en esta parte, los nombres pueden ser diferentes porque son aleatorios, pero eso no está mal.

El navegador lucirá así:

c) Como puedes ver, abrí la consola de mi navegador para mostrar una advertencia importante: keys. Cada elemento debe tener una key única para posibilitar que React consiga identificar y diferenciar cada elemento. Para corregir eso, basta incluir la propiedad key en el elemento h5 y se resolverá el error.

Quedaría así:

Bien, ¡ahora conoces los conceptos básicos de renderizar una lista usando React!

Renderizando una lista más completa

Ahora que has aprendido lo básico para representar listas en React, pasemos a un contexto más frecuente y ampliamente utilizado. En este ejemplo, usaremos una lista que contiene información climática ficticia para la ciudad de São Paulo.

Nota: en este ejemplo que veremos, te darás cuenta de que sería posible utilizarlo en el contexto de consumir API RESTful. Si sabes cómo consumir una API usando React, ¡no dudes en utilizar esta misma idea consumiendo información externa!

Creando la lista climática

Nota: en este paso, agregué un archivo llamado .prettierrc, solo para que pueda formatear mi código correctamente. ¡No es necesario incluirlo en tu proyecto! Si quieres saber más sobre Prettier, haz clic aquí.

Sigue estos pasos:

1. Dentro de la carpeta listas, crea una nueva llamada clima y, dentro de ella, genera un archivo llamado index.js.
   
2. Dentro de ese nuevo archivo index.js, agrega esta nueva lista, que es un array de objetos que contienen información que utilizaremos:

Analizando la lista climática

Como puedes ver, el código anterior contiene mucha información y, al principio, puede parecer un poco confuso. Pero analicémoslo por partes: la lista es un array de objetos e, en algunas propiedades, contiene otro array de objetos. Vamos a ver eso en la práctica:

En el array de objetos referenciado por la variable clima, hay una propiedad llamada wheater. Esta propiedad retorna un nuevo array de objetos que incluye otras propiedades: id, main, description y icon.

Ahora que hemos analizado este tema, sabemos que en ocasiones es necesario utilizarlo para acceder a un puesto específico en el array.

Renderizando la lista climática

Comencemos a renderizar algunos datos de esta lista. Para hacerlo, sigue estos pasos:

1) En el archivo App.jsx, comenta o elimina la línea de código de la primera lista que hicimos. Aquí, después de eliminar el código, se veía así:

2) Vamos a importar la lista climática:

3) Usamos map() en la lista. En esta etapa, map() vaa a tomar información climática del array clima. Por lo tanto, vamos a pasar como parámetro de la función map() el nombre infos, que se refiere a la información que capturaremos de la lista.

Quedará así:

Capturando y renderizando los datos

Siguiendo el tema anterior, desplegaremos la siguiente información: el nombre de la ciudad y el código de país correspondiente en el archivo App.jsx:

1) Renderizar el nombre de la ciudad y colocando la key. La key será identificada por la propiedad cod de la lista clima:

2) Renderizar el código del país y ciudad:

La pantalla quedará así:

4) Ahora, vamos a acceder a la propiedad weather de la lista. En esta etapa, usaremos la lógica del apartado Analizando la lista climática para capturar los valores de la propiedad weather, accesando a la primera y única posición del array, que en este caso será la posición 0.

Queda así:

5) Así lucirá la pantalla:

Conclusión

En este artículo, cubrimos cómo usar listas en React, desde un ejemplo simple hasta un ejemplo más complejo, que puede incluir diferentes escenarios, como una respuesta de una API RESTful. Además, analizamos detalles importantes para representar listas, como la necesidad de una clave única para cada elemento.

Con el ejemplo de una lista climática, pudimos visualizar cómo acceder a información específica en una variedad de objetos. Aprendiste a usar la función map(), lo cual es muy útil para renderizar listas, así como ver cómo es posible acceder a información anidada en un objeto.

Espero haber contribuido aún más a tu aprendizaje en React. Recuerda que la práctica es fundamental para tu crecimiento, así que continúa desarrollando tus proyectos y aplicando lo aprendido en este artículo.

¡Hasta luego!