Implementando uma Estrutura de Dados de Fila com ReactJS

Introdução

As filas (queues) são estruturas de dados fundamentais usadas em muitos algoritmos e aplicações. Uma fila segue o princípio FIFO (First In, First Out), onde o primeiro elemento a ser inserido é o primeiro a ser removido. Neste artigo, vamos implementar uma fila simples usando ReactJS.

Estrutura de Projeto

Primeiro, vamos criar a estrutura básica do nosso projeto React. Se você ainda não tem o create-react-app instalado, faça isso com o comando:

npx create-react-app queue-react
cd queue-react
npm start

Criando a Fila

Vamos começar criando uma estrutura de fila em JavaScript. Crie um arquivo chamado queue.js na pasta src:

// src/queue.js
class Queue<T> {
  items: T[] = [];
  constructor() {
    this.items = [];
  }

  enqueue(item: T) {
    this.items.push(item);
  }

  dequeue() {
    if (this.isEmpty()) {
      return null;
    }
    return this.items.shift();
  }

  peek() {
    if (this.isEmpty()) {
      return "Fila Vazia";
    }
    return this.items[0];
  }

  size() {
    return this.items.length;
  }

  isEmpty() {
    return this.items.length === 0;
  }
}
export default Queue;

Integrando a Fila com React

Agora, vamos criar um componente React para interagir com a fila. Crie um arquivo chamado QueueComponent.js na pasta src:

// src/QueueComponent.js
import React, { useState } from 'react';
import Queue from './queue';

const QueueComponent = () => {
  const [queue, setQueue] = useState(new Queue());
  const [input, setInput] = useState("");
  const [top, setTop] = useState("");
  const [size, setSize] = useState(0);

  const handlePush = () => {
    setQueue(queue);
    queue.enqueue(input);
    setTop(queue.peek());
    setSize(queue.size());
    setInput("");
  };

  const handlePop = () => {
    queue.dequeue();
    setTop(queue.peek());
    setSize(queue.size());
  };

  const handleChange = (e) => {
    setInput(e.target.value);
  };

  return (
    <div>
      <h1>Impementação de Fila</h1>
      <input 
        type="text" 
        value={input} 
        onChange={(e) => setInput(e.target.value)} 
        placeholder="Entre com um novo elemento"
      />
      <button onClick={handlePush}>Enfileirar</button>
      <button onClick={handlePop}>Desenfileirar</button>
      <div>
        <p>Elemento do topo: {top}</p>
        <p>Último elemento: {queue.items[0]}</p>
        <p>Tamanho da File: {size}</p>
      </div>
      <p>Fila:</p>
      <div>
        {queue.items.map((item) => (
          <span>
            {item}
          </span>
        ))}
      </div>
    </div>
  );
};

export default QueueComponent;

Utilizando o Componente no App

Para finalizar, vamos utilizar o QueueComponent no nosso arquivo principal App.js:

// src/App.js
import React from 'react';
import QueueComponent from './QueueComponent';

function App() {
  return (
    <div className="App">
      <QueueComponent />
    </div>
  );
}

export default App;

Exemplo da Implementação no codesandbox

Conclusão

Com essa implementação, você criou uma fila básica usando ReactJS. Esta é uma base sólida para entender como funcionam as estruturas de dados em um ambiente de desenvolvimento moderno.

Referência

Para mais detalhes e exemplos, visite o artigo de referência.