O que é React? Conceitos-chave e diferenças em relação ao jQuery

React é uma biblioteca JavaScript para construir interfaces de usuário (UI). Enquanto o jQuery se concentra em selecionar e alterar elementos da página diretamente, o React se concentra em descrever a interface para um determinado estado dos seus dados. Compreender componentes e estado facilita comparar as duas ferramentas e decidir quando usá-las.

O que é React?

No React, você constrói partes de uma interface, como botões, caixas de pesquisa e cartões de artigos, como componentes. Cada componente reúne sua aparência e comportamento relacionado. Você pode combinar componentes em uma página e reutilizar um cartão fornecendo um título e autor diferentes para cada artigo.

O React usa JavaScript, e HTML e CSS continuam sendo úteis para entender a estrutura e a aparência de uma interface web. Instalar o React não fornece automaticamente um servidor de login, um banco de dados ou navegação entre URLs. Você ainda precisa escolher e implementar as outras partes de sua aplicação. Este artigo se concentra em uma interface básica rodando em um navegador; o Guia Rápido Oficial do React apresenta seus blocos de construção.

Os conceitos principais do React

Componentes: unidades de aparência e comportamento

Um componente de função é uma função JavaScript que retorna o conteúdo a ser exibido. Os nomes dos componentes que você define começam com uma letra maiúscula, como ProductCard, enquanto elementos HTML como button usam nomes em minúsculas. O componente a seguir define um cartão uma vez para que você possa reutilizar sua estrutura com diferentes dados de produtos.

function ProductCard({ name, price }) {
  return (
    <article className="product-card">
      <h3>{name}</h3>
      <p>KRW {price}</p>
    </article>
  );
}

JSX: expressando marcação dentro do JavaScript

JSX é uma extensão de sintaxe que permite escrever marcação semelhante ao HTML em um arquivo JavaScript. A seção <article> acima é JSX. Chaves permitem que você insira expressões JavaScript como name e price. Colar este componente em um arquivo HTML comum não é suficiente para executá-lo.

JSX usa className em vez de class e requer tags explicitamente fechadas, como <img />. Múltiplos elementos de nível superior devem ser envolvidos em um elemento pai ou em um Fragment. JSX é comum em exemplos e projetos introdutórios, embora o React possa ser usado sem ele. Veja Regras do React para escrever JSX para a sintaxe.

Props: dados passados por um componente pai

Props, abreviação de properties (propriedades), são valores que um componente pai passa para um filho. Elas permitem que o mesmo cartão mostre nomes e preços diferentes, ou que o mesmo botão mostre etiquetas diferentes. Uma prop pode conter uma string, número, objeto ou função. Aqui está um produto ilustrativo com preço em won coreano (KRW):

<ProductCard name="Beginner keyboard" price={35000} />

Um componente filho lê suas props para construir sua saída. Trate as props como somente leitura: se seus valores precisarem ser alterados, atualize os dados no componente pai para que ele passe novos valores. Um componente pai também pode passar uma função de callback para o componente filho chamar após uma ação do usuário. Passando props para um componente explica este fluxo de dados.

Estado: lembrando valores que mudam

Estado é a informação que um componente precisa lembrar, como o valor de um input, uma seleção ou a contagem de cliques. Chamar useState retorna o valor atual e uma função para atualizá-lo. useState é um Hook, uma função que dá a um componente acesso às funcionalidades do React; chame-o no nível superior da função do componente.

const [count, setCount] = useState(0);

O valor inicial é 0, count é o estado atual, e setCount solicita uma atualização. Alterar apenas uma variável comum não informa ao React para atualizar a interface. Valores que determinam a exibição precisam de uma estrutura de estado apropriada. Estado: a memória de um componente explica como o estado difere de uma variável local.

Como o React atualiza a interface?

Em um contador, clicar em um botão solicita uma atualização do estado. O React então calcula a saída para aquele estado e aplica as mudanças necessárias ao DOM. O Modelo de Objetos do Documento (DOM) é a representação em objeto do navegador de um documento, incluindo seus elementos e texto.

1. Ação do usuário: um clique em um botão executa um manipulador de eventos.
2. Solicitação de atualização: setCount especifica o próximo valor.
3. Renderizar: o React chama componentes para calcular sua saída.
4. Commit: o React aplica as alterações necessárias ao DOM.
5. Paint: o navegador desenha o resultado.

Renderizar significa calcular a saída chamando os componentes. Isso não significa recarregar toda a página nem excluir e recriar todos os elementos HTML. Se a saída não mudar, uma renderização pode não exigir alterações no DOM. A documentação do React sobre renderização e commit distingue essas etapas.

Chamar setCount não substitui imediatamente o valor de count dentro do manipulador de eventos em execução. Isso solicita o estado para uma renderização subsequente, e o React pode agrupar múltiplas atualizações. Quando o novo valor depende do valor anterior, expresse essa relação com uma função atualizadora:

setCount(previousCount => previousCount + 1);

Esta função recebe o estado pendente e retorna o próximo estado. É útil quando várias incrementações estão na fila, porque cada atualização é calculada a partir do resultado anterior. A referência useState explica funções atualizadoras e seus requisitos.

Qual é a diferença entre React e jQuery?

jQuery também é uma biblioteca JavaScript. Ela fornece seletores, manipulação de eventos, alterações de conteúdo e estilos, e requisições Ajax. Ajax, abreviação de Asynchronous JavaScript and XML (JavaScript e XML assíncronos), é uma técnica para trocar dados com um servidor sem recarregar a página inteira; os dados trocados não precisam ser XML. A introdução oficial do jQuery lista a manipulação do DOM e o tratamento de eventos entre seus principais recursos.

Considere adicionar um produto a um carrinho. Com jQuery, seu código poderia inserir um item na lista, atualizar a quantidade e o total, e ocultar a mensagem de carrinho vazio. Com React, você pode descrever essas exibições em termos do estado do carrinho. Nenhuma das abordagens lida automaticamente com erros do servidor ou valida todos os dados recebidos.

React nem sempre é mais rápido, e o código jQuery nem sempre é mais difícil de manter. Os resultados dependem da interface, da implementação, do código carregado e das ações do usuário. Uma única pequena interação e uma interface que sincroniza muitos estados criam necessidades de manutenção diferentes, então avalie-as em seu próprio contexto.

Crie o mesmo contador com jQuery e React

Ambos os exemplos começam em 0 e aumentam a contagem em 1 cada vez que o botão é ativado. Seus títulos identificam a biblioteca; sua funcionalidade e layout são, de outra forma, equivalentes. Compare onde cada implementação atualiza o número exibido. Os exemplos abaixo foram testados com React 19.3.0, jQuery 4.0.0, Vite 8.3.4, Node.js 24.19.0 e Microsoft Edge 154, incluindo cliques do mouse, ativação pelo teclado e recarregamento da página.

Exemplo jQuery: alterar o texto de um elemento selecionado

Salve o código completo abaixo como jquery-counter.html usando codificação UTF-8 e, em seguida, abra-o em um navegador. Ele carrega o jQuery 4.0.0 a partir da Rede de Entrega de Conteúdo oficial (CDN), portanto, é necessário ter uma conexão com a internet. Verifique as versões oficiais do jQuery disponíveis e arquivos.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery counter</title>
  <style>
body {
  margin: 0;
  color: #20242b;
  background: #fff;
  font: 18px/1.7 Arial, sans-serif;
}
.counter {
  box-sizing: border-box;
  max-width: 460px;
  margin: 24px auto;
  padding: 24px;
  border: 1px solid #c6d2dd;
  border-radius: 12px;
  background: #f4f9fc;
}
h1 { font-size: 25px; margin: 0 0 12px; }
button {
  padding: 10px 18px;
  border: 0;
  border-radius: 6px;
  background: #006c9c;
  color: white;
  font: inherit;
  cursor: pointer;
}
button:focus-visible { outline: 3px solid #a03c00; outline-offset: 3px; }
@media (max-width: 510px) { .counter { margin: 16px; } }
  </style>
</head>
<body>
  <main class="counter">
    <h1>jQuery counter</h1>
    <p>Click count: <span id="count" aria-live="polite">0</span></p>
    <button type="button" id="increase">Add 1</button>
  </main>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
  <script>
    let count = 0;

    $('#increase').on('click', function () {
      count += 1;
      $('#count').text(count);
    });
  </script>
</body>
</html>

$("#increase") seleciona o botão e .on("click", ...) anexa o manipulador. Após alterar a variável, o código chama $("#count").text(count) para atualizar o texto exibido. Consulte a referência jQuery .on() e a referência jQuery .text() para essas operações.

Os scripts ficam após o botão no código HTML, então os elementos-alvo já existem quando este exemplo é executado. Se nada mudar, verifique a requisição do CDN e os erros no console nas ferramentas de desenvolvedor do navegador, e compare os IDs dos elementos com os seletores. Ao adaptar isso para um tema do WordPress, evite carregar a biblioteca duas vezes e verifique se $ se refere ao jQuery sob sua configuração noConflict.

Exemplo React: atualize o estado para alterar a interface

Este exemplo de aprendizado usa o modelo JavaScript React do Vite. O Vite fornece um servidor de desenvolvimento e transforma e compila arquivos-fonte. O Node.js executa essas ferramentas no seu computador, e o npm instala pacotes e executa comandos do projeto. Instale uma versão de suporte de longo prazo (LTS) do Node.js que atenda aos requisitos de introdução ao Vite. Em outubro de 2026, o guia lista Node.js 20.19+ ou 22.12+; também verifique quaisquer requisitos adicionais do modelo gerado.

1. Abra um terminal na pasta onde deseja criar o projeto. Certifique-se de que uma pasta com o mesmo nome ainda não exista.
2. Execute os comandos abaixo para criar o modelo JavaScript react e instalar seus pacotes.

npm create vite@latest react-counter -- --template react --no-interactive
cd react-counter
npm install

Na primeira execução, o npm pode pedir para você confirmar a instalação da ferramenta de scaffolding. Após a instalação, substitua o conteúdo de src/App.jsx pelo seguinte código. label é uma prop fornecida pelo componente pai, e count é o estado mantido pelo componente.

import { useState } from 'react';

function Counter({ label }) {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(previousCount => previousCount + 1);
  }

  return (
    <main className="counter">
      <h1>{label}</h1>
      <p>Click count: <span aria-live="polite">{count}</span></p>
      <button type="button" onClick={handleClick}>Add 1</button>
    </main>
  );
}

export default function App() {
  return <Counter label="React counter" />;
}

Use o seguinte código de entrada em src/main.jsx. createRoot conecta a interface React ao elemento HTML com o ID root, e index.css fornece os estilos.

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.jsx';
import './index.css';

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>
);

Substitua src/index.css pelo CSS abaixo para corresponder ao exemplo do jQuery. A substituição App.jsx não importa App.css, então os estilos padrão do componente do template não interferem neste layout.

body {
  margin: 0;
  color: #20242b;
  background: #fff;
  font: 18px/1.7 Arial, sans-serif;
}
.counter {
  box-sizing: border-box;
  max-width: 460px;
  margin: 24px auto;
  padding: 24px;
  border: 1px solid #c6d2dd;
  border-radius: 12px;
  background: #f4f9fc;
}
h1 { font-size: 25px; margin: 0 0 12px; }
button {
  padding: 10px 18px;
  border: 0;
  border-radius: 6px;
  background: #006c9c;
  color: white;
  font: inherit;
  cursor: pointer;
}
button:focus-visible { outline: 3px solid #a03c00; outline-offset: 3px; }
@media (max-width: 510px) { .counter { margin: 16px; } }

O index.html do projeto deve conter <div id="root"></div> e o script do módulo que carrega src/main.jsx. Mantenha esta estrutura a partir do template Vite e use lang="en" para o documento em inglês. Inicie o servidor de desenvolvimento:

npm run dev

Abra o endereço local exibido no terminal. Geralmente é http://localhost:5173, mas uma porta diferente pode ser usada se essa porta estiver ocupada. Pare o servidor com Ctrl+C no terminal. Se as alterações não aparecerem, verifique se você salvou o arquivo e está trabalhando no projeto correto. Os erros de JSX aparecem no terminal ou na exibição de erros do navegador.

O manipulador do React não seleciona o elemento de número nem substitui seu texto. A expressão JSX {count} conecta a saída ao estado, e setCount solicita um novo estado. Em ambos os exemplos, recarregar a página redefine a contagem para 0 porque nenhum armazenamento é implementado. Esses exemplos ilustram os padrões de atualização; eles não são um teste de desempenho.

Quando você deve escolher React ou jQuery?

Adicionar um pequeno recurso a uma página existente

Um botão que alterna um elemento ou um pequeno menu pode ser direto com jQuery. Se a página existente já depende do jQuery, manter essa estrutura pode reduzir o escopo da mudança. Também considere se as APIs padrão do DOM são suficientes. Uma nova dependência não é necessária para cada pequena interação.

Construindo uma interface com estados conectados

O modelo de componentes e estado do React vale a pena ser considerado quando os mesmos dados afetam uma lista de produtos, filtros e totais do carrinho, ou quando interfaces semelhantes aparecem repetidamente. Você ainda precisa decidir qual componente possui cada estado e quando os dados do servidor devem ser atualizados. Adotar React sozinho não garante um bom design.

Adicionando React a uma parte de um site existente

Você não precisa reconstruir todo o site para usar React. Você pode montar um componente dentro de um elemento específico e manter o restante da página em sua forma existente. O guia oficial para adicionar React a um projeto existente descreve a configuração e o escopo.

Se React e jQuery compartilharem uma página, dê a eles limites claros de propriedade do DOM. Adicionar ou remover arbitrariamente filhos gerenciados pelo React pode colocar o DOM real fora de sincronia com a visão que o React tem dele. Um plugin que manipula o DOM precisa de uma integração que gerencie sua inicialização e limpeza dentro do ciclo de vida apropriado. Veja as orientações do React sobre a modificação do DOM que ele gerencia para essas limitações.

Antes de adotar uma ferramenta, considere a complexidade do estado da interface, os componentes que você pode reutilizar, a experiência em JavaScript da sua equipe e a configuração de desenvolvimento e implantação. Uma pequena página com uma dependência existente do jQuery tem necessidades diferentes de uma nova aplicação interativa. Depois de aprender o básico de HTML, CSS e JavaScript, executar esses contadores fornece uma comparação concreta entre alterar os elementos diretamente e descrever uma interface por meio do estado.