React: componente com estado

Toda tela mostra dado que muda. O trabalho chato está em manter a tela e o dado combinando. React troca a instrução "vá lá e mude aquele texto" por uma descrição do resultado, e assume a tarefa de aplicar a diferença no navegador.

O que React resolve

Numa página escrita só com JavaScript, cada dado que muda vira uma instrução de DOM escrita na mão: achar o elemento, trocar o texto dele, lembrar de trocar também o outro lugar onde aquele mesmo número aparece. Com três dados na tela, dá pra segurar. Com trinta, você esquece um, e a tela passa a mostrar uma coisa enquanto a memória do programa guarda outra.

React inverte a ordem. Você escreve uma função que devolve como a tela deve ficar para os valores de agora. Quando um valor muda, React roda essa função de novo e aplica no navegador só a diferença entre o resultado novo e o anterior. Você deixa de mandar em cada atualização e passa a descrever o resultado.

Os conceitos que você precisa antes da primeira linha

• Componente. Uma função JavaScript que devolve marcação. O nome começa com letra maiúscula, e é assim que o React distingue um componente seu de uma tag comum de HTML.
• JSX. A sintaxe que deixa você escrever marcação dentro do arquivo JavaScript. O navegador não entende JSX direto, então uma ferramenta de build traduz tudo pra chamadas de função antes de servir a página. Chaves abrem uma janela pro JavaScript no meio da marcação: {contador} mostra o valor da variável.
• Props. Os argumentos do componente, que entram de fora. O componente lê as props e não altera o valor delas.
• Estado. A memória do componente entre uma renderização e outra. Variável comum não dá conta, e a documentação do React explica por quê em duas frases: variáveis locais não sobrevivem à renderização seguinte, e mudar uma delas não avisa o React de que a tela precisa mudar. O useState resolve os dois problemas de uma vez, guardando o valor e disparando a nova renderização.
• Renderização. A cada mudança de estado, o React roda sua função inteira outra vez, do zero, e compara o que ela devolveu com o que havia antes. Só o que diferiu chega ao DOM de verdade.

O framework por dentro: componente, props e estado

A ideia central do React cabe numa fórmula: a interface é uma função do estado. Você não manda "troque o texto daquele parágrafo". Você muda o dado, e o React redesenha o que depende dele. É o contrário do jQuery, e é o que elimina a classe inteira de bug "a tela ficou diferente do dado".

• Componente é uma função JavaScript que devolve um pedaço de interface. A aplicação é uma árvore de componentes, cada um pequeno e reutilizável.
• JSX é a sintaxe que parece HTML dentro do JavaScript. Não é HTML: cada tag vira uma chamada de função na compilação, e por isso class vira className e as chaves {} abrem uma janela pra expressões da linguagem.
• Props são a entrada do componente, imutáveis, passadas de pai pra filho como atributos. Estado é o dado que o próprio componente controla, criado com o hook useState. Mudar o estado com a função devolvida é o que dispara o redesenho.

import { useState } from "react";

function Contador({ rotulo }) {            // "rotulo" é uma prop
  const [total, setTotal] = useState(0);   // estado
  return (
    <button onClick={() => setTotal(total + 1)}>
      {rotulo}: {total}
    </button>
  );
}

// uso: <Contador rotulo="Cliques" />

Componente, prop, estado, redesenho: esse ciclo é 80% do React. Hooks além do useState, contexto e roteamento são camadas por cima da mesma ideia.

Este aqui precisa de instalação. React roda num projeto montado por uma ferramenta de build, porque alguém tem que traduzir o JSX antes do navegador ver a página.

1. Confira sua versão do Node no terminal:

   node -v

   O Vite pede Node 20.19 ou mais novo, ou 22.12 ou mais novo. Se o seu for anterior, atualize antes de seguir.

2. Crie o projeto. Este é o comando que a documentação do React indica na página de montar um app do zero:

   npm create vite@latest ola-react -- --template react-ts

3. Entre na pasta e instale as dependências:

   cd ola-react
   npm install

4. Suba o servidor de desenvolvimento:

   npm run dev

   O terminal responde com um endereço, quase sempre http://localhost:5173/. Abra ele no navegador. A tela inicial do template aparece.

5. Abra src/App.tsx e troque o conteúdo inteiro do arquivo por isto:

   import { useState } from 'react'
   
   export default function App() {
     const [contador, setContador] = useState(0)
   
     return (
       <main>
         <h1>Olá, mundo</h1>
         <p>Cliques: {contador}</p>
         <button onClick={() => setContador(contador + 1)}>Clique aqui</button>
       </main>
     )
   }

6. Salve o arquivo. A página no navegador se atualiza sozinha, sem você recarregar nada.

O que React não é

React não é framework. A própria página inicial da documentação chama React de biblioteca para interfaces, e a diferença aparece no dia em que seu app precisa de rota, de carregar dado de um servidor e de gerar arquivo pra produção. Nada disso vem no pacote. React desenha componente na tela, e para.

É por isso que a documentação oficial recomenda começar por um framework construído em cima dele, como Next.js ou React Router, em vez de mandar o iniciante montar tudo peça por peça. O projeto do exercício acima usa o Vite justamente pra ter o mínimo de build e nada de opinião sobre o resto, que é o formato certo pra estudar o React sozinho antes de escolher o que vem em volta.

Fontes

• React, "State: A Component's Memory", de onde vem a explicação de por que variável local não sustenta a tela. Conferida em 15/08/2026.
• React, referência do useState, a assinatura do Hook e o que a função de atualizar faz. Conferida em 15/08/2026.
• React, "Build a React App from Scratch", de onde saiu o comando de criação do projeto com o Vite. Conferida em 15/08/2026.
• React, "Creating a React App", a recomendação oficial de começar por um framework. Conferida em 15/08/2026.
• Vite, guia de início, a versão mínima de Node exigida. Conferida em 15/08/2026.

O hello world desta página foi executado em 15/08/2026 numa máquina Linux com Node 22.23.0 e npm 10.9.8. O comando de criação instalou react 19.2.8, react-dom 19.2.8 e vite 8.2.1. Com o servidor de desenvolvimento no ar em http://localhost:5173/, a página mostrou "Olá, mundo" e "Cliques: 0", e depois de dois cliques no botão a linha passou a mostrar "Cliques: 2". A prova descrita acima é o que apareceu na tela.

Para continuar

Se o useState pareceu mágica, o buraco está embaixo: JavaScript primeiro, porque componente é função e props são argumentos. Depois vale abrir Vue, que resolve o mesmo problema por outro caminho e deixa a escolha do React bem mais consciente. O mapa da stack web mostra onde cada um entra.

O curso desta trilha está em preparação. A lista paga menos.

Os tutoriais daqui continuam gratuitos. O que está a caminho é um curso pago que transforma esse mapa em formação guiada, na ordem certa e com projeto. Deixe seu e-mail: você recebe os estudos novos gratuitos e, no lançamento, o desconto de quem entrou na lista primeiro.