¿Cómo implementar la estructura de datos de cola en ReactJS?

En este artículo veremos cómo podemos implementar una cola en la aplicación ReactJS.

Enfoque: para implementar la cola, usaremos un enlace personalizado, es decir, el enlace useQueueState proporcionado por el paquete Rooks para React. Gestiona el estado en forma de cola. Toma una array como argumento y devuelve los elementos de la array que contienen una lista y un objeto con los atributos encolar, desencolar, mirar y longitud.

A continuación se muestra la implementación paso a paso del enfoque anterior:

Módulos Requeridos:

• npm
• crear-reaccionar-aplicacion

Creación de la aplicación React e instalación del módulo:

Paso 1: Cree una aplicación React usando el siguiente comando:

npx create-react-application demo

Paso 2: después de crear la carpeta de su proyecto, es decir, la demostración, muévase a ella con el siguiente comando:

cd demo

Paso 3: Instale Rooks desde npm.

npm i rooks

Abra la carpeta src y elimine los siguientes archivos:

• logotipo.svg
• setupTests.js
• Aplicación.prueba.js
• índice.css
• informeWebVitals.js
• Aplicación.css

Estructura del proyecto: El proyecto debería verse así:

 

Ejemplo: en este ejemplo, implementaremos la cola de estructura de datos en React JS:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
  
  
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>
);

import React, { useRef } from "react";
import { useQueueState } from "rooks";
  
export default function App() {
    const numberToPushRef = useRef(3);
    const [list, { enqueue, dequeue, peek, 
        length }] = useQueueState([1, 2, 3]);
  
    function addToQueue() {
        numberToPushRef.current = 
            numberToPushRef.current + 1;
          
        enqueue(numberToPushRef.current);
    }
  
    return (
        <>
            <h1 style={{ color: 'blue', margin: '20px' }}>Queue</h1>
            <div style={{
                display: 'flex',
                flexDirection: 'horizontal',
                width: '400px',
                height: '60px',
                fontSize: '20px',
                margin: '20px',
                borderTop: '2px solid green',
                borderBottom: '2px solid green'
            }}>
                {list.map((item) => {
                    return <div style={{
                        width: '30px',
                        height: '30px',
                        background: '#a3fc9d',
                        borderRadius: '5px',
                        margin: '10px',
                        textAlign: 'center'
                    }}
                        key={item}>{item}</div>;
                })}
            </div>
            <button style={{
                margin: '20px',
                background: '#f69dfc',
                width: '200px',
                borderRadius: '5px'
            }}
                onClick={addToQueue}>enqueue</button>
            <button style={{
                margin: '20px',
                background: '#f69dfc',
                width: '200px',
                borderRadius: '5px'
            }}
                onClick={dequeue} warning>
                dequeue
            </button>
            <p style={{
                color: '#e84917',
                fontSize: '20px',
                margin: '20px'
            }}>Front Element : {peek()}</p>
  
            <p style={{
                color: '#175ce8',
                fontSize: '20px',
                margin: '20px'
            }}>Length of Queue : {length}</p>
  
        </>
    );
}

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

 npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida: