Construyendo la lógica del buscador

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

Vinci Guerra

student•

Si lo quieres hacer con TypeScript.

interface Props {
    inputUser: string;
    setInputUser: (val: string) => void
}

const Searcher = ({ inputUser, setInputUser } : Props ) => {

}

Vinci Guerra

student•

Con TypeScript

    const onSearchValueChange = (e: React.ChangeEvent<HTMLInputElement> ) => {
        const inputValue = e.target.value
        setValueInput( inputValue )
    }

Kike Vanegas

student•

Esto está genial!

Vinci Guerra

student•

Tambien se puede desestructurar directamente.

const Searcher = ({ inputUser, setInputUser }) => {

}```

Enrique Sanchez

student•

El evento lo pueden desestructurar de esta forma:

 ({ target: { value } })

Gilbert Ardila

student•

pues la verdad me parece que se alcanzó a enterar un poco, pero cada uno tiene su lógica y es respetable

Construyendo la lógica del buscador

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