Guía 11

Guía 11

DAWM / Proyecto03

Actividades previas

Actividades en clases

Github

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

Proyecto Base

  1. Desde la línea de comandos, cree un nuevo sitio con Vite:

     npm create vite@latest <NOMBRE_DEL_REPOSITORIO>
    • Seleccione React como framework: √ Select a framework: » React
    • Seleccione Typescript como variante: √ Select a variant: » Typescript

  2. Ingrese a la carpeta del repositorio:

     cd <NOMBRE_DEL_REPOSITORIO>

  3. Instale las dependencias

     npm install

  4. Inicie el servidor.

     npm run dev
  5. (STOP 1) Compruebe el resultado en el navegador.
  6. Revise el resultado en http://localhost:5173/
  1. Versiona local y remotamente el repositorio dashboard.

Estructura de archivos del proyecto en Vite - React.

Configuración para el despliegue

  1. Desde la línea de comandos, acceda a la ruta del proyecto.

  2. Instale el paquete gh-pages

     npm install gh-pages --save-dev

  3. En el archivo package.json agregue las siguientes líneas antes de la entrada build:

         ...
     "predeploy": "npm run build",
     "deploy": "gh-pages -d dist",
     ...

  4. En el archivo vite.config.js agregue esta línea antes de: plugins: [react()],:

         base: "/<NOMBRE_DEL_REPOSITORIO>",
     ...

  5. Versiona local y remotamente el repositorio dashboard.

  6. Desde la línea de comandos:
    • Ejecute el comando de transpilación y despliegue del sitio web, con: npm run deploy
    • De ser necesario, corrija o comente las secciones de código identificadas por el transpilador.
    • Levante un servidor HTTP en la carpeta dist, para comprobar el funcionamiento del sitio web transpilado.
  7. En GitHub:
    • En Settings > Code and automation > Pages > Build and deployment seleccione la rama gh-pages
    • Verifique que exista la rama gh-pages y que contenga el sitio web transpilado.
    • Revise el URL del sitio web desplegado, que se encuentra en Settings > Code and automation > Pages > GitHub Pages: https://<NOMBRE_DE_USUARIO>.github.io/<NOMBRE_DEL_REPOSITORIO>/.

React MUI: Instalación

  1. Desde la línea de comandos, instale React MUI con:

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

React MUI: Componente Grid v2

  1. En el componente App.tsx, agregue la referencia al componente Grid 2.

     import { useState } from 'react'
 import Grid from '@mui/material/Unstable_Grid2'; // Grid version 2

  2. En App.tsx, reemplace el contenido a renderizar por:

     ...

 function App() {
     ...

     return (
       <Grid>
           <Grid>1</Grid>
           <Grid>2</Grid>
           <Grid>3</Grid>
           <Grid>4</Grid>
           <Grid>5</Grid>
           <Grid>6</Grid>
         </Grid>
     )
 }

 export default App

  3. (STOP 1) Compruebe el resultado en el navegador.

React MUI: Propiedades (Props)

  1. En App.tsx, convierta el primer Grid en contenedor con el atributo container y asigne un espacio entre elementos con spacing.

     ...
     return (
       <Grid container spacing={5}>
         ...
         </Grid>
     )
 ...

  2. (STOP 2) Compruebe el resultado en el navegador.

React MUI: Layout

  1. Agregue las propiedades xs, sm, md y lg a los elementos internos.

     ...
     return (
       <Grid container spacing={5}>
           <Grid xs={12} sm={4} md={3} lg={2}>1</Grid>
           <Grid xs={6} sm={4} md={3} lg={2}>2</Grid>
           <Grid xs={6} sm={4} md={3} lg={2}>3</Grid>
           <Grid xs={12} sm={4} md={3} lg={2}>4</Grid>
           <Grid xs={6} sm={4} md={6} lg={2}>5</Grid>
           <Grid xs={6} sm={4} md={6} lg={2}>6</Grid>
         </Grid>
     )
 ...

  2. (STOP 3) Compruebe el resultado para los diferentes tamaños del navegador.

Despliegue automático

  1. Agregue los elementos necesarios, para cada uno de los tamaños de dispositivos, de acuerdo con el diseño de su dashboard responsivo.
  2. Versiona local y remotamente el repositorio dashboard.
  3. Desde la línea de comandos, ejecute el comando de transpilación y despliegue del sitio web, con: npm run deploy

Documentación

Fundamental

Términos

librería, ui, ui material

Referencias