Aprender React - Curso Code

Aprenda React escrevendo código. Este tutorial de React JS leva você da primeira linha de JSX a Hooks, gerenciamento de estado e apps completos, e cada componente que você escreve é renderizado no seu celular em uma prévia ao vivo.

88 cursos e 324 lições interativas, dos níveis A1 ao C1. Leia um conceito curto, digite código real, toque em Executar e veja o resultado. Sem laptop e sem configuração.

ESCREVA CÓDIGO NO CELULAR

• Editor de código feito para JSX, com prévia ao vivo que renderiza seu componente dentro do app

• O runtime (ReactDOM e Babel) vem integrado ao app, então seu código roda no dispositivo, não em um servidor

• Projetos com vários arquivos: importe um componente em outro, como em apps reais

• Toque no botão renderizado, digite no formulário e veja a UI responder

O LABORATÓRIO

• Hooks Lab: veja cada mudança de estado e cada nova renderização acontecendo

• Controles de props: altere uma prop com um controle deslizante e veja o componente ser atualizado

• Profiler de renderização e linha do tempo do estado (Pro): descubra qual componente foi renderizado novamente e por quê, depois volte pela linha do tempo do estado

PASSO A PASSO, DO INICIANTE AO AVANÇADO

• Fundamentos: JSX, componentes, props, estado, eventos, listas e chaves, renderização condicional

• Hooks: useState, useEffect, useRef, useReducer, Hooks personalizados, useLayoutEffect e mais

• Formulários e validação, React Hook Form, campos controlados e não controlados

• Gerenciamento de estado: Context, Redux Toolkit e RTK Query, Zustand e Jotai

• React Router, busca de dados, TanStack Query, SWR e UI otimista

• TypeScript, testes, Storybook, acessibilidade e segurança

• Desempenho: memoização, divisão de código, Suspense, transições, listas virtualizadas

• React 19 e Server Components, SSR e hidratação, streaming

• Next.js App Router, busca de dados e autenticação

• Fundamentos de React Native para desenvolvedores web

• Implantação, microfrontends e federação de módulos

CRIE PROJETOS REAIS

20 projetos guiados, um pequeno passo por vez: um botão de curtir, cartões de perfil, uma calculadora de gorjetas, um jogo de quiz, um cronômetro, um formulário de cadastro, um carrinho de compras, um carrossel de imagens, uma lista paginada, um app de tarefas e mais. Cada passo verifica se seu componente realmente funciona antes de você continuar.

PRATIQUE ATÉ FIXAR

• 30 missões de programação (fáceis, médias e difíceis) sobre Hooks, renderização, formulários, Context e desempenho

• UI Match: recrie um componente-alvo e receba uma pontuação pela estrutura, estilo e texto

• Bug Hunt: encontre e corrija o bug em um componente com problema

• Component Recall: digite a parte ausente de volta no código que você já fez funcionar, com repetição espaçada

• Quizzes com 50 perguntas, 50 perguntas de entrevista e uma cola

• Desafio diário, sequências, XP e classificação

MENTOR DE AI (PRO)

Travou em um Hook ou erro? Peça ao mentor de AI uma explicação clara, deixe a AI revisar seu código e sugerir uma correção ou gere uma lição personalizada sobre qualquer tópico.

CERTIFICADO (PRO)

Passe no exame final e conquiste um certificado que você pode compartilhar.

GRÁTIS E PRO

Grátis: o primeiro curso, um projeto guiado, 2 missões de programação, o editor de código com prévia ao vivo, Hooks Lab, controles de props, Bug Hunt e 3 verificações de UI Match por dia. A versão grátis exibe anúncios.

Pro: todos os 88 cursos, todos os projetos e missões, o mentor de AI, o profiler de renderização e a linha do tempo do estado, o exame para certificado e sem anúncios.

O app está disponível em 22 idiomas.

React é uma marca registrada da Meta Platforms, Inc. Next.js é uma marca registrada da Vercel, Inc. Este é um app independente de aprendizado, não afiliado nem endossado pela Meta ou pela Vercel.

Política de privacidade: https://www.coddykit.com/terms/privacy-policy