O que é React? O guia completo para começar em 2026

O React é a biblioteca mais usada do mundo para construir interfaces — e continua sendo, mais de uma década depois de ter sido aberta ao público. Na pesquisa da Stack Overflow de 2025, 44,7% dos desenvolvedores relataram usar React, contra 18,2% do Angular e 17,6% do Vue.

Se você está começando agora, esse número importa por um motivo prático: aprender React é uma das apostas mais seguras que você pode fazer em front-end hoje. Neste guia eu vou do zero — o que é React, como ele pensa, o que mudou nos últimos anos — até mercado de trabalho e como estudar sem se perder.

Uma observação antes de começar: muito material sobre React que ainda circula na internet é de 2018 ou 2019. Nesse intervalo o create-react-app foi descontinuado para projetos novos, os hooks viraram o padrão absoluto, o Gatsby praticamente sumiu e o React ganhou Server Components. Este texto está atualizado para o React 19.2, a versão estável em 2026.

O que é React?

O React é uma biblioteca JavaScript que tem como finalidade criar interfaces de usuário. Sim, é simples assim. Tá bom, não tão simples assim :) Mas neste artigo vamos deixar o máximo de conceitos claro para você.

Com React, é possível construir telas de forma declarativa. Isso significa que você declara como a tela vai reagir a um determinado estado/dado. Imagine o seguinte cenário: se eu tenho uma variável representando um contador armazenando o valor 10, eu posso declarar em React como esse contador será mostrado na tela. Assim, o React reage ao valor/dado/estado mostrando-o na tela — acho que agora ficou mais claro o motivo do React chamar-se React: “reagir” em inglês.

Compare com a forma imperativa, que é como se fazia com jQuery ou DOM puro:

// imperativo: você descreve os PASSOS
const el = document.querySelector('#contador')
el.textContent = 'Contador: ' + valor
if (valor > 10) {
  el.classList.add('alerta')
} else {
  el.classList.remove('alerta')
}

// declarativo: você descreve o RESULTADO
<p className={valor > 10 ? 'alerta' : ''}>Contador: {valor}</p>

No primeiro caso, você é responsável por manter a tela em sincronia com os dados a cada mudança — e é exatamente aí que nascem os bugs de interface. No segundo, você descreve como a tela deve ser para um determinado dado, e o React se encarrega de chegar lá.

Outra vantagem é o aumento de qualidade pela simplificação da criação de testes automatizados. Uma forma bastante efetiva de testar um componente é injetar um valor/estado interno e ver se o componente reage de forma correta.

Outra característica interessante do React é que ele é baseado em componentes. Dessa maneira, é possível dividir a aplicação em pequenos pedaços de interface, criados declarativamente, que reagem a uma parte de um dado. E com a combinação e composição destes “pequenos pedaços” é possível criar uma aplicação maior.

Em React tudo é JavaScript, por isso é simples e fácil manipular ou realizar testes automatizados. A parte que gera mais confusão e estranhamento inicial no ecossistema do React é o JSX: uma forma de descrever uma estrutura hierárquica em JavaScript.

E o JSX? Preciso aprender mais uma linguagem?

Muita gente fica na dúvida se vai precisar aprender mais uma linguagem quando ouve falar em JSX. E na verdade acabam sentindo até mesmo uma certa “repulsa” ao ver JSX pela primeira vez. Isso se deve ao fato de o JSX dar a sensação de estarmos criando um HTML/XML dentro do JavaScript. Mas calma, não é bem assim!

Vamos entender primeiro o que é o JSX em si. JSX vem de JavaScript eXtension e foi criado pela equipe do React para construir uma hierarquia (estrutura em árvore) de elementos de forma mais simplificada. Devido à complexidade e à falta de legibilidade de construir uma estrutura em árvore apenas com instruções simples, o JSX evita que isso se torne uma tarefa árdua.

Não precisamos criar nossas interfaces em React utilizando JSX, porém seu uso é recomendado e adotado de forma unânime pela comunidade. O JSX é muito parecido com HTML (aí surge a estranheza), porém ele é traduzido para JavaScript em um processo de compilação/transpilação. Por esse motivo, você não vai precisar aprender nada novo: basta entender que JSX é JavaScript e que existem mudanças sutis para suprir a diferença entre ele e o HTML.

// componente em JSX
const MeuComponente = () => (
  <div>
    <h1 className="title">Test</h1>
    <p>Nice!</p>
  </div>
)

// o que o compilador gera (JSX transform moderno)
import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime'

const MeuComponente = () =>
  _jsxs('div', {
    children: [
      _jsx('h1', { className: 'title', children: 'Test' }),
      _jsx('p', { children: 'Nice!' })
    ]
  })

Se repararmos como o código é criado, fica mais simples entender o motivo pelo qual as palavras comumente utilizadas em HTML precisam ser alteradas em JSX por serem reservadas em JavaScript — como class, que vira className, e for, que vira htmlFor.

Um detalhe que mudou e economiza linha: desde o React 17 você não precisa mais importar o React só para usar JSX. O compilador importa sozinho o que precisa do react/jsx-runtime.

Uma dúvida clássica de quem está começando: como comentar dentro do JSX? Como é JavaScript, você usa chaves — eu expliquei isso em detalhe no post sobre comentários em JSX. E para renderizar listas, você usa map, exatamente como faria com qualquer array — tem um post só sobre loops e repetições no JSX.

O ponto-chave do JSX e de como o React lida com a interface é que, depois que você aprende como funciona o ecossistema do React, você consegue utilizar esse conhecimento praticamente em qualquer plataforma: web, dispositivos móveis (React Native), desktop (Electron ou Tauri), TVs, e por aí vai.

O que é um componente?

Um componente em React é uma abstração de uma região da interface da aplicação que ele representa. E como tudo em React é um componente, até mesmo uma página inteira pode ser um componente.

Componentes podem ser compostos por outros componentes, em uma relação conhecida como composição. Note também ser importante nomear seus componentes com iniciais maiúsculas — é assim que o JSX diferencia um componente seu de uma tag HTML nativa.

Historicamente existiram duas formas de criar um componente em React: usando funções ou usando classes ES6. Hoje só uma delas importa. Desde a chegada dos hooks, em 2019, componentes de função são a forma padrão — a própria documentação oficial ensina apenas essa. Classes continuam funcionando por retrocompatibilidade, mas se você está aprendendo agora, você pode simplesmente ignorá-las.

Um componente de função é uma função em JavaScript que retorna uma estrutura em JSX ou null:

const Componente = (props) => {
  return <h1>Olá {props.nome}!</h1>
}

A forma antiga, baseada em classe, exigia um método render:

// forma legada — você vai encontrar isso em código antigo,
// mas não precisa escrever assim em projetos novos
class Componente extends React.Component {
  render() {
    return <h1>Olá DevPleno!</h1>
  }
}

Nas versões anteriores do React, a única forma de estendermos as funcionalidades de um componente com estado interno e outros métodos (por exemplo, executar uma função quando o componente era montado na tela) era em componentes na forma de classes. Com o advento dos hooks, passamos a ter o mesmo comportamento em componentes de função — com muito menos verbosidade.

Se quiser ver composição na prática, escrevi um post mostrando como usar áreas de um componente para ejetar outros componentes, e outro sobre como criar o componente mais simples e eficaz possível.

O que é o estado de um componente e por que ele é tão importante?

O estado de um componente é uma fonte de dados que descreve o componente/aplicação naquele dado momento. O estado não é como o componente é visualizado, mas sim os dados necessários para que o componente seja visualizado naquele momento.

O estado em React é composto por variáveis e seus valores, porém possui uma característica a mais: sempre que elas são atualizadas, o componente será desenhado novamente na tela. O React faz isso de forma otimizada — e ainda é possível controlar quando queremos que o componente renderize ou não, geralmente em um processo de otimização do código.

Por ser a origem de como os componentes serão desenhados na tela, gerenciar bem o estado do componente e da aplicação ajuda muito a aumentar a qualidade do software de maneira geral. E quanto mais escalamos o aplicativo em número de funcionalidades, mais percebemos que será necessário impor regras de como o estado é atualizado e gerenciado.

O componente abaixo usa um hook chamado useState. Esse hook é responsável por manter um valor relativo àquele componente. E sempre que chamamos o setContador, nosso componente é redesenhado na tela:

import { useState } from 'react'

const Contador = () => {
  const [contador, setContador] = useState(5)
  const alterar = () => {
    setContador(oldValue => oldValue + 1)
  }
  return (
    <p>
      Contador: {contador}
      <button onClick={alterar}>Incrementar contador</button>
    </p>
  )
}

export default Contador

Repare no setContador(oldValue => oldValue + 1). Essa forma — passando uma função em vez do valor direto — é a mais segura, porque garante que você está partindo do valor mais recente do estado, mesmo que várias atualizações aconteçam em sequência.

Outra coisa muito comum é decidir o que mostrar com base no estado. Isso se chama render condicional, e tem um post inteiro aqui sobre as diferentes maneiras de fazer isso — os exemplos usam classes, mas a lógica é idêntica em componentes de função.

React Hooks

Os hooks foram lançados na versão 16.8 do React, em fevereiro de 2019, e mudaram completamente a forma de escrever React. Eles permitem usar estado e outras funcionalidades sem escrever uma classe.

Os hooks que você vai usar no dia a dia são poucos:

• useState — guarda um valor que, ao mudar, redesenha o componente.
• useEffect — executa efeitos colaterais (buscar dados, assinar eventos, mexer no document). Use com moderação: boa parte dos useEffect que eu vejo em code review não deveria existir.
• useContext — lê um valor compartilhado sem precisar passar props por vários níveis.
• useRef — guarda um valor que persiste entre renders sem causar novo render (muito usado para acessar um elemento do DOM).
• useMemo / useCallback — memorizam valores e funções caras. Ferramentas de otimização, não de estreia.
• useReducer — para estado com transições mais complexas, no mesmo espírito do Redux.

O React 19 trouxe hooks novos voltados a formulários e dados assíncronos, como useActionState e useOptimistic. Veio junto o use, que permite ler uma Promise ou um contexto direto no corpo do componente — e que, apesar do nome, não é um hook.

Duas regras valem para todos os hooks: eles só podem ser chamados no topo do componente (nunca dentro de if, loop ou função aninhada) e só dentro de componentes React ou de outros hooks. Isso existe porque o React identifica cada hook pela ordem em que ele é chamado.

O use é a exceção justamente por não ser um hook: como não depende dessa ordem de chamada, ele pode aparecer dentro de if e de loops. A segunda regra continua valendo — só dá para chamá-lo dentro de um componente React ou de um hook customizado.

E você pode — e deve — criar os seus próprios hooks. Um hook customizado é apenas uma função cujo nome começa com use e que usa outros hooks dentro dela. É a melhor forma de reaproveitar lógica entre componentes:

import { useState, useEffect } from 'react'

function useLarguraDaTela() {
  // começa em 0 porque no servidor não existe window —
  // ler window aqui quebraria o render em SSR
  const [largura, setLargura] = useState(0)

  useEffect(() => {
    const onResize = () => setLargura(window.innerWidth)
    onResize()
    window.addEventListener('resize', onResize)
    return () => window.removeEventListener('resize', onResize)
  }, [])

  return largura
}

Repare no cuidado com o window: o estado inicial não pode lê-lo. Componentes React também renderizam no servidor (é assim que Next.js e Astro geram HTML), e lá window não existe. Por isso a leitura fica dentro do useEffect, que só roda no navegador.

Gerenciamento de estado: Context, Redux, Zustand e TanStack Query

Quando a aplicação cresce, começam a surgir nomes famosos do ecossistema: Redux, Zustand, Jotai, MobX, XState, Context API. Aqui vai o conselho mais importante desta seção: você não precisa de nenhum deles para começar.

Antes de escolher uma biblioteca, separe seu estado em dois tipos:

1. Estado de servidor — dados que vêm de uma API e que, na prática, são um cache do que está no backend. Lista de produtos, perfil do usuário, pedidos.
2. Estado de cliente — dados que só existem no navegador. Um modal aberto, o tema escuro, o passo atual de um formulário.

Essa distinção resolve metade da confusão. A maior parte do que as pessoas tentam colocar no Redux é estado de servidor, e para isso existe ferramenta específica: o TanStack Query (antigo React Query) cuida de cache, revalidação, loading e erro, e elimina uma quantidade enorme de código.

Para o estado de cliente, a ordem que eu recomendo é:

• useState para o que é local do componente.
• Context API para o que é global mas muda pouco — tema, usuário logado, idioma.
• Uma biblioteca só quando o estado global for grande e mudar muito. Aí vale olhar Zustand (mais simples, virou o padrão prático da comunidade) ou Redux Toolkit.

Sobre o Redux

O Redux é uma biblioteca JavaScript de código aberto que tem como função gerenciar o estado de uma aplicação. Ele ainda é muito relevante — só deixou de ser o caminho automático que era em 2018.

Uma correção importante em relação a materiais antigos: hoje ninguém deveria escrever Redux “na mão”. A forma oficial e recomendada é o Redux Toolkit, que reduz drasticamente o boilerplate que deu ao Redux a fama de verboso. Se você viu um tutorial mandando criar arquivos de actionTypes, actions e reducers separados com switch, ele está desatualizado.

O Redux é formado por três peças: store, actions e reducers. O store é conhecido como single source of truth — lá ficam os dados que descrevem o estado da aplicação, considerados a única e mais confiável fonte de dados.

As actions são disparadas no store e são a única forma de solicitar uma alteração. Quando esse disparo acontece, o store percorre os reducers passando o estado atual e a action disparada; se aquele reducer produz algum efeito, ele cria um novo estado a partir do antigo, aplica as mudanças e retorna esse novo estado. A partir daí, a aplicação reage à mudança.

O interessante dessa abordagem é que reducers são funções puras (cujo retorno depende somente de seus parâmetros). Isso aumenta muito a testabilidade do código: basta sabermos qual era o estado e qual action foi disparada para esperar um novo estado. Funções puras são as mais fáceis de testar unitariamente.

Já as actions são objetos simples em JavaScript que possuem pelo menos uma chave type e podem conter mais dados relevantes:

const authAction = {
  type: 'AUTH',
  email: 'usuario@exemplo.com'
}

Repare no que a action não carrega: a senha. Actions circulam por todos os reducers, aparecem no Redux DevTools e frequentemente vão parar em logs. Dados sensíveis devem ir direto da tela para a requisição, sem passar pelo estado global.

Aconselho aprender Redux (ou Zustand) depois que você já conseguiu exercitar e criar um projeto com React. Você só vai entender e visualizar as vantagens quando suas aplicações começarem a ficar maiores — é exatamente aí que entram as necessidades de organização. Evite uma dor de cabeça: não use Redux nos seus primeiros contatos com React.

Virtual DOM e reconciliação

Dentre as particularidades do React está o Virtual DOM, uma técnica utilizada para representar e cuidar da atualização da tela. Independente de qual plataforma (aplicativo móvel, web, entre outros), o React constrói primeiro a descrição da tela em um DOM virtual.

Mas, afinal, o que é o DOM virtual? Imagine a seguinte situação: você está criando uma interface e ela possui um botão. Antes de renderizar o botão na tela, o React cria uma estrutura em árvore em memória, com esse componente representado dentro dela, para depois checar como vai traduzir isso para o ambiente em que está. No caso da web, ele vai mostrar um <button> no DOM real do navegador.

A vantagem desse processo é que o React manipula o virtual DOM de maneira otimizada — afinal, manipular uma árvore em memória é mais rápido do que manipular o DOM real. Depois que a estrutura em memória foi construída, ele sincroniza as duas versões da tela com o mínimo de passos possível. Esse processo é conhecido como reconciliação (reconciliation).

Além disso, o Virtual DOM permite que a mesma aplicação rode em arquiteturas diferentes — React Native, web, desktop — porque basta criar um novo “reconciliador” para cada plataforma. É isso que faz o React ganhar destaque quando comparado a outras tecnologias.

Uma nota honesta, já que muito material antigo exagera nesse ponto: o Virtual DOM não é magicamente mais rápido que tudo. Frameworks como Svelte e Solid mostraram que dá para ser rápido sem ele. A grande vantagem do Virtual DOM nunca foi só velocidade — foi a portabilidade e o modelo mental declarativo. E já existe o React Compiler, que insere memorização automaticamente e reduz boa parte da necessidade de otimizar renders na mão — vale lembrar que ele é uma ferramenta de build separada, que você precisa instalar e configurar no projeto.

Quando surgiu o React?

O React foi criado por Jordan Walke, engenheiro do Facebook (hoje Meta). Surgiu internamente em 2011, foi usado no Instagram em 2012 e só foi aberto à comunidade em 29 de maio de 2013. Atualmente é mantido pela Meta em conjunto com desenvolvedores independentes e outras empresas.

Ou seja: aquele papo de que “React é novo” já não faz o menor sentido. São mais de dez anos de uso em produção nas maiores aplicações do mundo — é uma tecnologia madura, com ecossistema estabelecido e caminho de migração previsível entre versões.

O React ganhou destaque porque atendeu a uma necessidade real do mercado: uma maneira de construir interfaces (algo extremamente complexo) de forma mais intuitiva, sem perder a qualidade do código.

Uma característica que vale destacar: as mudanças de versão do React costumam causar impacto mínimo na API. Se você quer um exemplo de como a equipe conduz essas transições, escrevi na época sobre o React 16, o “pacificador” — e, quase uma década depois, o mesmo código continua funcionando.

Como criar um projeto React hoje

Atenção, porque aqui está o erro mais comum de quem segue tutorial antigo. O create-react-app, que foi a forma padrão de iniciar um projeto React por quase uma década, foi oficialmente descontinuado para projetos novos pela equipe do React em fevereiro de 2025. Ele não sumiu — continua instalável e os projetos existentes seguem rodando —, mas entrou no que o próprio README chama de “estase de longo prazo”: sem mantenedores ativos, lento e acumulando dependências desatualizadas. Não comece um projeto novo com ele.

As opções recomendadas hoje:

Ferramenta	Quando usar
Vite	SPA sem servidor. É o caminho mais simples e rápido para aprender.
Next.js	Aplicações que precisam de SEO, rotas, renderização no servidor ou Server Components.
React Router	Aplicações com roteamento robusto, com ou sem servidor.
Expo	Aplicativos mobile com React Native.

Se você está aprendendo, comece pelo Vite. Um comando e você está rodando:

npm create vite@latest meu-app -- --template react-ts
cd meu-app
npm install
npm run dev

Repare no -ts no template: TypeScript hoje é praticamente padrão de mercado em React. Você não precisa dominá-lo no primeiro dia, mas vai encontrá-lo em quase toda vaga.

De qual maneira o React pode ser utilizado?

O React é utilizado no desenvolvimento de interfaces. A facilidade de aprender React de maneira geral, para depois aplicar os mesmos conceitos tanto em mobile quanto em web ou em qualquer outra plataforma, é o que o torna extremamente versátil.

Na prática, com React você pode construir:

• Sites e aplicações web — com Vite, Next.js ou Astro.
• Aplicativos mobile nativos — com React Native e Expo, para iOS e Android.
• Aplicações desktop — com Electron ou Tauri.
• Interfaces em TVs, consoles e dispositivos embarcados — via renderizadores específicos.

Outra característica importante é que o React está intimamente ligado ao front-end, tendo assim uma preocupação maior com a experiência do usuário.

Assim, toda vez que pensar em React, lembre-se: ele pode ser utilizado de diversas maneiras, em variadas plataformas, e tem como finalidade fundamental a criação de interfaces com base na experiência do usuário.

Quais as vantagens do React?

As vantagens do React são várias. Algumas estão relacionadas às suas próprias características:

• Criação de interfaces de maneira intuitiva e facilitada;
• Views declarativas, que fazem com que seu código seja mais simples de depurar;
• Criação de componentes encapsulados, capazes de gerenciar o próprio estado, bastando combiná-los para criar interfaces mais complexas;
• Componentes escritos em JavaScript, sem linguagem de template própria;
• Possibilidade de desenvolver novos recursos com React sem reescrever o código existente — dá para adotar React em um pedaço de um sistema legado;
• O React pode ser renderizado no servidor, com Node, e ainda ser usado para criar aplicativos mobile com React Native;
• Estabilidade de API entre versões, o que reduz o custo de manutenção a longo prazo;
• Um ecossistema gigantesco: para praticamente qualquer problema comum já existe uma biblioteca madura.

Outra vantagem diz respeito ao mercado de trabalho, que está cada vez mais voltado para desenvolvedores React, e o número de vagas na área é consistentemente alto. Muitas empresas aqui no Brasil já usam React — existe uma lista pública com várias delas.

React 19: o que mudou de mais relevante

Se você aprendeu React há alguns anos e está voltando, estes são os pontos que mais mudaram:

Server Components. Componentes que executam no servidor e nunca são enviados como JavaScript para o navegador. Eles podem acessar banco de dados diretamente e reduzem drasticamente o bundle enviado ao cliente. É a mudança conceitual mais profunda do React na última década, e você a encontra principalmente via Next.js.

Actions. Uma forma padronizada de lidar com envio de formulários e mutações assíncronas, com estados de pendente, erro e atualização otimista já resolvidos — via useActionState, useOptimistic e useFormStatus.

O hook use. Permite ler uma Promise ou um contexto diretamente, e — diferente dos demais hooks — pode ser chamado condicionalmente.

React Compiler. Um compilador que aplica memorização automaticamente, tornando useMemo e useCallback desnecessários na maior parte dos casos. Ele não vem ligado junto com o React 19: é um pacote separado, que entra no seu build (via plugin do Babel ou do bundler). Alguns frameworks já o ativam por padrão em projetos novos; fora deles, a adoção é opt-in — e useMemo e useCallback continuam disponíveis para otimizar na mão.

Simplificações. forwardRef deixou de ser necessário (ref agora é uma prop normal), e o Context pode ser usado direto como <Contexto> em vez de <Contexto.Provider>.

Nada disso invalida o que você já sabe. Componente, estado, props e JSX continuam sendo a base — e é exatamente por isso que vale investir em entender bem o fundamento.

Qual a diferença entre React e outras tecnologias?

React vs Angular

Angular é uma plataforma (ou framework) de aplicações web de código aberto e front-end baseada em TypeScript, mantida por uma equipe do Google.

A diferença mais importante e que deve ser considerada logo de início: o React é uma biblioteca, o Angular é um framework. O React resolve a camada de interface e deixa você escolher o resto (rotas, requisições, estado). O Angular já vem com tudo decidido — o que pode ser bom em times grandes que querem padronização, e ruim quando você precisa fugir do padrão.

Quando o Angular surgiu na versão 1.x, além de ser muito disruptivo, era extremamente produtivo — porém as aplicações acabavam ficando um pouco “bagunçadas”. Com o tempo, as versões seguintes complicaram: na passagem do Angular 1 para o 2, toda a API do framework mudou, sem retrocompatibilidade, dificultando muito a migração das aplicações existentes. Isso custou caro em confiança.

Vale registrar que o Angular moderno melhorou bastante nesse aspecto — signals, standalone components e uma cadência de releases previsível tornaram o framework consideravelmente mais agradável do que na época do Angular 2. Se você precisa escolher hoje, a decisão é menos sobre qualidade técnica e mais sobre ecossistema e mercado: o React tem mais vagas, mais bibliotecas e mais material.

Para aplicações em escala, o Angular deixou de ser efetivo para mim, e por essa razão acabei optando por React.

React vs Vue

O Vue é uma tecnologia excelente e injustamente pouco usada no Brasil. Ele acerta em ser mais fácil de começar: o sistema de reatividade do Vue faz mais coisa por você, e a sintaxe de template é mais próxima de HTML.

A diferença prática está no modelo mental. No Vue, a reatividade é automática e implícita. No React, é explícita — você diz quando o estado muda. Isso torna o React um pouco mais trabalhoso no começo e mais previsível quando a aplicação cresce.

Onde o React ganha com folga é ecossistema e empregabilidade — especialmente no Brasil, onde a diferença de número de vagas é grande.

React Native vs Flutter

Flutter é uma tecnologia criada pelo Google para desenvolvimento de aplicativos móveis, para Android e iOS. O Flutter chegou como concorrente do React Native e amadureceu bastante desde então — é uma opção legítima, e seria desonesto dizer o contrário.

A grande vantagem do React Native é o reaproveitamento: se você já sabe React para web, se já tem uma forma de consumir APIs, tratar dados e organizar projetos, a transição para o React Native é muito mais suave. Você aproveita conhecimento, bibliotecas e, em muitos casos, código.

Já o Flutter exige aprender Dart, uma linguagem que você provavelmente não vai usar em nenhum outro lugar, e um ecossistema próprio de widgets. Em compensação, ele entrega mais consistência visual entre plataformas, porque desenha a própria interface em vez de usar componentes nativos.

Um ponto importante que mudou: o React Native passou por uma reescrita profunda, a New Architecture, que virou padrão a partir da versão 0.76. Ela eliminou a “ponte” assíncrona que era a principal crítica de performance da tecnologia. Se sua última informação sobre React Native é de que “ele é lento por causa da bridge”, essa informação está desatualizada.

Há grandes players usando React Native em produção — e essa escala acaba trazendo muita qualidade para o ecossistema. Para quem já vem do React, aprender React Native é bem mais vantajoso do que começar do zero em Flutter.

React Native vs Ionic

O Ionic é um framework para criação de aplicativos móveis híbridos. Possui código aberto e promete tornar a criação de aplicativos mais rápida.

A diferença fundamental: o Ionic renderiza sua aplicação dentro de uma WebView (é um site rodando dentro de um app), enquanto o React Native usa componentes nativos da plataforma. Isso faz com que o aplicativo em React Native performe melhor e tenha a “fluidez” de um app nativo.

Em compensação, o Ionic garante um desenvolvimento mais rápido para quem já domina web e pode ser suficiente se o app for essencialmente conteúdo e formulários. Cada tecnologia tem sua particularidade, e o uso vai depender do caso concreto.

React vs Xamarin / .NET MAUI

O Xamarin foi um ecossistema criado pela Microsoft com finalidade parecida: desenvolvimento multiplataforma. Aqui cabe uma atualização importante — o suporte ao Xamarin foi encerrado pela Microsoft em maio de 2024. Ele foi sucedido pelo .NET MAUI.

O ponto continua válido: toda a estrutura é da Microsoft, o código é em C#, e as formas de atualizar dados também seguem o padrão .NET. É uma escolha coerente se seu time já é fortemente .NET, e pouco atrativa fora desse contexto.

Já em React, o mais interessante é a possibilidade de aproveitar a experiência com JavaScript em todos os lugares — sem falar que a forma reativa dispensa a preocupação com binding manual.

React e React Native: o mesmo conhecimento em plataformas diferentes

Os conceitos da biblioteca React são sempre os mesmos. Se pensarmos em React como uma biblioteca de view onde descrevemos “telas”, teremos componente, estado e propriedades, independentemente da plataforma.

O importante é conhecer bem e saber manipular componentes em React. Sabendo organizar bem o estado desses componentes, é possível aproveitar muito da experiência tanto para web quanto para dispositivos móveis — e, na verdade, para qualquer plataforma que use React como base.

Por esse motivo, ao estudar React, foque principalmente em entender os conceitos relacionados a componentes, manipulação de estado, propriedades e organização de projetos. Na hora de aplicar em diversas plataformas, apenas alguns detalhes serão diferentes.

O que muda de fato são os elementos representados na interface. Enquanto na web você usa tags HTML, no React Native você usa componentes que são traduzidos para elementos nativos:

Web	React Native
<div>	<View>
<p>, <span>, <h1>	<Text>
<img>	<Image>
<input>	<TextInput>
<button>	<Pressable>
lista com scroll	<FlatList>

Duas observações práticas para quem vem da web: no React Native todo texto precisa estar dentro de um <Text> (não existe texto solto), e não existe CSS — a estilização é feita com objetos JavaScript via StyleSheet, usando um subconjunto de Flexbox.

import { View, Text, Pressable, StyleSheet } from 'react-native'

const Tela = () => (
  <View style={styles.container}>
    <Text style={styles.titulo}>Olá DevPleno!</Text>
    <Pressable onPress={() => console.log('clicou')}>
      <Text>Clique aqui</Text>
    </Pressable>
  </View>
)

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', padding: 16 },
  titulo: { fontSize: 24, fontWeight: 'bold' }
})

Percebeu? A estrutura do componente é exatamente a mesma. Muda o vocabulário, não a gramática.

Bibliotecas de interface: React Bootstrap, MUI, shadcn/ui

Você raramente vai construir botões, modais e menus do zero. As opções mais usadas hoje:

• shadcn/ui — não é uma biblioteca de dependência, e sim uma coleção de componentes que você copia para o seu projeto e passa a ser dono. Combina com Tailwind CSS e virou o padrão de fato em projetos novos.
• MUI — o mais completo e maduro, baseado em Material Design. Ótimo para painéis administrativos.
• Ant Design — muito forte em tabelas, formulários e aplicações corporativas densas.
• Chakra UI — bom equilíbrio entre acessibilidade e facilidade de customização.
• React Bootstrap — o Bootstrap, que surgiu antes do React e já era usado por muita gente, ganhou uma versão com componentes construídos em React. Continua sendo uma escolha razoável se seu time já conhece Bootstrap.

Uma dica: se você está aprendendo, escreva alguns componentes na mão antes de adotar uma biblioteca. Você aprende muito mais sobre composição e props construindo o seu próprio <Modal> do que importando um pronto.

GraphQL com React

O GraphQL é uma linguagem de consulta de dados para APIs, desenvolvida pelo Facebook em 2012 e aberta ao público em 2015. Ele descreve os dados da API de maneira completa, facilitando inclusive sua evolução ao longo do tempo.

É importante dizer que o GraphQL não é um banco de dados, nem um framework, e também não é exclusivo para HTTP.

O GraphQL é utilizado para que a aplicação cliente requisite ao servidor exatamente os dados de que precisa — nem mais, nem menos. É isso que resolve dois problemas clássicos de APIs REST: over-fetching (receber campos que você não vai usar) e under-fetching (precisar de três requisições para montar uma tela).

Na prática, com React:

const PERFIL = gql`
  query Perfil($id: ID!) {
    usuario(id: $id) {
      nome
      email
      pedidos {
        id
        total
      }
    }
  }
`

Uma tela inteira, com usuário e pedidos, em uma única requisição — e trazendo apenas os campos declarados.

Para consumir GraphQL em React, as opções principais são o Apollo Client, mais completo e com cache normalizado, e o urql, mais leve. Também dá para usar fetch puro com TanStack Query, que costuma ser o suficiente em projetos menores.

Vale ser franco sobre o cenário atual: o GraphQL não dominou o mundo como se imaginava em 2018. Ele continua excelente para APIs consumidas por muitos clientes diferentes e para agregar múltiplas fontes de dados, mas para uma aplicação com um único front-end, REST bem feito — ou Server Components — costuma resolver com menos complexidade. Aprenda GraphQL quando tiver o problema que ele resolve.

Como fica a questão de SEO com React? Consigo criar sites com React?

De maneira geral, sites feitos como SPA pura em React (aquele projeto que gera um index.html vazio e monta tudo no navegador) não são bem indexados. Embora o Google hoje execute JavaScript, isso torna a indexação mais lenta, menos confiável e ainda deixa de fora vários outros robôs — redes sociais, ferramentas de IA, buscadores menores.

A solução é usar tecnologias que aproveitam todo o poder do React, mas geram uma versão renderizada de cada página no servidor ou em build:

• Next.js — a escolha mais comum. Faz SSR, SSG e Server Components, e resolve SEO por padrão.
• Astro — ótimo para sites de conteúdo e blogs, permitindo usar componentes React apenas onde há interatividade. Este blog que você está lendo é feito em Astro.
• React Router em modo framework — também suporta renderização no servidor.

Aqui cabe outra correção importante em relação a material antigo: por anos a resposta padrão para “React e SEO” era Gatsby. Não é mais. Depois da aquisição pela Netlify, o Gatsby entrou em modo de manutenção, o ecossistema de plugins ficou largamente abandonado e seus downloads despencaram. Não comece um projeto novo em Gatsby em 2026 — e, se você tem um site em Gatsby rodando, vale planejar a migração para Next.js ou Astro antes que as dependências virem um problema de segurança.

Posso usar React com PHP, Java ou Python?

Sim. Como o React atua no front-end, ele não depende da tecnologia de back-end. Você pode construir seu backend em PHP, Java, Python, Go, C#, Node — o que fizer sentido para você e para o seu time.

Existem basicamente três formas de integrar:

1. Front-end separado consumindo API. Seu backend expõe uma API (REST ou GraphQL) e o React consome. É o arranjo mais comum e o que dá mais liberdade aos dois lados.
2. React embutido em páginas do backend. Você renderiza a página no Laravel, no Rails ou no Spring e “pendura” componentes React em regiões específicas. É excelente para modernizar sistemas legados aos poucos, sem reescrever tudo.
3. Sem backend próprio. Usando serviços que abstraem o servidor, como Firebase, Supabase ou back-ends serverless.

A pergunta certa não é “React funciona com a minha linguagem?”, e sim “como eu quero desenhar a fronteira entre front e back?”.

Como aprender React do zero?

Quanto tempo leva para dominar React?

Essa é uma das perguntas que mais recebemos aqui no DevPleno. Por ser uma tecnologia em alta no mercado, as pessoas querem saber quanto tempo de estudo é necessário.

Sendo direto e honesto, com estudo consistente de cerca de uma hora por dia:

• 2 a 4 semanas para construir suas primeiras telas com componentes, props e estado.
• 2 a 3 meses para se sentir produtivo em um projeto real, com rotas, consumo de API e formulários.
• 6 a 12 meses para arquitetura, performance, testes e as decisões que separam quem “usa React” de quem “constrói produto com React”.

Repare que a primeira etapa é curta. O que leva tempo não é a sintaxe do React — é aprender a estruturar software.

Se você quer aprender rápido, aqui vão algumas dicas:

• Não pule etapas, internalize os conceitos;
• Siga uma metodologia já testada ou mergulhe na documentação oficial, que hoje é excelente e interativa;
• Evite comparações — não tente traduzir Angular para React, os conceitos são diferentes;
• Encare como algo novo, que você precisa aprender desde o começo;
• Coloque a mão na massa e construa projetos seus;
• Aprenda com os erros: exercite e esbarre nos problemas.

Em qual nível de programação devo estar para aprender React?

Para aprender React é necessário ter noções de programação. Quanto mais JavaScript você souber, melhor — mas não deixe que isso vire um impeditivo. Se você já programa em outra linguagem, consegue aprender React e JavaScript ao mesmo tempo. Quanto mais React você aprende, automaticamente mais JavaScript você acaba aprendendo.

Dito isso, existe um conjunto pequeno de JavaScript que faz uma diferença enorme e que vale ver antes:

• Arrow functions e funções como valores;
• Desestruturação de objetos e arrays;
• Spread e rest (...);
• map, filter e reduce;
• Módulos (import / export);
• Promises e async/await;
• Encadeamento opcional (?.).

Se esses sete itens forem confortáveis, o React vai parecer muito mais fácil. Boa parte da dificuldade que as pessoas atribuem ao React é, na verdade, dificuldade com JavaScript moderno.

Por que aprender React?

O React vem ganhando cada vez mais espaço no mercado de tecnologia. Por essa razão, as vagas destinadas aos profissionais que dominam React oferecem boa remuneração — e muitas delas são para trabalho remoto, ou seja, você pode trabalhar direto de casa.

Mas há um motivo ainda melhor: o React é uma habilidade transferível. Aprendendo os conceitos uma vez, você consegue construir para web, mobile e desktop. Poucas tecnologias de front-end oferecem esse alcance com um único investimento de aprendizado.

Qual o melhor livro para aprender React?

É muito comum pedir indicações de livros na fase inicial de aprendizagem. Mas aqui vai uma dica preciosa antes de você procurar um: o React está sempre evoluindo, e os livros ficam desatualizados rápido.

Um exemplo concreto: qualquer livro anterior a 2020 vai ensinar componentes de classe como forma principal, e qualquer livro anterior a 2025 vai mandar você usar create-react-app. Você acabaria aprendendo coisas que precisará desaprender.

Por isso, minha recomendação para o conteúdo base é a documentação oficial em react.dev. Ela foi completamente reescrita, é interativa, ensina com hooks desde a primeira página e está sempre atualizada. É o melhor material gratuito sobre React que existe — e não é nem perto.

Livros e cursos continuam valendo muito para o que a documentação não cobre: arquitetura, decisões de projeto, testes e a experiência de quem já quebrou a cara antes de você.

Principais sites, aplicativos e empresas que utilizam React

O React se tornou uma tecnologia dominante, e a prova disso é que diversos produtos que você usa todos os dias rodam com ela. Alguns exemplos conhecidos:

• Facebook e Instagram
• WhatsApp Web
• Netflix
• Airbnb
• Uber
• PayPal
• Tesla
• BBC
• Zendesk
• Shopify
• Discord
• Notion
• iFood
• OLX
• Nubank (mobile, com React Native)

Viu só? Esses são só alguns, mas há muitos e muitos outros por aí. E é mais uma prova de que o React continua crescendo — um dos principais motivos para investir no aprendizado dessa tecnologia.

Se quiser ver especificamente o cenário nacional, a comunidade mantém uma lista de empresas que usam React no Brasil no GitHub.

Como é o mercado de trabalho para um desenvolvedor React?

Quanto ganha um desenvolvedor React?

O React é uma tecnologia amplamente usada por empresas de todos os portes, o que significa volume constante de vagas. Em contrapartida, a oferta de profissionais que realmente dominam a tecnologia — e não apenas conseguem montar uma tela — continua menor que a demanda.

Faixas aproximadas no Brasil, em regime CLT, considerando o mercado em 2026:

• Júnior: de R$ 4.000 a R$ 8.000 por mês
• Pleno: de R$ 8.000 a R$ 13.000 por mês
• Sênior: de R$ 12.000 a R$ 20.000 por mês

Alguns pontos importantes sobre esses números. Em regime PJ, costuma-se somar de 20% a 40% sobre o equivalente CLT. E para vagas remotas em empresas do exterior pagando em dólar ou euro, os valores são consideravelmente mais altos — é aí que aparecem as faixas de US$ 60 mil a US$ 120 mil por ano que você vê citadas.

Trate essas faixas como referência, não como promessa: elas variam muito por região, porte da empresa, senioridade real e capacidade de negociação. Para dados atualizados, vale consultar o ProgramaThor e o Glassdoor.

É importante esclarecer que os valores variam de acordo com a experiência e a maturidade de cada desenvolvedor — não é a tecnologia sozinha que define o salário. Por esse motivo, aprenda React, coloque a mão na massa e pratique, mas busque ser um bom desenvolvedor como um todo, e não apenas um bom “usuário de React”.

Como encontrar vagas de React?

O React está em alta e, por essa razão, é relativamente fácil encontrar vagas. Aqui vão alguns sites que podem ajudar:

No Brasil:

• ProgramaThor — focado em vagas de tecnologia no Brasil, com filtro por stack e informação de salário em boa parte dos anúncios.
• Coodesh — vagas de tecnologia com processo seletivo estruturado e muitas oportunidades remotas.
• LinkedIn — continua sendo um excelente aliado. Busque por “React” filtrando por localidade ou por remoto, e candidate-se pela própria plataforma.
• Indeed — agregador com grande volume de vagas, exibindo requisitos e, muitas vezes, faixa salarial.

Remoto e internacional:

• Remote OK — reúne empresas contratando para vagas remotas no mundo todo. Basta filtrar por “react”.
• We Work Remotely — um dos maiores quadros de vagas remotas, com uma seção específica de front-end.
• JavaScript Jobs — especializado no ecossistema JavaScript (é o antigo JS Remotely).
• Wellfound — vagas em startups, com salários e equity informados. Era conhecido como AngelList.
• Toptal — rede que seleciona desenvolvedores para projetos internacionais. Eu mesmo faço parte dela, e escrevi aqui no blog sobre o que é a Toptal, como é o processo seletivo e quanto se ganha trabalhando por meio dela.

Além desses sites, outra dica é procurar por vagas abertas nas empresas de que você gosta. Geralmente, no próprio site da empresa há uma seção de carreiras — e você pode conseguir uma oportunidade em um lugar que já admira.

Como conseguir um trabalho remoto em React?

Felizmente, grande parte das vagas em React aceita trabalho remoto. Aproveite para visitar os sites listados acima e candidate-se ao que fizer sentido.

Duas dicas importantes. A primeira: para vagas remotas fora do Brasil, é necessário estar com o inglês bem afiado — falado, não só lido. A segunda: em processos remotos, seu portfólio público pesa mais do que o currículo. Um GitHub com projetos reais, bem escritos e com README decente vale mais que qualquer lista de tecnologias.

E tem um detalhe que quase ninguém pesquisa antes de precisar: como receber esse dinheiro. Se a vaga for em uma empresa estrangeira, vale entender desde já a parte de impostos e recebimento do exterior.

Preciso saber inglês para desenvolver em React?

Para escrever código, não. Para ter as melhores oportunidades, sim.

São dois motivos práticos. O primeiro é o acesso a material: a documentação oficial, os RFCs, as discussões no GitHub e as respostas mais atualizadas estão em inglês. Quando você depende só de conteúdo traduzido, você trabalha sempre com alguns meses de atraso.

O segundo é dinheiro. As vagas remotas mais bem pagas são de empresas estrangeiras, e todas elas exigem comunicação em inglês — normalmente em entrevistas e reuniões, ou seja, inglês falado.

A boa notícia é que o inglês técnico é mais simples do que o inglês geral. Você não precisa de fluência de negociador; precisa conseguir ler documentação e participar de uma call. É uma meta bem mais atingível do que parece — eu já escrevi sobre qual o nível de inglês realmente exigido em processos internacionais.

Qual é o melhor curso de React?

Existem muitas ofertas de curso de React hoje, e a resposta honesta é: depende do que você já sabe e de onde quer chegar.

Se você está começando do zero, a documentação oficial resolve o conteúdo base de graça e melhor do que a maioria dos cursos. Um bom curso deve entregar o que ela não entrega: método, sequência, projetos de verdade e alguém para dizer quando você está tomando uma decisão ruim.

Aqui no DevPleno, meu trabalho hoje está concentrado em programas voltados a quem quer ir além de escrever componentes — arquitetura, produto e carreira. O TheBestStack é sobre montar uma stack moderna que aguenta produção; o Simple SaaS é sobre transformar ideia em negócio; e o TheSiders é mentoria 1:1 para quem está construindo o próprio caminho.

Se você não sabe qual faz sentido para o seu momento, eu montei uma página comparando os três: veja o comparativo dos programas e escolha o próximo passo com clareza.

Sobre quem está do outro lado: sou Tulio Faria, professor desde os 18 anos, Mestre em Sistemas da Informação pela USP e faço parte da Toptal, empresa de recrutamento que tem como princípio reunir apenas 3% dos melhores desenvolvedores do mundo.

Mini tutorial: sua primeira aplicação React

Vamos fechar com algo prático. Uma lista de tarefas — pequena o suficiente para caber aqui, completa o suficiente para exercitar componente, props, estado e listas.

Crie o projeto:

npm create vite@latest minhas-tarefas -- --template react
cd minhas-tarefas
npm install
npm run dev

Agora substitua o conteúdo de src/App.jsx:

import { useState } from 'react'

// Componente filho: recebe dados e funções por props.
// Ele não sabe de onde vêm os dados — só sabe desenhar e avisar.
function Tarefa({ tarefa, aoAlternar, aoRemover }) {
  return (
    <li>
      <label style={{ textDecoration: tarefa.feita ? 'line-through' : 'none' }}>
        <input
          type="checkbox"
          checked={tarefa.feita}
          onChange={() => aoAlternar(tarefa.id)}
        />
        {tarefa.texto}
      </label>
      <button onClick={() => aoRemover(tarefa.id)}>remover</button>
    </li>
  )
}

export default function App() {
  const [tarefas, setTarefas] = useState([])
  const [texto, setTexto] = useState('')

  const adicionar = (evento) => {
    evento.preventDefault()
    const textoLimpo = texto.trim()
    if (!textoLimpo) return
    setTarefas(anteriores => [
      ...anteriores,
      { id: crypto.randomUUID(), texto: textoLimpo, feita: false }
    ])
    setTexto('')
  }

  const alternar = (id) => {
    setTarefas(anteriores => anteriores.map(t =>
      t.id === id ? { ...t, feita: !t.feita } : t
    ))
  }

  const remover = (id) => {
    setTarefas(anteriores => anteriores.filter(t => t.id !== id))
  }

  const pendentes = tarefas.filter(t => !t.feita).length

  return (
    <main>
      <h1>Minhas tarefas</h1>

      <form onSubmit={adicionar}>
        <label htmlFor="nova-tarefa">Nova tarefa</label>
        <input
          id="nova-tarefa"
          value={texto}
          onChange={e => setTexto(e.target.value)}
          placeholder="O que precisa ser feito?"
        />
        <button type="submit">Adicionar</button>
      </form>

      {tarefas.length === 0 ? (
        <p>Nenhuma tarefa ainda. Adicione a primeira!</p>
      ) : (
        <ul>
          {tarefas.map(tarefa => (
            <Tarefa
              key={tarefa.id}
              tarefa={tarefa}
              aoAlternar={alternar}
              aoRemover={remover}
            />
          ))}
        </ul>
      )}

      <p>{pendentes} tarefa(s) pendente(s)</p>
    </main>
  )
}

São cerca de 70 linhas, e elas contêm quase tudo que importa em React. Vale reparar em seis pontos:

Componente e composição. Tarefa é um componente separado que só sabe exibir uma tarefa. Ele é reutilizável justamente porque não conhece a lista.

Props e fluxo de dados. Os dados descem do App para o Tarefa como props, e os eventos sobem através de funções (aoAlternar, aoRemover). Esse fluxo em uma direção só é o coração do React.

Estado imutável. Repare que nunca fazemos tarefas.push(...). Sempre criamos um novo array com map, filter ou spread. O React compara referências para saber o que mudou — se você modificar o array original, a tela não atualiza.

Atualização a partir do valor anterior. Os três handlers usam setTarefas(anteriores => ...) em vez de ler tarefas direto. É a mesma recomendação que fiz lá no useState: assim você sempre parte do valor mais recente, mesmo que várias atualizações sejam enfileiradas antes da próxima renderização.

A prop key. Ao renderizar listas, o React precisa de um identificador estável para cada item, para saber quem foi adicionado, removido ou reordenado. Use um id de verdade, nunca o índice do array.

Estado derivado. O pendentes não é um estado — é calculado a partir de tarefas a cada render. Sempre que um dado puder ser derivado de outro, derive. Estado duplicado é uma das principais fontes de bug em React.

A partir daqui, o próximo passo natural é persistir as tarefas (com localStorage ou uma API), separar os componentes em arquivos e adicionar rotas.

Conclusão

Se você chegou até aqui, já tem o mapa completo: o React é uma biblioteca declarativa e baseada em componentes, que descreve interfaces em função de um estado, e cujo conhecimento você carrega para web, mobile e desktop.

Se eu tivesse que reduzir tudo isso a três conselhos, seriam estes:

1. Domine o fundamento, não a ferramenta da vez. Componente, props, estado e composição são os mesmos desde 2013 e continuam sendo o que separa quem escreve React bom de quem escreve React que funciona. Ferramentas ao redor mudam — create-react-app morreu, Gatsby definhou, Redux deixou de ser obrigatório. O fundamento ficou.

2. Cuidado com material desatualizado. Boa parte do conteúdo sobre React em português ainda ensina classes, create-react-app e Gatsby. Sempre confira a data e, na dúvida, volte para a documentação oficial.

3. Construa coisas. Você não aprende React lendo sobre React — inclusive este artigo. Você aprende construindo, quebrando e consertando. Comece pelo tutorial acima e transforme-o em algo seu.

E se o seu próximo passo é sair do “consigo fazer um componente” para “consigo construir e sustentar um produto de verdade”, veja o comparativo dos nossos programas e escolha o caminho que combina com o seu momento.

Bons estudos e boas construções!