Programação B

Buscando Dados no Componente

No capítulo anterior, a chamada fetch acontecia diretamente no <script>. Com React, precisamos de um mecanismo para disparar o fetch quando o componente é montado na tela e armazenar o resultado para renderização. É aqui que entram dois conceitos fundamentais do React: state e effect.

State: dados que mudam

O state é um valor que pertence ao componente e que, quando muda, faz o componente re-renderizar. Declaramos um state com o hook useState:

const [events, setEvents] = useState<Event[]>([]);

events é o valor atual (um array vazio no início). setEvents é a função que atualiza esse valor. Quando chamamos setEvents(novoArray), o React re-renderiza o componente com o novo array — e a interface na tela muda automaticamente.

Effect: código que roda no momento certo

Um effect é código que roda depois do componente ser montado no DOM. É o lugar certo para buscar dados de um servidor:

useEffect(() => {
  fetch("/api/events")
    .then((res) => res.json())
    .then((data) => setEvents(data));
}, []);

O array vazio [] no final é a lista de dependências. Ele diz ao React: “execute esse efeito uma vez, quando o componente aparece na tela, e nunca mais”. Se passássemos [filtro], o efeito rodaria toda vez que a variável filtro mudasse.

Juntando tudo: o componente EventList

import { useState, useEffect } from "react";
import { Event } from "./types";

function EventList() {
  const [events, setEvents] = useState<Event[]>([]);

  useEffect(() => {
    fetch("/api/events")
      .then((res) => res.json())
      .then((data) => setEvents(data));
  }, []);

  return (
    <div>
      <h1>TamoJunto — Eventos</h1>
      {events.map((ev) => (
        <article key={ev.id}>
          <h2>{ev.title}</h2>
          <time dateTime={ev.date}>
            {new Date(ev.date).toLocaleString("pt-BR", {
              dateStyle: "short",
              timeStyle: "short",
            })}
          </time>
          <p>{ev.description}</p>
          <p>📍 {ev.location}</p>
          <p>
            Vagas: {ev.capacity} · Organizado por {ev.organizer_name}
          </p>
        </article>
      ))}
    </div>
  );
}

export default EventList;

O events.map(...) percorre o array e retorna um <article> para cada evento. O atributo key={ev.id} é obrigatório em listas: o React usa a key para identificar qual item mudou, foi adicionado ou removido, evitando re-renderizar a lista inteira quando um único item muda.

Atualize App.tsx para usar o componente:

import EventList from "./EventList";

function App() {
  return <EventList />;
}

export default App;

Abra o navegador (com o backend rodando em outro terminal). Os 12 eventos aparecem na tela — mesmos dados, mesma aparência, mas agora gerenciados pelo React.