Aprender React: Curso Code
Aprender React: Curso Code — Aprenda programação em React escrevendo JSX e executando no seu celular
Aprender React: Curso Code é um app para iOS e Android gratuito para começar, que ensina programação em React a iniciantes com um pouco de HTML, CSS ou JavaScript e a desenvolvedores que estão migrando de outro framework. Escreva JSX em um editor de código, toque em Executar e veja seu componente ser renderizado em uma prévia ao vivo dentro do app. 88 cursos e 324 lições levam você do primeiro componente até hooks e gerenciamento de estado, passando por Next.js, com 20 projetos guiados ao longo do caminho.
- Preço
- Gratuito, upgrade para Pro
- Plataformas
- iOS e Android
- Idiomas
- 22
- Classificação etária
- 4+
- Versão
- 82.6.1
- Requisitos
- iOS 15.1 ou posterior
- App Store
- 3.8 ★ (4)
Seu componente é renderizado no celular, não em um servidor.
O runtime, o ReactDOM e o Babel vêm integrados ao app, então o JSX que você escreve é compilado e exibido no dispositivo. Você pode tocar no botão que acabou de criar, digitar no seu formulário e ver a interface reagir — esse é o ciclo de feedback que faz os hooks começarem a fazer sentido.
O que é
Aprender React: Curso Code é um curso de React gratuito para começar, disponível para iOS e Android, com 88 cursos e 324 lições interativas, que vão da primeira linha de JSX a hooks, gerenciamento de estado, React 19 e o App Router do Next.js. O editor integrado compila seu código no dispositivo e renderiza o componente em uma prévia ao vivo, enquanto 20 projetos guiados verificam cada etapa antes de você avançar. É um app de aprendizado independente e não tem vínculo com a Meta ou a Vercel.
Dentro do app
Como ele é
O curso
O que o curso de React aborda
88 cursos selecionados da própria lista do app, organizados na ordem em que normalmente acontece uma primeira jornada de aprendizado de React.
React Kickoff, JSX e Props & Composition
Componentes, UI declarativa e como React atualiza o DOM; depois, regras de JSX, renderização de listas e passagem de dados para baixo com props.
State, Events, Forms e useRef
useState e manipulação de eventos, formulários controlados com validação e useRef para valores e acesso ao DOM que não acionam uma renderização.
useEffect, Data Fetching e Custom Hooks
Quando os effects são executados, arrays de dependências, estados de carregamento e erro para chamadas de API e extração de lógica reutilizável para seus próprios hooks.
Context, Redux Toolkit e Zustand
Compartilhamento de state sem prop drilling com Context e useReducer; depois, Redux Toolkit com RTK Query, Zustand e Jotai para apps maiores.
Routing, React Query e Forms at Scale
Roteamento no lado do cliente e padrões do React Router, estado do servidor com TanStack Query e SWR, React Hook Form e UI otimista.
Performance, Testing e TypeScript
Renderização e memoisation, divisão de código, listas virtualizadas, testes com React Testing Library e tipagem de componentes e hooks.
React 19, Server Components e Next.js
Server Components e Actions, SSR e hydration; depois, o App Router do Next.js com busca de dados, cache e autenticação.
Como funciona
Como funciona uma lição
Uma lição apresenta um conceito curto e, logo em seguida, um código que você escreve e executa, para que a ideia e o resultado fiquem na mesma tela.
Leia um conceito
Abra um curso no caminho de aprendizado e leia uma lição curta, como entender como as atualizações de estado funcionam ou por que uma lista precisa de keys. A visão geral do curso indica quais lições são gratuitas, para que você conheça o formato antes de decidir.
Escreva JSX e toque em Executar
Digite o componente no editor de código e execute-o. A prévia ao vivo renderiza seu componente dentro do app, para que você possa clicar no botão, digitar no campo e ver o que o código faz.
Confira e avance a partir daí
Quizzes, missões de programação e projetos guiados confirmam que você entendeu a ideia, e o mentor de IA explica um hook ou um erro que você não consegue interpretar. Bug Hunt e UI Match oferecem uma segunda rodada de prática sobre o conceito.
O que está incluído
O que vem com o app
88
Cursos, 324 lições
De JSX, props e estado a custom hooks, formulários, Context e Redux Toolkit, chegando a Server Components, SSR e ao App Router do Next.js, organizados dos níveis A1 a C1.
Ao vivo
Editor com prévia ao vivo
Um editor de código feito para JSX, com o componente renderizado dentro do app. Projetos com vários arquivos permitem importar um componente para outro, como os apps reais são criados.
20
Projetos guiados
Crie um botão de curtir, cartões de perfil, uma calculadora de gorjetas, um jogo de quiz, um carrinho de compras e muito mais, um pequeno passo de cada vez. Cada etapa verifica se o componente realmente funciona.
Laboratório
Hooks Lab e controles de props
Veja cada mudança de estado e novo render acontecer em tempo real, e altere uma prop com um controle deslizante para ver o componente se atualizar. Um profiler de renders e uma linha do tempo do estado fazem parte do Pro.
30
Missões de programação
Missões nos níveis fácil, médio e difícil sobre hooks, renderização, formulários, context e desempenho, além de UI Match, Bug Hunt e Component Recall com repetição espaçada.
IA
Mentor de IA
Peça uma explicação, deixe a IA revisar seu código e sugerir uma correção ou gere uma lição personalizada sobre qualquer tema. O mentor e o exame para obter o certificado fazem parte do Pro.
Contexto
O que você realmente precisa entender para escrever em React — e em que ordem?
React é uma biblioteca JavaScript para criar interfaces de usuário com pequenos componentes reutilizáveis, que se redesenham quando seus dados mudam. A maioria dos iniciantes não trava na sintaxe, mas no modelo por trás dela: o que é um render, o que conta como estado e quando os efeitos são executados. Aprender essas ideias na ordem, com algo na tela para testar cada uma, é mais rápido do que ler sobre todas de uma vez.
Componentes e propsa unidade de reutilização
Um componente é uma função que retorna uma parte da interface, e props são as entradas que ele recebe do componente pai. Como os dados fluem para baixo por meio das props, você pode ler um componente e prever o que ele vai desenhar.
Estadoo que muda com o tempo
Estado são dados que um componente memoriza entre renders, como o texto em um campo ou se um menu está aberto. Atualizar o estado agenda um novo render, que é o mecanismo por trás de quase toda tela interativa.
Hooks e efeitosonde os iniciantes travam
Hooks como useState, useRef e useReducer permitem que um componente mantenha estado e acesse o DOM. useEffect executa código depois de um render, e um array de dependências incorreto é a fonte mais comum de loops e valores desatualizados.
Renderização e novos renderspor que o app parece lento
Um componente faz um novo render quando seu estado ou suas props mudam, e o mesmo acontece com os componentes dentro dele. Saber o que acionou um render é o ponto de partida para qualquer correção de desempenho, da memoização à divisão de código.
Para quem é
Para quem é — e para quem não é
É uma boa opção se você
- Você sabe um pouco de HTML, CSS ou JavaScript e quer começar com React do jeito certo
- Você é desenvolvedor de outro framework e precisa migrar rapidamente para React
- Você aprende melhor quando o resultado aparece na tela no momento em que o código é executado
- Você está criando um portfólio de pequenos projetos e quer etapas guiadas
- Você está se preparando para uma entrevista de frontend e quer perguntas para praticar
Não é a ferramenta certa se você
- Você nunca viu JavaScript, porque o curso pressupõe um conhecimento básico da linguagem
- Você quer criar e publicar um projeto completo, o que ainda exige um laptop
- Você espera que tudo seja gratuito, pois o primeiro curso é gratuito e o Pro desbloqueia o restante
- Você quer um curso oficial da equipe do React, pois este é um app independente
Dúvidas
Perguntas frequentes
É possível aprender programação em React pelo celular?
As ideias fundamentais, os componentes, props, state e hooks podem ser aprendidos pelo celular, desde que você consiga executar o que escreve. Aprender React: Curso Code inclui ReactDOM e Babel, para que seu JSX seja renderizado em uma prévia ao vivo no dispositivo. Um laptop se torna útil quando você começa a criar e publicar um projeto maior.
Preciso saber JavaScript antes de aprender React?
Saber um pouco ajuda. Aprender React: Curso Code é voltado para pessoas que conhecem um pouco de HTML, CSS ou JavaScript, como variáveis, funções e arrays. Se você nunca escreveu JavaScript, aprenda primeiro, pois as aulas de React pressupõem que você consiga ler a linguagem.
Qual é a diferença entre props e state?
Props são entradas que um componente recebe do componente pai e não devem ser alteradas, enquanto state são dados que pertencem ao componente e são atualizados ao longo do tempo. No Aprender React: Curso Code, você pode ver isso no Hooks Lab, que mostra cada alteração de state e cada nova renderização, e nos controles de props, que permitem alterar uma prop com um controle deslizante.
O app ensina hooks como useEffect?
Sim. Aprender React: Curso Code aborda useState, useEffect, useRef, useReducer, custom hooks e useLayoutEffect. Aulas separadas explicam quando os effects são executados, arrays de dependências e erros comuns, com um modo Bug Hunt para encontrar bugs em componentes com problemas.
React é igual a React Native? O app ensina os dois?
Não. React é a biblioteca para criar interfaces de usuário, enquanto React Native usa as mesmas ideias para criar apps mobile. Aprender React: Curso Code ensina primeiro React para a web, e um curso de fundamentos de React Native ajuda desenvolvedores web a levar essas habilidades para o mobile.
Aprender React: Curso Code aborda Next.js e React 19?
Sim. Os cursos abordam os recursos do React 19 e Server Components, SSR e hydration, streaming e o App Router do Next.js com busca de dados, cache e autenticação. Também há um curso de fundamentos de React Native para desenvolvedores web.
Que tipo de projeto posso criar?
São 20 projetos guiados, construídos passo a passo: 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 e um app de tarefas. Cada etapa verifica se o componente funciona antes de você continuar.
Aprender React: Curso Code é gratuito?
O download é gratuito. A versão gratuita inclui o primeiro curso, um projeto guiado, duas missões de programação, o editor de código com prévia ao vivo, Hooks Lab, controles de props, Bug Hunt e três verificações de UI Match por dia, além de exibir anúncios. O Pro desbloqueia todos os cursos, projetos e missões, o mentor de IA, o render profiler, o exame para certificado e remove os anúncios.
Há certificado ou preparação para entrevistas?
Ao passar no exame final, você recebe um certificado compartilhável, que faz parte do Pro. Para entrevistas, há 50 perguntas de entrevista, um quiz com 50 perguntas e uma folha de consulta para praticar os conceitos fundamentais.
O código é executado em um servidor?
Não. O runtime vem integrado ao app, então seu código é compilado e renderizado no dispositivo. É por isso que você pode tocar no botão que criou e ver a UI responder dentro da prévia.
Quais linguagens e plataformas são compatíveis?
Aprender React: Curso Code funciona em iOS e Android e está disponível em 22 idiomas. Tem classificação 4+ e requer iOS 15.1 ou posterior no iPhone.
Comece agora
Renderize seu primeiro componente hoje
Grátis para começar no iOS e Android, em 22 idiomas.
Mais da CoddyKit
Disponível em iOS e Android.