Creando el contenedor y el text field

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

Rodrigo Andrés Moreno Pertúz

student•

Con esa prop el icono queda dentro del componente, saludos.

	<TextField label='Search Github User'
					id='outlined-basic'
					variant='outlined'
					width='90%'
					value={inputUser}
					onChange={e => setInputUser(e.target.value)}
					InputProps={{
					startAdornment: (
						<InputAdornment position="start">
							<IconButton onClick={()=> handleClick(setInputUser, inputUser)}>
								<SearchIcon/>
							</IconButton>
						</InputAdornment>
					)}}
				/>

Carlos Alberto Cabrera Quiroga

student•

Profe la documentación sugiere lo que comenta Rodrigo.

Owen Sanchez

student•

Hay alguna forma de que el placeHolder se quede oculto y onclick salga como la animacion del prof?

Francisco Garay

student•

Bajo mi punto de vista queda más limpio si primero definimos los estilos en una variable.

const stackStyles = {
  marginTop: '30px',
  width: '80%',
};

const Searcher = () => {
  return (
    <Stack sx={stackStyles} direction="row">
    </Stack>
  );
};

SANDRO SIMON

student•

Totalmente de acuerdo. ¿Y es posible dejar la parte de los estilos en otro archivo e importarlo? Digo, como si fuera CSS.

Francisco Garay

student•

Poder sí que puedes, al fin y al cabo, es solo un objeto literal, simplemente exportas la constante y la importas donde la quieras usar.

Carlos Alberto Cabrera Quiroga

student•

si usan Material UI con forms, aconsejo usar react Hook Form o Formik, los dos son muy ebusno y tienen bastante mantenimiento y facil de usar. A mi me gusta u poco mas react Hook Form

Darío Condori Humerez

student•

Mala experiencia de usuario, deberían estandarizar este curso como los demás donde los teachers hacen un excelente zoom a su IDE de desarrollo, trato de pasar clases desde una tablet, y si uso una laptop divido la pantalla en dos para tener mi código paralelamente. 😒

Arturo Mauricio Terceros Beltrán

student•

Tranquilo Sam! 😂

Kevin Zavala

student•

Les dejo un Hook para manipular el Input, es muy simple y se puede mejorar:

import { useState } from "react";

export const UseForm = (initialValue) => {
  const [formState, setFormState] = useState(initialValue);

  const onChangeInput = ({ target }) => {
    const { name, value } = target;
    setFormState({
      ...formState,
      [name]: value,
    });
  };

  const resetForm = () => {
    setFormState(initialValue);
  }

  return {
    ...formState,
    formState,
    onChangeInput,
    resetForm,
  };
};

También tengo un FormField que me costó leer solamente la documentación de Material para generarlo(Este componente usa mi hook):

import { FormControl, InputLabel, OutlinedInput, InputAdornment, IconButton } from "@mui/material";
import SearchIcon from '@mui/icons-material/Search';
import { UseForm } from "../hooks";

export const InputSearch = ({label=''}) => {

  const {search, onChangeInput, resetForm} = UseForm({search: ''});

  return (
    <FormControl variant="outlined" sx={{width: '90%', marginTop: '30px'}}>
      <InputLabel size="small" htmlFor="input-search">{label}</InputLabel>
      <OutlinedInput
            id="input-search"
            type="text"
            name="search"
            size="small"
            value={search}
            onChange={onChangeInput}
            endAdornment={
              <InputAdornment position="end">
                <IconButton
                  edge="end"
                >
                  <SearchIcon />
                </IconButton>
              </InputAdornment>
            }
            label={label}
          />
    </FormControl>
  );
};

Alexander Arismendy

student•

Carlos Alberto Cabrera Quiroga

student•

si usan visual studio code hay una extensión llamada MUI Snippets, que son snippets para Mui V5, fijense que soporte v% porque hay otra para la V4 que aun sigue siendo muy usada,

Carlos Mauro Cárdenas Fernández

student•

Creo que es uno de los profesores mas entuciastas :)

Patrick Jhonatan Hernandez Blanco

student•

En las últimas versiones de React ya no es necesario hacer el import en cada componente

Francisco Murillo

student•

Shortcuts para crear la base de los archivos en react. rfc

import React from 'react'

export default function index() {
  return (
    <div>index</div>
  )
}

rfce

import React from 'react'

function index() {
  return (
    <div>index</div>
  )
}

export default index

rfcp || con prototipos

import React from 'react'
import PropTypes from 'prop-types'

function index(props) {
  return (
    <div>index</div>
  )
}

index.propTypes = {}

export default index

Luis Magallanes

student•

a quien le marque error en <Stack> <TextField></TextField> <IconButton></IconButton> </Stack>;

en mi caso lo soluciones agregando una regla "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]

Carlos Alberto Cabrera Quiroga

student•

no les sale esta warning en la consola?

component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component.

Daniel Rodrigo Valdivieso Merino

teacher•

Hola Carlos, compartenos foto de tu código y del error para que todos podamos revisarlo 😊

David Rangel

student•

Tal vez me anticipo un poco pero, ¿cómo puedo poner otros tipos de fuentes como las de Google Fonts en los componentes de MUI?

Roiber Alexander Figueroa Blanco

student•

esta como cortada esta clase y no se puede ver ni la 13 ni la 14 no se si a alguien mas le pase?

Carlos Eduardo Gomez García

teacher•

¡Hola! Estabamos revisando algunas clases, ya están disponibles y puedes continuar viéndolas :D

Jose Luis Bedoya

student•

Vs code me importaba desde @mui/system. Eso rompía la aplicación. Al cambiar la importación de @mui/material, funcionó!

Miguel Angel Hernandez Colombo

student•

con el comentario de frodo y sam!!!! 5 stars pal curso!

	<TextField label='Search Github User'
					id='outlined-basic'
					variant='outlined'
					width='90%'
					value={inputUser}
					onChange={e => setInputUser(e.target.value)}
					InputProps={{
					startAdornment: (
						<InputAdornment position="start">
							<IconButton onClick={()=> handleClick(setInputUser, inputUser)}>
								<SearchIcon/>
							</IconButton>
						</InputAdornment>
					)}}
				/>

import { useState } from "react";

export const UseForm = (initialValue) => {
  const [formState, setFormState] = useState(initialValue);

  const onChangeInput = ({ target }) => {
    const { name, value } = target;
    setFormState({
      ...formState,
      [name]: value,
    });
  };

  const resetForm = () => {
    setFormState(initialValue);
  }

  return {
    ...formState,
    formState,
    onChangeInput,
    resetForm,
  };
};

import { FormControl, InputLabel, OutlinedInput, InputAdornment, IconButton } from "@mui/material";
import SearchIcon from '@mui/icons-material/Search';
import { UseForm } from "../hooks";

export const InputSearch = ({label=''}) => {

  const {search, onChangeInput, resetForm} = UseForm({search: ''});

  return (
    <FormControl variant="outlined" sx={{width: '90%', marginTop: '30px'}}>
      <InputLabel size="small" htmlFor="input-search">{label}</InputLabel>
      <OutlinedInput
            id="input-search"
            type="text"
            name="search"
            size="small"
            value={search}
            onChange={onChangeInput}
            endAdornment={
              <InputAdornment position="end">
                <IconButton
                  edge="end"
                >
                  <SearchIcon />
                </IconButton>
              </InputAdornment>
            }
            label={label}
          />
    </FormControl>
  );
};

Creando el contenedor y el text field

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