Creando el componente con las estadísticas del usuario

Clase 19 de 24 • Curso Fundamental de Material UI con React

Ronald Benito Abu Saleh Boscán

student•

Hola a todos! Para tener un código más limpio pueden aprovechar los beneficios de JSX de React para simplificar el código que está dentro del componente de Paper, realizando los siguientes pasos:

Primero, crear un arreglo de objetos con todos los items que queremos representar en nuestro Paper component:

const userInformation = [
  { title: 'Public Repos', value: public_repos },
  { title: 'Followers', value: followers },
  { title: 'Following', value: following },
]

Luego, en vez de colocar un componente de Stack por cada item, iteramos el arreglo y usamos los valores dinámicos de la siguiente manera dentro de nuestro Stack principal:

<Stack
  sx={{ py: 2 }}
  direction={{ xs: 'column', md: 'row' }}
  justifyContent='space-around'
  alignItems='center'
  spacing={2}
>
  {userInformation.map(({ title, value }) => (
    <Stack spacing={1} textAlign="center">
      <Typography component="h3" variant="h5">{title}</Typography>
      <Typography component="h4" variant="h6">{value}</Typography>
    </Stack>
  ))}
</Stack>

De esta forma disminuimos el código final para una mejor lectura. Saludos!

Lean Silva

student•

Excelente.

Juan Camilo Lentino Villalba

student•

src/components/PaperInformation/index.js:

import { Paper, Stack, Typography } from "@mui/material";
import React from "react";

const PaperInformation = (props)=> {
    const { userState } = props
    const { public_repos, followers, following } = userState


    return (
        <>
            <Paper elevation={3}>
                <Stack>
                    <Stack>
                        <Typography>Repos</Typography>
                        <Typography>{public_repos}</Typography>
                    </Stack>
                    <Stack>
                        <Typography>Followers</Typography>
                        <Typography>{followers}</Typography>
                    </Stack>
                    <Stack>
                        <Typography>Following</Typography>
                        <Typography>{following}</Typography>
                    </Stack>
                </Stack>
            </Paper>
        </>
    )
}

export default PaperInformation

Sebastian Pedroza

student•

Complementando el comentario de @Ronald Benito Abu Saleh Boscán también podrían: .

Crear un objeto con los elementos a enlistar donde la clave es el título y el valor de cada clave es el dato obtenido.

  const paperInfo = {
    repositories: publicRepos,
    followers: followers,
    following: following,
  };

Usar el método para generar un array de arrays con cada elemento del objeto y luego mapear este array resultante renderizando cada elemento de la lista.

        Object.entries(paperInfo).map((item) => (
          <Stack
            key={`Info_${item[0]}`}
            sx={{
              flexDirection: 'column',
              alignItems: 'center',
            }}
          >
            <Typography
              variant="h6"
              color={(t) => t.palette?.text?.primary}
              sx={{ textTransform: 'capitalize' }}
            >
              {item[0]}
            </Typography>
            <Typography variant="h4" color={(t) => t.palette?.primary?.main}>
              {item[1]}
            </Typography>
          </Stack>
        ))

<Stack
  sx={{ py: 2 }}
  direction={{ xs: 'column', md: 'row' }}
  justifyContent='space-around'
  alignItems='center'
  spacing={2}
>
  {userInformation.map(({ title, value }) => (
    <Stack spacing={1} textAlign="center">
      <Typography component="h3" variant="h5">{title}</Typography>
      <Typography component="h4" variant="h6">{value}</Typography>
    </Stack>
  ))}
</Stack>

import { Paper, Stack, Typography } from "@mui/material";
import React from "react";

const PaperInformation = (props)=> {
    const { userState } = props
    const { public_repos, followers, following } = userState


    return (
        <>
            <Paper elevation={3}>
                <Stack>
                    <Stack>
                        <Typography>Repos</Typography>
                        <Typography>{public_repos}</Typography>
                    </Stack>
                    <Stack>
                        <Typography>Followers</Typography>
                        <Typography>{followers}</Typography>
                    </Stack>
                    <Stack>
                        <Typography>Following</Typography>
                        <Typography>{following}</Typography>
                    </Stack>
                </Stack>
            </Paper>
        </>
    )
}

export default PaperInformation

        Object.entries(paperInfo).map((item) => (
          <Stack
            key={`Info_${item[0]}`}
            sx={{
              flexDirection: 'column',
              alignItems: 'center',
            }}
          >
            <Typography
              variant="h6"
              color={(t) => t.palette?.text?.primary}
              sx={{ textTransform: 'capitalize' }}
            >
              {item[0]}
            </Typography>
            <Typography variant="h4" color={(t) => t.palette?.primary?.main}>
              {item[1]}
            </Typography>
          </Stack>
        ))

Creando el componente con las estadísticas del usuario

Introducción al curso

Bienvenida al curso

Presentación proyecto

¿Qué es Material UI?

Preparación de entorno de desarrollo

Herramientas dentro de Material UI

Componentes simples

Componentes compuestos

Contenedores responsive

Material icons

Bonus

Construcción del proyecto

Análisis detallado del proyecto

Creando el contenedor y el text field

Colocando los estilos del buscador

Construyendo la lógica del buscador

Conectando nuestro proyecto a la API de GitHub

Conectando el buscador con la API

Creando el contenedor y trayendo la imagen de perfil del usuario

Trayendo la información principal del usuario

Trayendo la descripción del usuario

Creando el componente con las estadísticas del usuario

Mostrando la localización del usuario

Ajuste de estilos con SX a los componentes de descripción e información principal

Ajuste de estilos con SX al componente de descripción, PaperInformation y LocationInformation

Evaluación del proyecto

Despedida

Resumen del curso