0Pricing
React Academy icon

React Academy

JSXFrontendWebMobileBeginner

Domine ReactJS para construir interfaces de usuário dinâmicas com ReactJS Academy.

🤖 Com Inteligência Artificial📚 88 cursos👥 100.000+ alunos⭐ Classificação 4,9
Visão Geral do Curso

Construa Interfaces Reais com React

React é a biblioteca JavaScript que define como a maioria das UIs de produção são construídas hoje — desde aplicativos de página única e sites Next.js até aplicativos móveis e desktop multiplataforma. Este track aborda a disciplina completa: arquitetura de componentes, gerenciamento de estado, busca de dados, performance, testes e deployment. Ele é fundamentado em como React realmente funciona — o reconciliador, o modelo fiber, a semântica de hooks — não apenas sua API de superfície.

O Que Você Aprenderá

Você começará com JSX, props, state e componentes controlados, depois avançará para useEffect, useRef e useReducer. Cursos práticos cobrem roteamento com React Router v6, tratamento de formulários com React Hook Form, estado de servidor com React Query e SWR, estado global com Redux Toolkit, Zustand e Jotai. Você trabalhará com TypeScript em React, escreverá testes de integração e E2E, construirá design systems com Storybook, tratará UIs em tempo real sobre WebSockets e entregará APIs type-safe com tRPC. O caminho também inclui Next.js App Router, server components, server actions e autenticação com NextAuth.js.

O Caminho de Aprendizado

Noventa e cinco cursos vão de A1 até C1. Os cursos A1 e A2 estabelecem os fundamentos de React, renderização JSX, animações CSS, persistência de localStorage e dark mode. Os cursos B1 constroem confiança com padrões de context, i18n, React Spring, Framer Motion, drag-and-drop com dnd-kit e tabelas de dados complexas com TanStack Table. Os cursos B2 abordam renderização e memoização, Suspense, code splitting, React Native para desenvolvedores React, deployment para Vercel e AWS, e Electron para aplicativos desktop. O nível C1 finaliza com tópicos avançados: Arquitetura de Micro-Frontend, SSR e Hydration Deep Dive, Module Federation, Islands Architecture com Astro, integração com WebAssembly, Edge Rendering com Cloudflare Workers e OpenTelemetry para observabilidade frontend.

Como Funciona

Cada curso é dividido em aulas curtas e focadas que você completa no editor de código integrado com feedback em tempo real. Um tutor IA está disponível sempre que você ficar preso em um conceito ou em um teste que falhar. Você pode percorrer o track sequencialmente ou ir direto para o nível que corresponda à sua experiência atual.

Comece a Aprender →

Como Você Aprenderá

🎯
Aulas Interativas
Exercícios de codificação práticos com feedback em tempo real
🤖
Tutor de IA
Obtenha ajuda instantânea de nossa IA quando você ficar preso
💻
Editor Integrado
Escreva e execute código diretamente no seu navegador
🏆
Certificado
Ganhe um certificado ao concluir o curso
Currículo

88 Cursos

Todos os cursos no caminho de aprendizado React Academy.

01

Introdução ao React: conceitos e configuração

A13 aulas

Comece com os fundamentos do React: componentes, interface de usuário declarativa e como a diferenciação atualiza o DOM com eficiência. Em…

02

JSX e fundamentos da renderização

A13 aulasPRO

Aprenda as regras do JSX: expressões e atributos, retorno de fragmentos, renderização de listas com chaves, condicionais simples e opções d…

03

React DevTools e depuração

A24 aulasPRO

Domine a extensão de navegador React DevTools para inspecionar árvores de componentes, criar perfis de renderizações e depurar eficazmente…

04

Animações e Transições CSS no React

A24 aulasPRO

Crie animações suaves de entrada, saída e alteração de estado no React utilizando transições CSS e quadros-chave — sem precisar de uma bibl…

05

Elevar o estado e soluções para prop drilling

A24 aulasPRO

Partilhe o estado entre componentes irmãos elevando-o, e compreenda quando o prop drilling se torna um problema que vale a pena resolver.

06

Armazenamento Local e Persistência de Estado

A24 aulasPRO

Persista o estado do React entre recarregamentos de páginas utilizando localStorage, trate a sincronização entre separadores e escolha a AP…

07

Modo escuro com React

A24 aulasPRO

Crie um sistema robusto de modo escuro usando propriedades personalizadas de CSS, contexto do React e a consulta de mídia prefers-color-sch…

08

Props e composição

A23 aulasPRO

Passe dados com props , defina valores padrão simples por desestruturação, componha interfaces com children e prefira composição à herança…

09

Fundamentos de estado e eventos

A23 aulasPRO

Domine useState e o tratamento de eventos: atualize o estado corretamente, trate onClick/onChange e prepare-se para entradas controladas.

10

Formulários e validação (introdução)

A23 aulasPRO

Aprenda a criar formulários controlados com várias entradas, aplicar validações básicas e tratar submissões com fluidez em React.

11

Fundamentos de roteamento

A23 aulasPRO

Entenda o roteamento no cliente: como as SPAs alternam entre telas sem recarregar a página inteira, além de caminhos e parâmetros básicos e…

12

useRef e o DOM

A23 aulasPRO

Domine useRef : preserve valores entre renderizações sem causar novas renderizações, acesse nós do DOM e gerencie temporizadores com segura…

13

Análise estática e convenções

A23 aulasPRO

Mantenha o código limpo com as regras do ESLint para React e formate-o automaticamente com o Prettier . Adicione scripts e corrija problema…

14

Componentes controlados e não controlados

A22 aulasPRO

Domine as entradas controladas e não controladas: saiba quando escolher cada uma, conheça padrões simples com referências e use valores pad…

15

React Strict Mode e boas práticas

B14 aulasPRO

Aprenda o que StrictMode faz, quais avisos apresenta e que convenções de código tornam as aplicações React mais fáceis de manter.

16

Portals e modais em React

B14 aulasPRO

Renderize conteúdo fora da hierarquia DOM principal usando React Portals para criar modais, dicas e sobreposições.

17

API Children do React e padrão de slots

B14 aulasPRO

Trabalhe com props.children e os utilitários React.Children, e implemente APIs flexíveis de componentes baseadas em slots.

18

Componentes não controlados e carregamentos de ficheiros

B14 aulasPRO

Use entradas não controladas com useRef, leia valores de entradas de ficheiros e processe fluxos de carregamento de ficheiros em React.

19

Padrões de Context do React e desempenho

B14 aulasPRO

Projete fornecedores de Context que minimizem novas renderizações usando memoização, divisão de contextos e padrões de seletores.

20

Internacionalização (i18n) em React

B14 aulasPRO

Adicione suporte a vários idiomas às aplicações React usando react-i18next, gira ficheiros de tradução e processe a mudança de localidade.

21

APIs do navegador no React

B14 aulasPRO

Integre APIs poderosas do navegador — Clipboard, Geolocation, Notifications e IntersectionObserver — aos componentes React, com limpeza ade…

22

Debouncing e throttling no React

B14 aulasPRO

Evite renderizações e chamadas de API excessivas implementando padrões de debounce e throttle como hooks React reutilizáveis para eventos d…

23

Autocompletar de formulários e pesquisa preditiva

B14 aulasPRO

Crie do zero componentes acessíveis de autocompletar e pesquisa preditiva, navegáveis pelo teclado, usando estado e referências do React, s…

24

Gestão de formulários com React Hook Form

B14 aulasPRO

Crie formulários React flexíveis e eficientes usando React Hook Form: registo, validação, apresentação de erros e integração com esquemas.

25

Gestão de estado com Zustand

B14 aulasPRO

Use Zustand para gerir o estado global em aplicações React: lojas, ações, seletores, persistência e integração com ferramentas de desenvolv…

26

Padrões avançados do React Router v6

B14 aulasPRO

Vá além das rotas básicas com esquemas aninhados, carregadores, ações, rotas protegidas e gestão do estado dos parâmetros de pesquisa.

27

TypeScript com React: tipagem de componentes e hooks

B14 aulasPRO

Adicione TypeScript a projetos React: tipifique props, eventos, hooks, contextos e componentes genéricos com confiança.

28

TanStack Table: tabelas de dados complexas

B14 aulasPRO

Crie tabelas de dados prontas para produção, com ordenação, filtragem, paginação e seleção de linhas, usando a poderosa arquitetura headles…

29

Jotai: gerenciamento de estado atômico

B14 aulasPRO

Gerencie o estado do React com o modelo atômico minimalista do Jotai — átomos combináveis que derivam valores, lidam com operações assíncro…

30

SWR: busca de dados pela Vercel

B14 aulasPRO

Use a estratégia stale-while-revalidate do SWR para obter dados de forma rápida e confiável, com revalidação automática, mutações e suporte…

31

dnd-kit: arrastar e soltar acessível

B14 aulasPRO

Crie interfaces acessíveis e compatíveis com toque para arrastar e soltar no React com dnd-kit — listas ordenáveis, quadros kanban e intera…

32

React Spring: animações baseadas em física

B14 aulasPRO

Crie animações fluidas baseadas na física de molas no React usando react-spring — desde transições simples de valores até interações comple…

33

Eventos enviados pelo servidor e sondagem no React

B14 aulasPRO

Implemente fluxos de dados em tempo real no React usando Eventos Enviados pelo Servidor e estratégias de sondagem — compreendendo as difere…

34

Mergulho profundo em useEffect

B13 aulasPRO

Entenda useEffect : quando ele é executado em relação à renderização, como os vetores de dependências controlam seu comportamento e como es…

35

Padrões de busca de dados

B13 aulasPRO

Projete interfaces de dados resilientes: trate os estados de carregamento , erro , vazio e sucesso com feedback claro e esqueletos leves.

36

Contexto e useReducer

B13 aulasPRO

Compartilhe o estado entre componentes distantes com Context para evitar a passagem excessiva de propriedades; configure um Provider e leia…

37

Hooks personalizados

B13 aulasPRO

Extraia lógica reutilizável para hooks personalizados : defina parâmetros claros, retorne valores e ações estáveis e mantenha os efeitos or…

38

Fundamentos de acessibilidade

B13 aulasPRO

Crie interfaces inclusivas: use semântica real, etiquetas e funções claras e gerencie o foco do teclado para uma navegação fluida.

39

Animações com Framer Motion

B14 aulasPRO

Adicione animações e transições fluidas a aplicações React com Framer Motion: componentes motion, variantes, gestos e animações de esquema.

40

Limites de erro e robustez

B13 aulasPRO

Capture erros durante a renderização com limites de erro, mostre alternativas seguras e mantenha o restante do aplicativo responsivo.

41

TypeScript com React (opcional)

B13 aulasPRO

Adicione tipos leves aos componentes React. Comece pelas propriedades e depois extraia genéricos reutilizáveis para manter o código da inte…

42

Estrutura do projeto e convenções

B13 aulasPRO

Organize aplicativos React: pastas priorizadas por funcionalidade, primitivas pequenas de interface em contraste com componentes compostos,…

43

Listas Virtualizadas com react-window

B24 aulasPRO

Apresente milhares de itens numa lista sem degradar o desempenho, utilizando react-window para virtualizar a saída do DOM e apresentar apen…

44

Padrões assíncronos em React: Promises e concorrência

B24 aulasPRO

Processe operações assíncronas de forma idiomática em React com useEffect, useTransition, useDeferredValue e Suspense.

45

Padrões React: render props e HOCs

B24 aulasPRO

Compreenda render props e componentes de ordem superior como padrões clássicos de reutilização de código, antes de serem substituídos pelos…

46

useLayoutEffect versus useEffect

B24 aulasPRO

Compreenda a diferença sutil, mas fundamental, entre useEffect e useLayoutEffect — quando cada um é executado em relação à confirmação do D…

47

Redux Toolkit e RTK Query

B24 aulasPRO

Gira estados complexos de aplicações com slices e thunks do Redux Toolkit, e use RTK Query para colocar em cache e sincronizar o estado do…

48

Componentes de servidor e funcionalidades do React 19

B24 aulasPRO

Compreenda os React Server Components, o hook use(), as Actions e outras APIs do React 19 que alteram o fluxo de dados nas aplicações.

49

React Query: gestão do estado do servidor

B24 aulasPRO

Gira o estado do servidor com TanStack Query: obtenção de dados, cache, nova obtenção em segundo plano, mutações e paginação.

50

Testes React: integração e E2E

B24 aulasPRO

Escreva testes de integração com React Testing Library e testes de ponta a ponta com Playwright para validar fluxos reais dos utilizadores.

51

Sistemas de design de componentes e Storybook

B24 aulasPRO

Documente, desenvolva e teste componentes de interface React isoladamente usando Storybook com histórias CSF3 e addons.

52

Interfaces em tempo real com WebSockets e React

B24 aulasPRO

Crie interfaces React que se atualizam em direto usando WebSockets e bibliotecas como Socket.IO para conversas, notificações e painéis.

53

tRPC: APIs com segurança de tipos de ponta a ponta

B24 aulasPRO

Crie APIs totalmente seguras quanto aos tipos, sem esquemas nem geração de código, usando tRPC — compartilhando automaticamente os tipos en…

54

Apollo Client e React

B24 aulasPRO

Integre GraphQL a aplicações React com Apollo Client — consultando, realizando mutações, armazenando em cache e mantendo a interface sincro…

55

Interface otimista e padrões de mutação

B24 aulasPRO

Crie interfaces rápidas e responsivas que exibem os resultados imediatamente, antes da confirmação do servidor — com reversão adequada em c…

56

Publicação de bibliotecas de componentes React

B24 aulasPRO

Empacote e publique bibliotecas reutilizáveis de componentes React no npm — lidando com saída dupla ESM/CJS, dependências de pares, remoção…

57

Renderização e memoização

B23 aulasPRO

Entenda as fases de renderização e commit do React, quando os componentes são atualizados e quando a memoização ajuda.

58

Transições e Suspense (noções básicas)

B23 aulasPRO

Aprenda os fundamentos de interfaces concorrentes com useTransition : mantenha a digitação responsiva, mostre um indicador de espera e adie…

59

Divisão de código e estratégia de recursos

B23 aulasPRO

Carregue apenas o que for necessário dividindo telas e componentes em partes de código. Use React.lazy e Suspense para criar aplicativos qu…

60

Testes de componentes React

B23 aulasPRO

Configure testes com Vitest/Jest e React Testing Library ; renderize componentes, consulte-os por função/etiqueta e execute-os em um ambien…

61

Fundamentos do App Router do Next.js

B24 aulasPRO

Crie aplicações Web full-stack com o App Router do Next.js 14+: encaminhamento baseado em ficheiros, esquemas, componentes de servidor e me…

62

Obtenção de dados e cache no Next.js

B24 aulasPRO

Obtenha, coloque em cache e revalide dados no App Router do Next.js usando opções de fetch, unstable_cache e revalidação a pedido.

63

Autenticação no Next.js com NextAuth.js

B24 aulasPRO

Adicione autenticação a aplicações Next.js usando Auth.js (NextAuth v5): fornecedores OAuth, credenciais, sessões e proteção de rotas.

64

Fundamentos do React Native para programadores React

B24 aulasPRO

Transfira os seus conhecimentos de React para dispositivos móveis aprendendo primitivas, estilos, navegação e APIs nativas de dispositivos…

65

Implementação de aplicações React: Vercel, AWS e Docker

B24 aulasPRO

Implemente aplicações React e Next.js em produção usando Vercel, AWS S3/CloudFront e contentores Docker com pipelines de CI/CD.

66

Ações de servidor do React: formulários e mutações

B24 aulasPRO

Use as Ações de Servidor do React 19 e as ações de formulário do Next.js para lidar com mutações no servidor — eliminando rotas de API em p…

67

Segurança de aplicações React

B24 aulasPRO

Proteja aplicações React contra XSS, CSRF e outras vulnerabilidades — com orientações práticas sobre Política de Segurança de Conteúdo, ger…

68

Sistemas de tokens de design para React

B24 aulasPRO

Crie um sistema escalável de tokens de design que alimente bibliotecas de componentes React com vários temas — da definição dos tokens às v…

69

Electron.js: aplicações para desktop com React

B24 aulasPRO

Crie aplicações para desktop multiplataforma usando Electron com frontend React — abordando comunicação IPC, APIs nativas e empacotamento p…

70

Componentes compostos

B23 aulasPRO

Crie componentes compostos: o componente pai fornece o contexto, e os filhos o consomem para oferecer APIs flexíveis.

71

Formulários em grande escala (sem biblioteca ou com auxiliares leves)

B23 aulasPRO

Crie formulários grandes com peças pequenas e robustas: vetores de campos, seções dinâmicas e fluxos simples de validação.

72

Roteamento avançado

B23 aulasPRO

Vá além do básico: conheça layouts aninhados, carregadores de rotas em nível conceitual e ideias simples de pré-busca para uma navegação ma…

73

Estado do servidor versus estado da interface

B23 aulasPRO

Saiba o que pertence ao cache do servidor e o que é estado local da interface. Busque e atualize dados sem misturar responsabilidades.

74

Padrões para modais, notificações e sobreposições

B23 aulasPRO

Crie sobreposições acessíveis: renderize com portais, mantenha o foco dentro delas e permita o fechamento rápido com Escape ou pelo plano d…

75

Compilar, analisar e publicar

B23 aulasPRO

Prepare aplicativos para produção: compilações de desenvolvimento e produção, mapas de origem, variáveis de ambiente simples e pequenas ver…

76

useImperativeHandle e forwardRef

C14 aulasPRO

Domine as APIs imperativas do React — exponha valores personalizados da instância de um componente aos componentes-pai utilizando forwardRe…

77

useSyncExternalStore: Subscrição a Armazenamentos Externos

C14 aulasPRO

Aprenda a utilizar o hook useSyncExternalStore do React 18 — a forma correta de sincronizar componentes React com fontes externas de estado…

78

Arquitetura de microfrontends com React

C14 aulasPRO

Divida grandes frontends React em microfrontends implementados de forma independente usando Module Federation e single-spa.

79

Análise aprofundada de SSR e hidratação no React

C14 aulasPRO

Compreenda os mecanismos de renderização no servidor, a hidratação, a hidratação seletiva e o HTML transmitido em fluxo com renderToPipeabl…

80

Padrões avançados de TypeScript para React

C14 aulasPRO

Aperfeiçoe os seus conhecimentos de React e TypeScript com uniões discriminadas, tipos mapeados, tipos condicionais e APIs de componentes s…

81

Desempenho Web: Core Web Vitals e React

C14 aulasPRO

Meça e melhore os Core Web Vitals (LCP, INP, CLS) em aplicações React com ferramentas de criação de perfis, análise de pacotes e otimizaçõe…

82

Monorepo e Nx para projetos React

C14 aulasPRO

Organize várias aplicações React e bibliotecas partilhadas num monorepo usando Nx, com agendamento inteligente de tarefas e CI baseada nas…

83

Arquitetura de ilhas com Astro e React

C14 aulasPRO

Evite a hidratação de páginas inteiras adotando a Arquitetura de Ilhas — hidratando seletivamente apenas os componentes React interativos q…

84

Integração entre React e WebAssembly

C14 aulasPRO

Integre módulos WebAssembly a aplicações React para tarefas computacionalmente intensivas — de módulos WASM em Rust à memória compartilhada…

85

Renderização na borda: Cloudflare Workers e React

C14 aulasPRO

Sirva aplicações React na borda com latência inferior a um milissegundo — usando Cloudflare Workers, SSR por streaming e estratégias de cac…

86

OpenTelemetry para observabilidade de frontend React

C14 aulasPRO

Instrumente aplicações React com OpenTelemetry para coletar rastros, medir o desempenho real dos usuários e relacionar eventos do frontend…

87

Streaming e carregamento progressivo no React

C14 aulasPRO

Use SSR por streaming do React 18 e Suspense para entregar HTML progressivamente ao navegador — melhorando o desempenho percebido sem esper…

88

Module Federation com React

C14 aulasPRO

Implemente o Module Federation do Webpack para criar e implantar microfrontends React de forma independente — compartilhando dependências,…

Perguntas Frequentes

Perguntas Frequentes

O curso React Academy é gratuito?

Sim. Você pode começar o curso React Academy gratuitamente e completar suas aulas interativas sem custo. Uma assinatura PRO opcional desbloqueia ferramentas avançadas de IA e um certificado compartilhável.

Preciso de experiência anterior para aprender JSX?

Não. O curso começa com os fundamentos e gradualmente passa para tópicos mais avançados, então você pode começar mesmo sem experiência anterior com JSX.

Como vou aprender JSX no CoddyKit?

Você aprende fazendo. Aulas interativas curtas combinam uma explicação clara com um exercício de codificação prático que executa em tempo real, e um tutor de IA disponível 24/7 oferece ajuda personalizada sempre que você ficar preso.

Ganho um certificado ao concluir React Academy?

Sim. Alunos PRO podem fazer um exame e ganhar um certificado de conclusão compartilhável com um código verificável para o curso React Academy.

Posso aprender JSX no meu celular?

Sim. CoddyKit está disponível na web e como aplicativos nativos para iOS e Android, então você pode aprender JSX em qualquer dispositivo e seu progresso sincroniza entre eles.

Comece React Academy Agora

Junte-se a milhares de alunos dominando programação com aulas potenciadas por IA.

Começar Grátis →Ver Todos os Cursos