Implementar estructura de datos de pila usando ReactJS

En este artículo, veamos cómo podemos implementar una pila en la aplicación ReactJS.

Enfoque : para implementar la pila, usaremos un enlace personalizado, es decir, el enlace useStackState proporcionado por el paquete Rooks para React. Gestiona el estado en forma de pila. Toma una array como argumento y devuelve los elementos de la array que contienen list, listInReverse y object con los atributos push, pop, peek y length.

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.cs

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

 

Ejemplo: El siguiente ejemplo ilustrará la implementación de la pila 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 { useStackState } from "rooks";
  
export default function App() {
    const numberToPushRef = useRef(3);
    const [list, { push, pop, peek, length }, 
        listInReverse] = useStackState([1, 2, 3]);
  
    function addToStack() {
        numberToPushRef.current = numberToPushRef.current + 1;
        push(numberToPushRef.current);
    }
  
    return (
        <>
            <h1 style={{ color: 'blue', margin: '20px' }}>
                Stack</h1>
            <div style={{
                display: 'block',
                fontSize: '20px',
                margin: '20px'
            }}>
                {listInReverse.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: '#f8e1ee',
                width: '200px',
                borderRadius: '5px',
                padding: '10px'
            }}
                onClick={addToStack}>Push</button>
            <button style={{
                margin: '20px',
                background: '#bbfdd8',
                width: '200px',
                borderRadius: '5px',
                padding: '10px'
            }}
                onClick={pop} warning>
                Pop
            </button>
            <p style={{
                color: '#e84917',
                fontSize: '20px',
                margin: '20px'
            }}>Top Element : {peek()}</p>
  
            <p style={{
                color: '#175ce8',
                fontSize: '20px',
                margin: '20px'
            }}>Stack Size : {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: