Guía 17: React - Comunicación entre componentes

Guía 17: React - Comunicación entre componentes#

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#

Comunicación entre componentes con hooks personalizados#

  1. Analice el siguiente escenario de interacción en el dashboard:

    1. El usuario selecciona una ciudad de la lista de opciones.

    2. El sistema realiza una petición asincrónica a una API de datos climáticos para obtener la información correspondiente a la ciudad seleccionada.

    3. De acuerdo con la respuesta de la API, el sistema actualiza los componentes visuales del dashboard, incluyendo indicadores, tablas y gráficos, para reflejar los datos climáticos de la ciudad seleccionada.

  2. Genere el código necesario para implementar este escenario en su proyecto dashboard.

    1. En el componente App.tsx:

    import { useState } from 'react';
...

function App() {

  // Utilice una variable de estado para almacenar la opción seleccionada por el usuario
  const [selectedOption, setSelectedOption] = useState<string | null>(null);

  // Comunique la opción seleccionada al hook useFetchData
  const dataFetcherOutput = useFetchData(selectedOption);

  return (

     ...
     <SelectorUI onOptionSelect={setSelectedOption} />
     ...

  );

}

    1. En el componente SelectorUI.tsx:

    ...

// Defina la interfaz del prop
interface SelectorProps {
   onOptionSelect: (option: string) => void;
}

// Defina el prop en el componente
export default function Selector({ onOptionSelect }: SelectorProps) {

     ...

     const handleChange = (event: SelectChangeEvent<string>) => {
       ...

       // Comunique los cambios al componente padre
       onOptionSelect(selectedValue);

     };

     ...
}

    1. En el hook useFetchData.tsx:

    ...

// Estrategia para convertir la opción seleccionada en un objeto
const CITY_COORDS: Record<string, { latitude: number; longitude: number }> = {
  'Guayaquil': { latitude: -2.1962, longitude: -79.8862 },
  ...
};

// Tipo del prop: string | null
export default function useFetchData(selectedOption: string | null) : OpenMeteoResponse {

  ...

  useEffect(() => {


    // Parametrice la opción seleccionada en la URL del requerimiento asíncrono
    const cityConfig = selectedOption != null? CITY_COORDS[selectedOption] : CITY_COORDS["Guayaquil"];
    const URL = `https://api.open-meteo.com/v1/forecast?latitude=${cityConfig.latitude}&longitude=${cityConfig.longitude}&...`

    fetch( URL )
    ...

  }, [selectedOption]); // El efecto secundario depende de la opción seleccionada

  ...
}

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

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