Implementando uma Estrutura de Dados de Fila com ReactJS
Tags: queue, fila, react, javascript
Published: 2024-05-29 15:03:06

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3q5bq6wjxnyw76vi3jwp.png)

### 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:

```bash
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`:

```javascript
// 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`:

```javascript
// 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`:

```javascript
// 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](https://codesandbox.io/p/devbox/queue-react-nextjs-xd42pk)**

### 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](https://scientyficworld.org/implement-queue-data-structure-using-reactjs/).