O que é React? Um guia em linguagem simples para quem não é desenvolvedor

React é uma biblioteca JavaScript para criar interfaces de usuário, a parte do app que as pessoas veem e clicam. Você monta as telas 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 a tela sincronizada com os seus dados: quando os dados mudam, o React atualiza as partes da página que dependem deles. Ele foi criado no Facebook (hoje Meta), é de código aberto e é uma das formas mais usadas de criar apps web.

Por que ele importa quando você cria com IA

Se você cria um app web com uma ferramenta de IA, há uma boa chance de ele ser escrito em React. Muitos criadores de apps com IA usam React por padrão, porque é popular, bem documentado e existe uma enorme quantidade de código React com que os modelos de IA aprenderam.

Você não precisa escrever React para criar com IA. Mas saber um pouco ajuda você a:

• Descrever mudanças com precisão. “Deixe o preço em negrito no componente ProductCard” é mais claro do que “deixe os preços em destaque em algum lugar”.
• Entender erros. Mensagens como “Cannot read properties of undefined” ou “Too many re-renders” fazem mais sentido.
• Fazer escolhas sensatas. Apps React simples renderizam no navegador, o que afeta a visibilidade em buscadores e a velocidade do primeiro carregamento. Saber disso ajuda você a decidir quando pedir outra configuração.
• Trabalhar com desenvolvedores depois. React é uma habilidade comum, então um desenvolvedor normalmente consegue assumir um código React.

Uma analogia do dia a dia

Pense em LEGO. Em vez de esculpir um modelo inteiro a partir de um único bloco, você o monta com peças padronizadas. Algumas peças formam uma roda; quatro rodas e outras peças formam um carro. Se você quer que todos os carros tenham rodas vermelhas, muda o design da roda uma única vez.

Os componentes do 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. Mude o Button uma vez, e todos os botões do app mudam.

A outra metade da analogia: imagine que o modelo de LEGO se remonta sozinho sempre que você muda as instruções. É o outro truque do React: você descreve como a tela deve ser para os dados atuais, e o React descobre o que mudar na página.

As ideias principais

Componentes

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

JSX

Os componentes geralmente são 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 observa que a maioria dos projetos o utiliza. Ele é convertido em JavaScript puro antes de rodar no navegador.

Props

Props são as entradas que você passa para um componente, como configurações de uma peça reutilizável:

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

O mesmo ProductCard pode mostrar qualquer produto.

Estado

Estado é a informação que um componente lembra e que pode mudar enquanto o app roda: se um menu está aberto, o que foi digitado em uma caixa de busca, quantos itens há no carrinho. Quando o estado muda, o React renderiza o componente de novo para que a tela corresponda aos dados.

Hooks

Hooks são funções cujos nomes começam com use, como useState (lembrar um valor) e useEffect (executar código depois da renderização, por exemplo, para buscar dados). Você vai vê-los por todo lado em código React gerado por IA.

Um exemplo prático: um contador de carrinho

Suponha que a sua loja online tenha um botão “Adicionar ao carrinho” e um ícone de carrinho mostrando a quantidade de itens. 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 cliente 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 renderiza Shop de novo, passando count={1} para CartIcon.
4. A página agora mostra “Cart (1)”. Ninguém escreveu código dizendo “encontre o texto do carrinho e troque” — a tela acompanha os dados.

Repare também nos limites. Essa contagem fica na memória do navegador. Se você atualizar a página, ela volta para 0. Para manter um carrinho, você precisaria guardá-lo em algum lugar durável, como um cookie, o armazenamento do navegador ou um banco de dados por meio do seu backend. O React cuida da tela; ele não armazena os seus dados.

Onde o React se encaixa em um app web

Um app “Vite + React” é renderizado no navegador (uma single-page app). Um app Next.js pode renderizar as páginas primeiro no servidor, o que ajuda os buscadores e a velocidade do primeiro carregamento.

Termos comuns explicados

Erros comuns e equívocos

• “React é uma linguagem de programação.” É uma biblioteca escrita e usada a partir de JavaScript (ou TypeScript).
• “O React guarda meus dados.” O estado fica no navegador e desaparece ao atualizar a página. Dados duradouros precisam de um backend e de um banco de dados.
• Colocar segredos no código React. Tudo em um app React é enviado para o navegador do visitante. Chaves de API ali ficam públicas. Mantenha-as no servidor.
• “Apps React não conseguem ranquear na busca.” A renderização só no cliente é mais fraca para buscadores, mas a pré-renderização ou a renderização no servidor resolvem a maior parte do problema.
• Componentes gigantes. Um componente de 1.000 linhas é difícil de alterar com segurança, tanto para pessoas quanto para a IA. Peça componentes menores.
• Achar que um app web React é um app de celular. Ele roda no navegador, inclusive em celulares, mas não é um app da App Store.

O que pedir ao seu criador de apps com IA

• “Divida esta página em componentes pequenos e com nomes claros, e diga em qual arquivo cada um está.”
• “Torne o componente ProductCard reutilizável, com nome, preço e imagem como props.”
• “Salve o carrinho no banco de dados para que ele sobreviva a uma atualização da página.”
• “Mantenha todas as chaves de API no servidor; o código React deve chamar a nossa própria API.”
• “Adicione estados de carregamento e de erro para os dados que vêm do servidor.”
• “Se a visibilidade em buscadores importa para estas páginas, pré-renderize-as ou use uma configuração com renderização no servidor.”
• “Explique em linguagem simples o que este erro significa e de qual componente ele vem.”

Para a visão mais ampla, veja frontend vs backend, e, para revisar o que a IA escreveu, como revisar código gerado por IA.

React no Mythex

A menos que você peça outra coisa, o Mythex começa os projetos novos com Vite + React + TypeScript + Tailwind, com uma prévia ao vivo rodando enquanto você conversa. Você pode nomear outra configuração na sua primeira mensagem, por exemplo “Use Next.js” ou “página de entrada em HTML estático simples”, e o Mythex a escolhe a partir do que você escreve; não há uma tela de configurações para isso. A página da documentação sobre como a tecnologia é escolhida explica as opções. O editor de código é somente leitura no plano gratuito; no Pro, você pode editar o código React diretamente e exportar o projeto para continuar trabalhando nele em outro lugar.

Perguntas