Guía 13: React - Componentes, Interfaces y Props

Guía 13: React - Componentes, Interfaces y Props#

Actividades previas#

Ambiente de desarrollo#

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

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

  3. Instale los paquetes y levante el servidor, con:

    npm install
npm run dev

Actividades en clases#

React y MUI: Componentes y Props#

Nota

Utilice la documentación de TypeScript, de React y de Material UI components.

Componente: HeaderUI#

  1. Cree y exporte el componente funcional HeaderUI en el archivo src/components/HeaderUI.tsx.

  2. Agregue el contenido al componente HeaderUI, con:

    1. Importe el componente Typography de la librería @mui/material/Typography

    2. En el JSX, use el componente Typography con las siguientes propiedades:

      1. Estilo tipográfico (variant) de un encabezado de nivel 2 (h2),

      2. Renderización (component) como un encabezado de nivel 1 (h1), y

      3. Estilo en línea (sx) para que el texto se muestre en negrita (fontWeight: “bold”).

    3. El texto del componente Typography es «Dashboard del Clima».

    Ver la solución
    import Typography from '@mui/material/Typography';

export default function HeaderUI() {
    return (
        <Typography
            variant="h2"
            component="h1"
            sx={{fontWeight: 'bold'}}>
            Dashboard del Clima
        </Typography>
    )
}

  3. Modifique el archivo src/App.tsx, con:

    1. Importe el componente HeaderUI.

    2. Use el componente HeaderUI dentro de la sección Encabezado.

    ...
import HeaderUI from './components/HeaderUI';

function App() {

     return (
         <Grid ... >

         {/* Encabezado */}
         <Grid ... >
             <HeaderUI/>
         </Grid>

         ...
     )
 }

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

  5. Con un cliente de IAG, compare el uso del DOM versus el uso del DOM Virtual de React.

Interfaz: AlertConfig#

  1. Cree y exporte el componente funcional AlertUI en el archivo src/components/AlertUI.tsx.

  2. Agregue el contenido al componente AlertUI, con:

    1. Importe el componente Alert desde la librería @mui/material/Alert.

    2. Define la interfaz AlertConfig, con la propiedad description del tipo cadena de texto.

    3. Agregue el parámetro config del tipo AlertConfig a componente funcional AlertUI.

    4. En el JSX, use el component Alert con las siguientes propiedades:

      1. El tipo de alerta de éxito (severity="success"),

      2. El estilo visual del componente es contorneado (variant="outlined"),

      3. Renderice el valor de parámetro description (config.description) como contenido del componente.

    Ver la solución
    import Alert from '@mui/material/Alert';

interface AlertConfig {
    description: string;
}

export default function AlertUI( config:AlertConfig ) {
    return (
        <Alert variant="standard" severity="success"> {config.description} </Alert>
    )
}

  3. Modifique el archivo src/App.tsx, con:

    1. Importe el componente AlertUI

    2. Use el componente AlertUI, pase el prop description con el valor “No se preveen lluvias”

    3. Convierta el elemento Grid en un contenedor, alinea horizontalmente los elementos al borde derecho y alinea verticalmente al centro del eje transversal.

    ...
import AlertUI from './components/AlertUI';

function App() {

     return (
         <Grid ... >

         {/* Alertas */}
         <Grid ...
             container sx={{ justifyContent: "right", alignItems: "center" }}>

             <AlertUI description="No se preveen lluvias"/>

         </Grid>

         ...
     )
 }

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

  5. Con un cliente de IAG genere el código para modificar los props variant y severity desde el componente padre.

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.

Despliegue#

  1. 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.

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

Conclusiones#

Actividades autónomas#

Recursos extras#

En redes:

Contenido