Title: Actividad 18: Tablas con MUI, Arrays de Objetos y uso de .map() en JSX
Course: 2025 - LI - Desarrollo Web del Lado del Servidor 2-2 > Section: Unidad III - Framework de Desarrollo del Lado del Cliente

Introducción

En JavaScript, un Array (arreglo) es una lista donde podemos guardar varios datos juntos. Esta lista incluye funciones especiales llamadas métodos, que nos ayudan a recorrer, buscar, transformar y modificar la información. Algunos métodos comunes son:

- .push() → agrega un elemento al final del arreglo
- .pop() → elimina el último elemento
- .find() → encuentra el primer elemento que cumpla cierta condición
- .filter() → genera un nuevo arreglo con elementos que cumplan la condición
- .map() → transforma cada elemento y regresa un nuevo arreglo
- .forEach() → recorre cada elemento, pero no regresa nada
- .slice() → copia una parte del arreglo
- .includes() → verifica si un valor existe en el arreglo

En React, uno de los métodos más importantes es .map(), porque nos permite convertir cada elemento del arreglo en una etiqueta JSX.
Esto significa que podemos tomar una lista de objetos y convertirlos directamente en filas de una tabla, tarjetas, listas, etc.

Ejemplo simple de cómo funciona .map():

const frutas = ["Manzana", "Pera", "Mango"];

const lista = frutas.map((fruta) => {
  return "Me gusta la " + fruta;
});

// Resultado:
// ["Me gusta la Manzana", "Me gusta la Pera", "Me gusta la Mango"]


En React, el resultado normalmente se “pinta” así:

<ul>
  {frutas.map((fruta, index) => (
    <li key={index}>{fruta}</li>
  ))}
</ul>


Por eso en esta actividad aprenderás a convertir un arreglo de personas en una tabla usando .map().

1) Objetivo

Que practiques:

- La creación de arreglos de objetos en JavaScript.
- El uso del método .map() dentro de JSX.
- La construcción de una tabla con la librería MUI.
- La instalación y uso de MUI dentro de un proyecto de React.

2) Instrucciones

A) Preparación del proyecto

1. Abre tu proyecto de React (Vite o Create React App).
2. Asegúrate de que el proyecto corre sin errores:
  - Vite → npm run dev
  - CRA → npm start

B) Instalación de MUI usando Node

Ejecuta estos comandos en tu terminal dentro del proyecto:

1. Instalar MUI:

npm install @mui/material @emotion/react @emotion/styled


2. Instalar íconos (opcional pero útil):

npm install @mui/icons-material


3. (Solo si lo requieres) DataGrid:

npm install @mui/x-data-grid


C) Crea el arreglo de personas

1. Crea un arreglo llamado personas con mínimo 5 objetos.
2. Cada objeto debe contener:
  - nombre (String)
  - apellido (String)
  - edad (Number)
3. Debe haber al menos 2 personas menores de edad (≤17).

Ejemplo de estructura:

const personas = [
  { nombre: "Ana", apellido: "López", edad: 16 },
  { nombre: "Luis", apellido: "Ramírez", edad: 21 },
  { nombre: "Carlos", apellido: "Mora", edad: 17 },
  { nombre: "Elena", apellido: "Silva", edad: 23 },
  { nombre: "María", apellido: "Torres", edad: 19 }
];


D) Construye la tabla con MUI

1. Importa los componentes necesarios:

import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import Paper from "@mui/material/Paper";


1. Usa el ejemplo oficial de MUI:
https://mui.com/material-ui/react-table/
2. Crea las columnas:

- Nombre
- Apellido
- Edad

E) Llena la tabla usando .map()

En el TableBody, genera las filas dinámicamente:

<TableBody>
  {personas.map((persona, index) => (
    <TableRow key={index}>
      <TableCell>{persona.nombre}</TableCell>
      <TableCell>{persona.apellido}</TableCell>
      <TableCell>{persona.edad}</TableCell>
    </TableRow>
  ))}
</TableBody>


F) Verifica

- La tabla funciona correctamente.
- Los datos se muestran sin errores.
- Al menos 2 personas son menores de edad.

3) Método de entrega

Sube un PDF que incluya:

- Nombre, grupo y materia.
- Captura de pantalla de la tabla funcionando.
- Código del arreglo personas.
- Código completo del componente con MUI y .map().
- Una breve explicación (3–5 renglones) de lo que aprendiste sobre:
  - Arrays
  - .map()
  - Tablas con MUI

Entrega obligatoria en PDF.

Introducción

En JavaScript, un Array (arreglo) es una lista donde podemos guardar varios datos juntos. Esta lista incluye funciones especiales llamadas métodos, que nos ayudan a recorrer, buscar, transformar y modificar la información. Algunos métodos comunes son:

- .push() → agrega un elemento al final del arreglo
- .pop() → elimina el último elemento
- .find() → encuentra el primer elemento que cumpla cierta condición
- .filter() → genera un nuevo arreglo con elementos que cumplan la condición
- .map() → transforma cada elemento y regresa un nuevo arreglo
- .forEach() → recorre cada elemento, pero no regresa nada
- .slice() → copia una parte del arreglo
- .includes() → verifica si un valor existe en el arreglo

En React, uno de los métodos más importantes es .map(), porque nos permite convertir cada elemento del arreglo en una etiqueta JSX.
Esto significa que podemos tomar una lista de objetos y convertirlos directamente en filas de una tabla, tarjetas, listas, etc.

Ejemplo simple de cómo funciona .map():

const frutas = ["Manzana", "Pera", "Mango"];

const lista = frutas.map((fruta) => {
  return "Me gusta la " + fruta;
});

// Resultado:
// ["Me gusta la Manzana", "Me gusta la Pera", "Me gusta la Mango"]


En React, el resultado normalmente se “pinta” así:

<ul>
  {frutas.map((fruta, index) => (
    <li key={index}>{fruta}</li>
  ))}
</ul>


Por eso en esta actividad aprenderás a convertir un arreglo de personas en una tabla usando .map().

1) Objetivo

Que practiques:

- La creación de arreglos de objetos en JavaScript.
- El uso del método .map() dentro de JSX.
- La construcción de una tabla con la librería MUI.
- La instalación y uso de MUI dentro de un proyecto de React.

2) Instrucciones

A) Preparación del proyecto

1. Abre tu proyecto de React (Vite o Create React App).
2. Asegúrate de que el proyecto corre sin errores:
  - Vite → npm run dev
  - CRA → npm start

B) Instalación de MUI usando Node

Ejecuta estos comandos en tu terminal dentro del proyecto:

1. Instalar MUI:

npm install @mui/material @emotion/react @emotion/styled


2. Instalar íconos (opcional pero útil):

npm install @mui/icons-material


3. (Solo si lo requieres) DataGrid:

npm install @mui/x-data-grid


C) Crea el arreglo de personas

1. Crea un arreglo llamado personas con mínimo 5 objetos.
2. Cada objeto debe contener:
  - nombre (String)
  - apellido (String)
  - edad (Number)
3. Debe haber al menos 2 personas menores de edad (≤17).

Ejemplo de estructura:

const personas = [
  { nombre: "Ana", apellido: "López", edad: 16 },
  { nombre: "Luis", apellido: "Ramírez", edad: 21 },
  { nombre: "Carlos", apellido: "Mora", edad: 17 },
  { nombre: "Elena", apellido: "Silva", edad: 23 },
  { nombre: "María", apellido: "Torres", edad: 19 }
];


D) Construye la tabla con MUI

1. Importa los componentes necesarios:

import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import Paper from "@mui/material/Paper";


1. Usa el ejemplo oficial de MUI:
https://mui.com/material-ui/react-table/
2. Crea las columnas:

- Nombre
- Apellido
- Edad

E) Llena la tabla usando .map()

En el TableBody, genera las filas dinámicamente:

<TableBody>
  {personas.map((persona, index) => (
    <TableRow key={index}>
      <TableCell>{persona.nombre}</TableCell>
      <TableCell>{persona.apellido}</TableCell>
      <TableCell>{persona.edad}</TableCell>
    </TableRow>
  ))}
</TableBody>


F) Verifica

- La tabla funciona correctamente.
- Los datos se muestran sin errores.
- Al menos 2 personas son menores de edad.

3) Método de entrega

Sube un PDF que incluya:

- Nombre, grupo y materia.
- Captura de pantalla de la tabla funcionando.
- Código del arreglo personas.
- Código completo del componente con MUI y .map().
- Una breve explicación (3–5 renglones) de lo que aprendiste sobre:
  - Arrays
  - .map()
  - Tablas con MUI

Entrega obligatoria en PDF.