O que é React? Guia em linguagem simples para não programadores

O React é uma biblioteca JavaScript para criar interfaces de utilizador: a parte da app que as pessoas veem e tocam. Constróis os ecrãs com peças reutilizáveis chamadas componentes, como um botão, um cartão de produto ou uma página inteira, e o React mantém o ecrã sincronizado com os teus dados: quando os dados mudam, o React atualiza as partes da página que dependem deles. Foi criado no Facebook (hoje Meta), é de código aberto e é uma das formas mais usadas para criar apps web.

Porque é que o React importa quando crias com IA

Se crias uma app web com uma ferramenta de IA, há uma boa probabilidade de ela estar escrita em React. Muitos criadores de apps com IA usam React por defeito, porque é popular, bem documentado e existe uma enorme quantidade de código React a partir do qual os modelos de IA aprenderam.

Não precisas de escrever React para criar com IA. Mas saber um pouco ajuda-te a:

• Descrever alterações com precisão. «Muda o componente ProductCard para que o preço fique em negrito» é mais claro do que «faz com que os preços se destaquem em algum lado».
• Perceber os erros. Mensagens como «Cannot read properties of undefined» ou «Too many re-renders» fazem mais sentido.
• Fazer escolhas sensatas. As apps React simples renderizam no browser, o que afeta a visibilidade nas pesquisas e a velocidade do primeiro carregamento. Saber isso ajuda-te a decidir quando pedir outra configuração.
• Trabalhar mais tarde com programadores. O React é uma competência comum, por isso um programador consegue normalmente pegar num projeto React.

Uma analogia do dia a dia

Pensa em LEGO. Em vez de esculpir um modelo inteiro a partir de um só bloco, constróis com peças padrão. Algumas peças fazem uma roda; quatro rodas e outras peças fazem um carro. Se quiseres que todos os carros tenham rodas vermelhas, alteras o desenho da roda uma única vez.

Os componentes React são as peças. Um componente Button é usado dentro de um ProductCard, que é usado dentro de um ProductGrid, que faz parte da ShopPage. Alteras o Button uma vez, e todos os botões da app mudam.

A outra metade da analogia: imagina que o modelo LEGO se reconstruía sozinho sempre que mudavas as instruções. Esse é o outro truque do React: descreves como o ecrã deve ter aspeto para os dados atuais, e o React descobre o que mudar na página.

As ideias centrais

Componentes

Um componente é uma função JavaScript que devolve um pedaço de interface. A documentação do React descreve um componente como uma parte da interface que tem a sua própria lógica e aparência. Os nomes dos componentes começam com letra maiúscula.

JSX

Os componentes são normalmente escritos em JSX, que parece HTML misturado com JavaScript:

function Greeting() {
  return <h1>Welcome back!</h1>;
}

O JSX é opcional, mas a documentação do React refere que a maioria dos projetos o usa. É convertido em JavaScript simples antes de correr no browser.

Props

As props são as entradas que passas a um componente, como definições de uma peça reutilizável:

<ProductCard name="Lavender Candle" price={24} />

O mesmo ProductCard pode mostrar qualquer produto.

Estado

O estado é a informação que um componente guarda e que pode mudar enquanto a app corre: se um menu está aberto, o que foi escrito numa caixa de pesquisa, quantos artigos estão no carrinho. Quando o estado muda, o React volta a renderizar o componente para o ecrã corresponder.

Hooks

Os hooks são funções cujos nomes começam por use, como useState (guardar um valor) e useEffect (executar código depois de renderizar, por exemplo para ir buscar dados). Vais vê-los em todo o código React gerado por IA.

Um exemplo prático: um contador de carrinho

Suponhamos que a tua loja online tem um botão «Adicionar ao carrinho» e um ícone de carrinho que mostra o número de artigos. Em React, fica mais ou menos assim:

import { useState } from "react";

function Shop() {
  const [cartCount, setCartCount] = useState(0);

  return (
    <div>
      <CartIcon count={cartCount} />
      <ProductCard
        name="Lavender Candle"
        price={24}
        onAdd={() => setCartCount(cartCount + 1)}
      />
    </div>
  );
}

function CartIcon({ count }) {
  return <span>Cart ({count})</span>;
}

function ProductCard({ name, price, onAdd }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>${price}</p>
      <button onClick={onAdd}>Add to cart</button>
    </div>
  );
}

O que acontece quando um comprador clica em «Adicionar ao carrinho»:

1. O onClick do botão chama onAdd, que chama setCartCount.
2. O React atualiza o estado cartCount de 0 para 1.
3. O React volta a renderizar Shop, passando count={1} para CartIcon.
4. A página mostra agora «Cart (1)». Ninguém escreveu código a dizer «encontra o texto do carrinho e muda-o»: o ecrã segue os dados.

Repara também nos limites. Esta contagem vive na memória do browser. Se atualizares a página, volta a 0. Para manter um carrinho, terias de o guardar num sítio duradouro: um cookie, o armazenamento do browser, ou uma base de dados através do teu backend. O React trata do ecrã; não guarda os teus dados.

Onde o React encaixa numa aplicação web

Uma app «Vite + React» é renderizada no browser (uma single-page app). Uma app Next.js pode renderizar primeiro as páginas no servidor, o que ajuda os motores de pesquisa e a velocidade do primeiro carregamento.

Termos comuns explicados

Erros comuns e ideias erradas

• «O React é uma linguagem de programação.» É uma biblioteca escrita e usada a partir de JavaScript (ou TypeScript).
• «O React guarda os meus dados.» O estado vive no browser e desaparece ao atualizar. Os dados duradouros precisam de um backend e de uma base de dados.
• Colocar segredos no código React. Tudo numa app React é enviado para o browser do visitante. As chaves de API ali são públicas. Mantém-nas no servidor.
• «As apps React não conseguem aparecer nas pesquisas.» A renderização apenas no cliente é mais fraca para pesquisa, mas a pré-renderização ou a renderização no servidor resolve a maior parte do problema.
• Componentes gigantes. Um componente de 1.000 linhas é difícil de alterar com segurança, tanto para pessoas como para a IA. Pede componentes mais pequenos.
• Assumir que uma app web React é uma app de telemóvel. Corre no browser, incluindo em telemóveis, mas não é uma app da App Store.

O que pedir ao teu criador de apps com IA

• «Divide esta página em componentes pequenos e com nome, e diz-me em que ficheiro está cada um.»
• «Torna o componente ProductCard reutilizável, com name, price e image como props.»
• «Guarda o carrinho na base de dados para sobreviver a uma atualização da página.»
• «Mantém todas as chaves de API no servidor; o código React deve chamar a nossa própria API.»
• «Acrescenta estados de carregamento e de erro para os dados que vêm do servidor.»
• «Se a visibilidade nas pesquisas for importante nestas páginas, pré-renderiza-as ou usa uma configuração com renderização no servidor.»
• «Explica em linguagem simples o que significa este erro e de que componente vem.»

Para a visão geral, vê frontend vs backend, e para rever o que a IA escreveu, como rever código gerado por IA.

React na Mythex

Salvo se pedires outra coisa, a Mythex começa os projetos novos com Vite + React + TypeScript + Tailwind, com uma pré-visualização em direto a correr enquanto conversas. Podes indicar outra configuração no teu primeiro prompt — por exemplo «Usa Next.js» ou «página de destino simples em HTML estático» — e a Mythex escolhe-a a partir do que escreves; não há um ecrã de definições para isso. A página da documentação sobre como a tecnologia é escolhida explica as opções. O editor de código é só de leitura no plano gratuito; no Pro podes editar o código React diretamente e exportar o projeto para continuares a trabalhar nele noutro lado.

Perguntas