Guía 12: React y MUI - Introducción

Objetivo específico

Utilizar React para construir la estructura inicial del dashboard e integrar la librería MUI para incorporar componentes visuales modernos que mejoren la usabilidad e interfaz del sistema.

Actividades previas

Open-Meteo

1. Explore la documentación de la API de Open-Meteo para comprender cómo se realizan las solicitudes para obtener datos meteorológicos.

2. Practique haciendo solicitudes a la API utilizando herramientas como cURL o desde una pestaña en su navegador.

Diseño del dashboard

1. Identifique los elementos claves del API que serán útiles para el dashboard:

   1. Parámetros de entrada (Input): Determine qué parámetros son necesarios para realizar una solicitud a la API, como ubicación geográfica o zona horaria.

   2. Datos disponibles (Variables climáticas): Explore las variables climáticas que la API puede proporcionar y su frecuencia temporal, como temperatura actual, por día o por hora, etc.

   3. Formato de respuesta (Response): Familiarícese con el formato de respuesta de la API, que generalmente es JSON, y cómo se estructuran los datos.

   4. Codificación del clima (weathercode): Comprenda cómo se codifica el clima en la respuesta de la API, lo que le permitirá interpretar correctamente las condiciones climáticas.

   5. Errores comunes: Identifique la respuesta de la API para los errores más comunes, como solicitudes mal formadas o problemas de conexión.

   6. Casos de uso para el dashboard: Reflexione sobre cómo estos datos pueden ser utilizados en el dashboard, como mostrar el clima actual, pronósticos extendidos, gráficos de evolución, alertas visuales, etc.

      1. Clima actual: temperatura, humedad, estado del cielo

      2. Gráficos de evolución: temperatura por hora, precipitación acumulada

      3. Pronósticos extendidos: próximos 7 días

      4. Alertas visuales: si uv_index_max supera cierto umbral, mostrar advertencia

      5. Íconos adaptativos: usando weathercode

2. Responda a la actividad en clases del diseño generado.

Ambiente de desarrollo

1. Cree un repositorio en GitHub con el nombre dashboard.

   1. Agregue un archivo README.md con el título de su dashboard y una breve descripción del objetivo de su proyecto.

   2. Agregue un archivo .gitignore con la plantilla de Node.

2. Acceda a su proyecto dashboard en Codespaces o en su máquina local.

3. Cree y utilice la(s) rama(s) de desarrollo.

Actividades en clases

React: Inicialización del proyecto

React implementa la técnica web de desarrollo Client Side Rendering (CSR) donde el navegador carga archivos JavaScript, renderiza la página en el lado del cliente y envía un documento HTML completo al navegador para construir interfaces de usuario.

1. Explore la documentación de React para comprender los conceptos básicos de esta biblioteca.

2. Cree un proyecto de React utilizando Vite.

   1. Dentro de la carpeta de su proyecto, abra la terminal y cree un nuevo proyecto de Vite con el siguiente comando:

   npm create vite@latest .
   

   2. Seleccione el framework como React y la variante como TypeScript.

   3. Instale las dependencias del proyecto e inicie el servidor de desarrollo con los siguientes comandos:

   npm install
   npm run dev
   

3. Compruebe la vista previa del resultado en el navegador.

4. Con un cliente de IAG, explique la estructura del proyecto en React, específicamente por el propósito de los archivos index.html, src/main.tsx y src/App.tsx.

React: App.tsx

1. Modifique el archivo src/App.tsx para mostrar un mensaje de bienvenida, por ejemplo:

   ...
   
   function App() {
       return (
           <div>
               <h1>Bienvenido al Dashboard</h1>
           </div>
       );
   }
   
   export default App;
   

2. Compruebe la vista previa del resultado en el navegador.

3. Utilice un cliente de IAG, para explicar cómo se renderiza el componente principal de la aplicación y JSX.

MUI: Inicialización del proyecto y componente Grid

1. Explore la documentación de MUI para comprender cómo integrar esta biblioteca en su proyecto de React.

2. Instale MUI y sus dependencias en su proyecto de React con el siguiente comando:

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

3. Importe el componente Grid de MUI en su archivo src/App.tsx y utilícelo para crear una estructura básica de cuadrícula para su dashboard:

   ...
   import { Grid } from '@mui/material';
   
   function App() {
      return (
         <Grid>
   
            {/* Encabezado */}
            <Grid>Elemento: Encabezado</Grid>
   
            {/* Alertas */}
            <Grid>Elemento: Alertas</Grid>
   
            {/* Selector */}
            <Grid>Elemento: Selector</Grid>
   
            {/* Indicadores */}
            <Grid>Elemento: Indicadores</Grid>
   
            {/* Gráfico */}
            <Grid>Elemento: Gráfico</Grid>
   
            {/* Tabla */}
            <Grid>Elemento: Tabla</Grid>
   
            {/* Información adicional */}
            <Grid>Elemento: Información adicional</Grid>
   
         </Grid>
      );
   }
   
   export default App;
   

4. Compruebe la vista previa del resultado en el navegador.

5. Con un cliente de IAG, explique cómo se utiliza el componente Grid de MUI para crear una estructura de cuadrícula y cómo se pueden agregar elementos dentro de esta cuadrícula.

MUI: Ubicación de elementos y Responsividad

1. Modifique el componente Grid de su archivo src/App.tsx:

   1. Para que sea un contenedor principal utilizando el prop container.

   2. Ajuste el espaciado de 5 unidades entre los elementos utilizando la propiedad spacing.

   3. Centre los todos los elementos con utilizando las propiedades justifyContent y alignItems.

   4. Compruebe la vista previa del resultado en el navegador.

   ...
   
   function App() {
      return (
         <Grid container spacing={5} sx={{ justifyContent: "left", alignItems: "center" }}>
            ...
         </Grid>
      );
   }
   

2. Revise la documentación de fluid grids en MUI, para aplicar el estilo:

   1. Pantallas extra pequeñas xs, todos los elementos ocupan 12 columnas.

   2. Pantallas medianas md, en adelante:

      1. El encabezado ocupe todo el ancho (12 columnas),

      2. Las alertas ocupan 12 columnas.

      3. El selector ocupa 3 columnas y los indicadores ocupan 9 columnas.

      4. El gráfico ocupa 6 columnas y la tabla ocupa 6 columnas.

      5. El elemento de información adicional ocupan 12 columnas.

   3. Compruebe la vista previa del resultado en el navegador.

   Ver el código

   ...
   
   function App() {
      return (
         <Grid ... >
   
            {/* Encabezado */}
            <Grid size={{ xs: 12, md: 12 }}>Elemento: Encabezado</Grid>
   
            ...
   
            {/* Selector */}
            <Grid size={{ xs: 12, md: 3  }}>Elemento: Selector</Grid>
   
            {/* Indicadores */}
            <Grid size={{ xs: 12, md: 9 }}>Elemento: Indicadores</Grid>
   
            ...
   
         </Grid>
      );
      }
   
   export default App;
   

3. Revise la documentación de la propiedad sx, para que la gráfica y la tabla no se muestran en pantallas extra pequeñas y se muestran como bloque desde pantallas medianas.

   Ver el código

   ...
   
   function App() {
      return (
         <Grid ... >
   
            ...
   
            {/* Gráfico */}
            <Grid ...
               sx={{ display: { xs: "none", md: "block"} }} >
               Elemento: Gráfico
            </Grid>
   
            {/* Tabla */}
            <Grid ...
               sx={{ display: { xs: "none", md: "block" } }}>
               Elemento: Tabla
            </Grid>
   
            ...
   
         </Grid>
      );
   }
   
   export default App;
   

4. Compruebe la vista previa del resultado en el navegador para diferentes tamaños.

5. Consulte su cliente de IAG para explicar la utilidad de los props en los componentes, por ejemplo size y sx.

Versionamiento

1. Versione local y remotamente la(s) rama(s) de desarrollo en el repositorio dashboard.

2. Genere la(s) solicitud(es) de cambios (pull request) para la rama principal y apruebe los cambios.

Configuración para el despliegue

1. Desde la línea de comandos:

   1. Instale el paquete gh-pages

   npm install gh-pages --save-dev
   

2. Modifique el archivo package.json, con:

   1. La entrada homepage. Reemplace <username> por su nombre de usuario.

   2. Los comandos predeploy y deploy a la entrada scripts.

   {
        ...
        "homepage": "https://<username>.github.io/dashboard",
        ...
        "scripts": {
            ...
            "predeploy": "npm run build",
            "deploy": "gh-pages -d dist",
            ...
        }
   }
   

3. Modifique el archivo vite.config.js, con la ruta al repositorio remoto:

   export default defineConfig({
        base: "/dashboard/",
        plugins: ... ,
   })
   

4. Desde la línea de comandos, ejecute el comando de transpilación y despliegue del sitio web, con:

   npm run deploy
   

   1. De ser necesario, elimine, corrija o comente las secciones de código identificadas por el transpilador.

   2. Vuelva a ejecutar el comando de transpilación y despliegue del sitio web.

5. Compruebe el resultado en el navegador, con la URL: https://<username>.github.io/dashboard

Conclusiones

Preguntas de cierre

• ¿Cómo te ayudó la inteligencia artificial generativa a comprender los principios de diseño de interfaces con React y MUI, como la reutilización de componentes y la jerarquía visual?

• ¿Cómo aseguraste que la interacción entre los componentes de React y los estilos de MUI generados por la IA fueran consistentes, accesibles y adaptables en distintos tamaños de pantalla?

• ¿Qué actitudes consideras fundamentales para asegurar que el resultado final del dashboard sea auténtico y producto de tu criterio profesional, incluso si partiste de una base generada por IA?

Actividades autónomas

Recursos extras

En redes:

Today we're sharing that View Transitions and Activity are ready to try in the experimental channel, along with docs and updates on other areas we're actively working on:https://t.co/nQqndWzbdX

— React (@reactjs) April 23, 2025