Tutorial de React com exemplos ao vivo
Um tutorial gratuito de React 19: componentes, JSX, props, estado, hooks e desempenho. Cada exemplo roda na página, então você pode editar o código e ver o componente e o console mudarem.
Inicie uma jornada guiada de ReactPrimeiros passos
- O que é ReactReact é uma biblioteca JavaScript para construir interfaces de usuário a partir de componentes. Você descreve o que a tela deve mostrar para os dados atuais, e o React mantém a página sincronizada quando esses dados mudam.
- Instalar ReactInstale o React criando um projeto com Vite: confira o Node.js, rode um comando de criação, instale as dependências e inicie o servidor de desenvolvimento. Também mostra os arquivos gerados, o build de produção e por que o Create React App foi descontinuado.
- JSXJSX é uma extensão de sintaxe do JavaScript que permite escrever marcação parecida com HTML dentro de componentes React. Aprenda as regras: um único elemento raiz, tags fechadas, className, atributos em camelCase, chaves, estilos inline, comentários e no que ele é compilado.
- ComponentesUm componente React é uma função JavaScript que retorna JSX. Aprenda a escrever e nomear componentes de função, compor uma árvore com eles, dividi-los em arquivos, mantê-los puros e como componentes se diferenciam de elementos.
- PropsProps são as entradas de um componente React: valores que um pai passa para um filho como atributos JSX. Aprenda a passar e desestruturar props, definir valores padrão, passar funções, espalhar props e por que props são somente leitura.
- Childrenchildren é a prop que guarda o que você coloca entre a tag de abertura e a de fechamento de um componente. Aprenda a construir componentes wrapper e de layout com ela, passar vários slots como props nomeadas, usar children como função e quando a API Children é a ferramenta errada.
- FragmentsUm Fragment do React agrupa vários elementos em um único valor de retorno sem adicionar um nó à página. Aprenda a sintaxe curta <>...</>, quando você precisa de <Fragment key> e por que fragments importam dentro de tabelas e listas.
- Renderização condicionalA renderização condicional no React é JavaScript puro: um if, um ternário ou && decide qual JSX um componente retorna. Aprenda cada padrão, o 0 perdido que o && pode imprimir, retornar null e por que esconder um componente não é o mesmo que não renderizá-lo.
- Listas e keysPara renderizar uma lista no React você chama map() em um array e retorna JSX para cada item, dando a cada item uma prop key. Aprenda a filtrar e depois mapear, de onde as keys devem vir e por que keys de índice misturam os itens quando a lista muda.
- EventosEventos no React são props como onClick e onChange que recebem uma função, que o React chama com um objeto de evento quando o usuário age. Aprenda a passar um handler em vez de chamá-lo, passar argumentos, ler e.target.value e e.key, evitar o recarregamento de formulários e impedir a propagação.
- EstilizaçãoVocê estiliza componentes React com className e CSS comum, com a prop style para valores calculados em JavaScript, com CSS Modules para nomes de classe com escopo ou com classes utilitárias do Tailwind. Aprenda cada um, classes condicionais e quando usar qual.
Estado e formulários
- useStateuseState dá a um componente um valor que sobrevive às re-renderizações e um setter que redesenha a tela quando o valor muda. Aprenda a sintaxe, as funções de atualização, objetos e arrays no estado e por que um valor parece desatualizado logo depois de você defini-lo.
- Atualizar arrays e objetosPara mudar um array ou objeto no estado do React, crie um novo e passe-o para o setter. Aprenda a adicionar, remover, substituir, inserir e ordenar itens, atualizar objetos aninhados e por que mutar o estado deixa a tela sem mudança.
- FormuláriosConstrua formulários no React com inputs controlados: campos de texto, textarea, select, checkboxes e botões de rádio, um único objeto de estado para vários campos, envio com onSubmit, exibição de erros de validação e as form actions do React 19.
- Controlados vs não controladosUm input controlado recebe o valor do estado do React e só muda pelo onChange. Um input não controlado guarda o próprio valor no DOM, e você o lê com uma ref ou com FormData. Aprenda a diferença, os avisos comuns e quando usar cada um.
- Elevar o estadoElevar o estado significa tirar o estado de dois componentes e levá-lo para o pai comum mais próximo, que devolve o valor e um setter como props. Aprenda quando elevar, como fazer isso em três passos e quando manter o estado local.
- useReduceruseReducer guarda estado e leva toda atualização para uma única função reducer: você despacha uma ação, e o reducer retorna o próximo estado. Aprenda a sintaxe, como escrever um reducer puro, um exemplo de lista de tarefas, a inicialização preguiçosa e quando escolhê-lo em vez de useState.
Efeitos e refs
- useEffectuseEffect executa código depois que o React atualizou a tela, para que um componente se sincronize com algo fora do React: um timer, uma assinatura, um event listener. Aprenda os três formatos do array de dependências, a limpeza, os loops infinitos e quando você nem precisa de um efeito.
- Buscar dadosBusque dados no React iniciando a requisição no useEffect, guardando loading, erro e dados no estado e ignorando respostas que chegam depois que as entradas mudaram. Trata de async/await em efeitos, AbortController, condições de corrida e quando usar uma biblioteca.
- useRefuseRef dá a um componente uma caixa, `{ current }`, que mantém o conteúdo entre renderizações sem causar uma renderização quando você o muda. Use-a para alcançar um nó do DOM (foco, rolagem, medidas) ou para guardar o id de um timer ou qualquer valor que a tela não mostra.
- forwardRefforwardRef permite que um componente receba uma ref do pai e a conecte a um nó do DOM dentro dele. No React 19 os componentes de função recebem `ref` como uma prop normal, então código novo não precisa mais de forwardRef. Veja as duas versões funcionando, além de useImperativeHandle e os tipos no TypeScript.
- useLayoutEffectuseLayoutEffect funciona como useEffect, mas executa logo depois que o React atualiza o DOM e antes de o navegador pintar a tela. Use-o para medir um elemento e ajustar o layout sem uma piscada visível, e deixe o useEffect para todo o resto.
Hooks e contexto
- React HooksUm hook é uma função cujo nome começa com use e que permite a um componente usar um recurso do React, como estado, context, refs ou efeitos. Veja todos os hooks embutidos agrupados por finalidade, as duas regras que todo hook segue e como escrever o seu próprio.
- useContextuseContext lê um valor que um componente pai fornece, para que um componente bem aninhado o receba sem que cada componente no meio o passe como prop. Aprenda createContext, providers, atualizar o context a partir de um filho e como o context afeta as re-renderizações.
- Prop drillingProp drilling é passar uma prop por componentes que não a usam, só para que um componente mais abaixo possa usá-la. Veja isso em um exemplo executável, por que atrapalha quando o app cresce e as soluções na ordem em que vale tentar: composição, context e depois uma biblioteca de estado.
- Hooks personalizadosUm hook personalizado é uma função cujo nome começa com use e que chama outros hooks, para que vários componentes reutilizem a mesma lógica com estado. Construa useToggle, useLocalStorage, useDebounce e useWindowWidth e entenda por que cada chamada recebe o próprio estado.
- Regras dos hooksOs hooks têm duas regras: chame-os no nível superior de um componente, nunca dentro de condições, loops ou funções aninhadas, e chame-os só a partir de componentes de função ou de hooks personalizados. Entenda por que o React precisa da mesma ordem de chamadas em toda renderização e como corrigir os erros que aparecem quando ela muda.
- useIduseId retorna um id único e estável para cada instância de componente, para que um label, um input e uma dica com aria-describedby apontem uns para os outros mesmo quando o componente aparece muitas vezes. Entenda por que Math.random e contadores quebram com renderização no servidor e por que o useId não serve para keys de listas.
- useSyncExternalStoreuseSyncExternalStore inscreve um componente em dados que vivem fora do React, como um pequeno módulo de store ou uma API do navegador como navigator.onLine, e renderiza de novo sempre que esses dados mudam. Aprenda subscribe e getSnapshot, por que o snapshot precisa ficar em cache e o getServerSnapshot.
Renderização e desempenho
- RenderizaçãoUm componente React renderiza de novo quando o estado dele muda, quando o pai renderiza ou quando um context que ele lê muda. Entenda a diferença entre render e commit, o que o virtual DOM realmente significa e como evitar renderizações desnecessárias.
- useMemouseMemo guarda em cache o resultado de um cálculo entre renderizações e só o recalcula quando as dependências mudam. Aprenda a sintaxe, como manter um objeto estável para um filho com memo e quando o useMemo não vale a pena.
- useCallbackuseCallback retorna a mesma função entre renderizações até as dependências dela mudarem. Ele só ajuda quando essa função é passada para um filho com memo ou usada como dependência de um efeito. Aprenda a sintaxe, a diferença para o useMemo e os erros a evitar.
- React.memomemo envolve um componente para que o React pule a nova renderização dele quando as props são superficialmente iguais às da última vez. Entenda quando ele ajuda, por que objetos e funções novos nas props o anulam e o que ele não impede.
- useTransitionuseTransition marca uma atualização de estado como não urgente, para que o React mantenha a página responsiva enquanto renderiza a parte lenta em segundo plano. Aprenda isPending, startTransition, transições assíncronas no React 19 e por que isso não é debounce.
- useDeferredValueuseDeferredValue dá a você uma cópia de um valor que pode ficar para trás durante renderizações pesadas, para que um input continue responsivo enquanto uma lista lenta se atualiza. Entenda como funciona, o valor inicial do React 19 e como ele se compara ao useTransition e ao debounce.
- Suspense e lazyO Suspense mostra um fallback enquanto os componentes dentro dele não estão prontos, e o React.lazy carrega o código de um componente só quando ele renderiza pela primeira vez. Aprenda code splitting, boundaries aninhados, Suspense com use() no React 19 e o tratamento de erros.
React 19 e tópicos avançados
- React 19O React 19 adicionou Actions, useActionState, useOptimistic, use, ref como prop e metadados do documento, e o 19.2 adicionou Activity e useEffectEvent. Veja cada recurso funcionando, o que foi removido e como atualizar.
- useActionStateuseActionState envolve uma action assíncrona, guarda o último valor que ela retornou e diz se ela ainda está executando. Aprenda a assinatura, as form actions, como retornar erros de validação e como chamá-la fora de um formulário.
- useOptimisticuseOptimistic mostra o resultado que você espera enquanto uma action assíncrona ainda está executando e depois volta ao estado real quando ela termina, então uma requisição com falha se desfaz sozinha. Aprenda a sintaxe, a forma com reducer e por que ele precisa executar dentro de uma action.
- useuse lê o valor de uma promise ou de um context durante a renderização. Com uma promise, ele suspende até os dados chegarem e mostra o fallback do Suspense mais próximo. Ao contrário dos outros hooks, ele pode executar dentro de instruções if e de loops.
- Error BoundariesUm error boundary é um componente que captura erros lançados durante a renderização dos componentes dentro dele e mostra um fallback em vez de uma tela em branco. Aprenda o que ele captura, como escrevê-lo como classe, como reiniciá-lo e a biblioteca react-error-boundary.
- PortalscreatePortal renderiza parte de um componente em outro nó do DOM, como document.body, enquanto ele continua no mesmo lugar da árvore do React. Use-o para modais, tooltips e menus que precisam escapar de overflow hidden e do empilhamento de z-index.
- Strict ModeStrictMode é um wrapper só de desenvolvimento que renderiza os componentes duas vezes, executa setup, limpeza e setup dos efeitos na montagem e avisa sobre APIs descontinuadas, para que renderizações impuras e limpezas faltando apareçam cedo. Em produção ele não faz nada.
- Ciclo de vidaTodo componente React monta (aparece), atualiza (renderiza de novo) e desmonta (é removido). Aprenda como cada fase corresponde ao useEffect, aos métodos de ciclo de vida das classes e aos hooks equivalentes, e às fases de render e commit.
- Componentes de classeUm componente de classe é uma classe JavaScript que estende React.Component e retorna JSX de um método render. Aprenda this.props, this.state e setState, o bind de event handlers, os métodos de ciclo de vida, o PureComponent e como converter uma classe em um componente de função.
Comparações e entrevistas
- Perguntas de entrevista ReactCerca de 30 perguntas de entrevista de React, do iniciante ao avançado, cada uma com uma resposta curta que um entrevistador aceitaria e código ao vivo para as que são mais fáceis de ver do que de ler.
- React vs AngularReact é uma biblioteca de UI que você combina com outras ferramentas; Angular é um framework completo, com roteamento, formulários, HTTP e injeção de dependência embutidos. Compare os mesmos componentes escritos nos dois, lado a lado.
- React vs VueReact e Vue são ferramentas JavaScript para construir interfaces de usuário a partir de componentes. Eles diferem na marcação (JSX vs templates), em como reagem a mudanças (estado imutável e re-renderizações vs refs reativas mutáveis) e em quanto do ecossistema é oficial.
- React com TypeScriptComo tipar um app React com TypeScript: props e children, useState com unions e null, useRef para elementos do DOM, event handlers, context, componentes genéricos e props de elementos nativos.
