Porque os profissionais usam React

Lembras-te de copiar aquele menu?

No Nível 1, tinhas um cabeçalho com menu em cada página. E sempre que adicionavas uma página nova, tinhas de copiar o menu – e corrigi-lo em todo o lado com cada alteração. Chato com três páginas, um pesadelo com trinta. E essa dor é exatamente onde a nossa história começa.

Componentes: escreve uma vez, usa em todo o lado

Os profissionais pensaram: e se o menu fosse um pedaço de código que se «insere» em cada página? Mudas num sítio – muda em todo o lado. Um pedaço assim chama-se componente.

E não é só o menu. Olha para o teu site com olhos de conjunto de blocos:

• um cartão de jogador (tens 4× – e só muda o nome e a posição),
• uma foto na galeria (10× – só muda a imagem),
• um botão (em todo o lado – só muda o texto).

O site de um profissional não é um monte de ficheiros HTML. É uma caixa de LEGO: uns blocos personalizados (componentes) montados numa aplicação inteira.

O que é o React

React é uma ferramenta (uma biblioteca) para JavaScript que trata deste tipo de montagem. Foi inventado no Facebook, é gratuito, e uma grande parte da internet está construída nele: Facebook, Instagram, Netflix, Airbnb… Um componente em React parece-se com isto – não te preocupes, estamos só a olhar por agora:

function PlayerCard({ name, position, jerseyNumber }) {
  return (
    <div className="card">
      <h3>{name} · #{jerseyNumber}</h3>
      <p>{position}</p>
    </div>
  );
}

E usa-se como uma etiqueta HTML personalizada:

<PlayerCard name="Jake" position="goalkeeper" jerseyNumber={1} />
<PlayerCard name="Alex" position="midfield" jerseyNumber={8} />

Reconheces isto? É uma função (do Nível 2) que devolve HTML. O cartão escreve-se uma vez e usa-se com dados diferentes – como um carimbo com letras trocáveis.

Superpoder número dois: o React trata do redesenho

No Nível 2 escreveste: «encontra o elemento, muda o texto, adiciona uma classe…» Em aplicações grandes, há tanto desta reorganização manual que te perdes. O React inverte a lógica:

Descreves como a página deve parecer para dados dados. Quando os dados mudam, o React descobre sozinho o que redesenhar.

A pontuação muda de 0 para 1? Não procuras nenhum elemento – mudas só o número e o React redesenha o que for preciso. Vais ver isto em ação na lição sobre estado.

O que vem neste nível

1. Vais instalar ferramentas profissionais: o terminal e Node.js (próxima lição).
2. Vais configurar a tua primeira app React com Vite.
3. Vais aprender componentes, props e estado.
4. Vais reconstruir o teu site do Nível 1 em React.
5. Vais construir o teu próprio servidor Node.js e ligar um livro de visitas.

O que ficas a saber desta lição

• Copiar o mesmo código para vários sítios é uma armadilha – já descobriste isso no Nível 1 por ti.
• Um componente é uma função que devolve um pedaço de página. Escreve uma vez, usa muitas vezes com dados diferentes.
• O React redesenha a página por ti: mudas os dados, ele muda o ecrã.

© 2026 Ing. Martin Polak / AlgoRhino · Condições de uso do conteúdo