Guía 14: React - Eventos y Hooks (useState)

Guía 14: React - Eventos y Hooks (useState)#

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: Eventos y Hooks#

Nota

Considere la explicación del uso de hooks en React Hooks - Tutorial y del manejo de eventos en Tutorial React: Eventos en React.

Selector#

  1. Cree el archivo src/components/SelectorUI.tsx.

  2. Utilice la documentación del componente Select para crear el componente funcional SelectorUI, con el siguiente código:

    import FormControl from '@mui/material/FormControl';
import InputLabel from '@mui/material/InputLabel';
import Select from '@mui/material/Select';
import MenuItem from '@mui/material/MenuItem';

export default function SelectorUI() {

return (
   <FormControl fullWidth>
      <InputLabel id="city-select-label">Ciudad</InputLabel>
      <Select
         labelId="city-select-label"
         id="city-simple-select"
         label="Ciudad">
         <MenuItem disabled><em>Seleccione una ciudad</em></MenuItem>
         <MenuItem value={"guayaquil"}>Guayaquil</MenuItem>
         <MenuItem value={"quito"}>Quito</MenuItem>
         <MenuItem value={"manta"}>Manta</MenuItem>
         <MenuItem value={"cuenca"}>Cuenca</MenuItem>
      </Select>

   </FormControl>
   )
}

  3. En el archivo src/App.tsx, importe y use el componente SelectorUI en la sección para el Selector.

  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.

Evento: onChange#

  1. Utilice su cliente de IAG, para modificar el componente SelectorUI con el siguiente código:

    1. Importe el tipo SelectChangeEvent desde la librería @mui/material/Select

    2. Dentro del componente SelectorUI, declare una función flecha handleChange, que:

      1. Recibe el parámetro event de tipo SelectChangeEvent<string>

      2. Muestra en una ventana emergente el valor actual del elemento que generó el evento.

    3. Modifique el componente Select de MUI para asignar la función handleChange al evento onChange.

    Ver la solución
    ...
import Select, { type SelectChangeEvent } from '@mui/material/Select';
...

export default function SelectorUI() {

    const handleChange = (event: SelectChangeEvent<string>) => {
        alert(event.target.value)
    };

    return (
        ...
        <Select
            ...
            onChange={handleChange} >
            ...
        </Select>
        ...
    )
}

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

  3. Con un cliente de IAG, explique la sintaxis y manejo de eventos sintéticos en React.

Hooks: useState#

  1. Utilice su cliente de IAG, para modificar el componente SelectorUI con el siguiente código:

    1. Importe el hook useState desde la librería de React para poder manejar el estado interno del componente.

    2. Dentro del componente, declare una variable de estado llamada cityInput junto con su función de actualización setCityInput.

    3. Dentro de la función handleChange, reemplace el código anterior por una llamada a la función de actualización setCityInput con el valor seleccionado (event.target.value).

    4. En el <Select>, enlace el prop value con la variable de estado cityInput.

    5. Debajo del <Select>, solamente si cityInput tiene un valor muestre un párrafo con el texto “Información del clima en [ciudad seleccionada]”. Aplica el estilo para mostrar el nombre de la ciudad en negritas y la primera letra en mayúsculas.

    Ver la solución
    ...
import { useState } from 'react';

export default function SelectorUI() {

    const [cityInput, setCityInput] = useState('');

    const handleChange = (event: SelectChangeEvent<string>) => {
        setCityInput(event.target.value)
    };

    return (
        ...
        <Select
            ...
            value={cityInput}>
            ...
        </Select>

        {cityInput && (
            <p>
                Información del clima en <span style={{textTransform: 'capitalize', fontWeight: 'bold'}}>{cityInput}</span>
            </p>
        )}
        ...
    )
}

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

  3. Con un cliente de IAG, explique el propósito de los hooks y de useState en React.

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