Navegación Responsiva con Hook Personalizado de React

Introducción

En este proyecto, aprenderás a crear un Hook personalizado de React llamado useWindowSize para obtener el tamaño actual de la ventana y usarlo para renderizar condicionalmente la barra de navegación en una aplicación web.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

• Implementar el Hook personalizado useWindowSize para obtener el tamaño actual de la ventana
• Usar el Hook useWindowSize en el componente App para actualizar la barra de navegación según el ancho de la ventana

🏆 Logros

Después de completar este proyecto, podrás:

• Crear un Hook personalizado de React para encapsular funcionalidad reusable
• Utilizar los Hooks useState y useEffect para administrar el estado y los efectos secundarios
• Renderizar componentes condicionalmente según el tamaño actual de la ventana

Implementar el Hook useWindowSize

Para comenzar, abre el editor. Puedes ver los siguientes archivos desde tu editor.

├── package-lock.json
├── package.json
├── public
│   ├── index.html
│   └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── hooks
    │   └── useWindowSize.js
    ├── index.css
    ├── index.js
    ├── reportWebVitals.js
    └── setupTests.js

En este paso, aprenderás a implementar el Hook personalizado useWindowSize para obtener el tamaño actual de la ventana.

1. Abre el archivo useWindowSize.js ubicado en el directorio src/Hooks.
2. En este archivo, importa las dependencias necesarias:

import { useEffect, useState } from "react";

3. Define la función useWindowSize:

import { useEffect, useState } from "react";

export const useWindowSize = () => {
  const [windowSize, setWindowSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight
  });

  const changeWindowSize = () => {
    setWindowSize({ width: window.innerWidth, height: window.innerHeight });
  };

  useEffect(() => {
    window.addEventListener("resize", changeWindowSize);

    return () => {
      window.removeEventListener("resize", changeWindowSize);
    };
  }, []);

  return windowSize;
};

Explicación:

• La función useWindowSize devuelve un objeto que contiene el ancho y la altura actual de la ventana.
• El Hook useState se utiliza para crear una variable de estado windowSize y una función setWindowSize para actualizarla.
• La función changeWindowSize se define para actualizar el estado windowSize cuando se redimensiona la ventana.
• El Hook useEffect se utiliza para agregar un controlador de eventos para el evento resize y eliminarlo cuando el componente se desmonta.
• El objeto windowSize se devuelve desde la función useWindowSize.

Prueba la aplicación

1. Guarda el archivo useWindowSize.js.
2. Descarga las dependencias usando el comando npm install en la terminal, espera a que terminen de descargarse las dependencias y luego inicia el proyecto usando el comando npm start.
3. Una vez que el proyecto se inicia correctamente, haz clic en "Web 8080" para verlo en tu navegador.
4. El efecto es que cuando el usuario redimensiona la ventana, el contenido inferior mostrará el ancho de la ventana, y la barra de navegación superior ocultará dos submenús en pantallas pequeñas y mostrará tres menús en pantallas grandes.

¡Felicitaciones! Has implementado con éxito el Hook useWindowSize y lo has usado en el componente App para actualizar la barra de navegación según el tamaño de la ventana.

Resumen

¡Felicitaciones! Has completado este proyecto. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.