Menu
Coddy logo textTech
COMEÇAR A APRENDER
flag Pt iconPortuguêsdown icon
NovoJornada

Aprenda React - Curso interativo gratuito

Domine React escrevendo componentes de verdade desde a primeira lição: JSX, props, estado e eventos, e siga para o Next.js - rotas por sistema de arquivos, layouts, componentes de servidor, busca de dados e server actions. Tudo roda no seu navegador com dicas de IA quando você trava, e você ganha um certificado gratuito ao concluir.

COMEÇAR A APRENDER(é grátis)
Ver programa

1,000+ codders inscritos

89 lições69 desafios164 perguntas de quiz

  • Ideal para iniciantes
  • sparkles iconAjuda de codificação com IA
  • hint iconLições interativas e práticas
  • volume On iconNarração em áudio em todas as lições
  • quiz iconQuestionários para testar seu conhecimento
  • certificate iconCertificado grátis de conclusão

Programa

2 seções1 projetos89 lições69 desafios164 perguntas de quiz
  1. Seção 1

    Fundamentos

    Começar seçãoIniciarExpandirRecolher    Aprenda a construir interfaces de usuário com React: componentes, JSX, props, estado e eventos, do seu primeiro componente a um mini app funcional.42 lições37 desafios65 perguntas

    Conheça o React

    5 lições513

    Expressões JSX

    5 lições58

    Componentes

    5 lições48

    Props

    6 lições510

    Estado e Eventos

    6 lições59

    Formulários e Entradas

    5 lições47

    Condições e Listas

    6 lições510

    Projeto: Cartão de Perfil

    4 lições4
  2. Seção 2

    Essenciais do Next.jsPágina própria

    Começar seçãoIniciarExpandirRecolher    Vá além dos componentes React para uma aplicação real: roteamento baseado em sistema de arquivos, layouts, server e client components, busca de dados, server actions e um projeto completo em Next.js.47 lições32 desafios99 perguntas1 projeto

    Por que usar o Next.js

    4 lições39

    Roteamento e Links

    6 lições516

    Layouts e Metadados

    6 lições515

    Servidor & Cliente

    6 lições515

    Dados no Servidor

    6 lições516

    Server Actions

    5 lições413

    Navegação do Cliente

    5 lições515

    Projeto: Coddy Eats

    Projeto9 lições
O que você recebe
Tudo o que você vai usar para aprender a programar

Learn by Doing

Write real code, query databases, build websites, and master AI prompts. Our interactive lessons cover every skill modern developers need.

playground.js
Code Editor
1const greeting = "Hello, Coddy!"
2function sayHi(name) {
3    return greeting + " " + name
4}
5
bottombar Collapse icon
Test #1test Case Success icon
Test #2test Case Success icon
Test #3test Case Failure icon
Input
"Alex"
Output
"Hello, Coddy! Alex"

Build Your Coding Streak

Stay consistent and watch your progress grow! Track your daily coding habit, protect your streak with freeze days, and earn rewards for showing up every day.

12 days streak

Return tomorrow to keep your streak!

fire Filled icon
left icon

January 2026

right icon

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

21

22

23

24

25

26

27

28

29

30

product Double Or Nothing icon

Double or Nothing

Day 5 of 7

fire Freeze icon

Streak Freeze

2 left

Code Anywhere, Anytime

Take your coding journey on the go! No setup, no downloads - just open and start coding. Available on iOS, Android and Web with 4.9 star ratings.

Python
7Streak
250Score
5Energy
Variables
journey Hex Done Base iconjourney Hex Done Shadow iconjourney Hex Done Top iconjourney Lesson Done icon
journey Path Right Done icon
journey Hex Done Base iconjourney Hex Done Shadow iconjourney Hex Done Top iconjourney Lesson Done icon
journey Path Left Done icon
journey Hex Active Base iconjourney Hex Active Shadow iconjourney Hex Active Top iconjourney Lesson Theory Challenge icon
CONTINUE
journey Path Right icon
journey Hex Locked Base iconjourney Hex Locked Shadow iconjourney Hex Locked Top iconjourney Lesson Theory Challenge icon
journey Path Left icon
journey Hex Locked Base iconjourney Hex Locked Shadow iconjourney Hex Locked Top iconjourney Lesson All icon
Journey
Goals
Leaderboard
Profile
4.9
StarStarStarStarStar
Rating

You're Not Alone in This

Compete on global leaderboards, invite friends to earn rewards, and celebrate each other's wins. Coding is better with friends!

Challenger League
Challenger LeagueTop 7 advance
leaderboard First icon1
avatar 1 icon
fire Filled icon
Alex7+ Days
2840
leaderboard Second icon2
avatar 2 icon
fire Filled icon
Jordan7+ Days
2650
leaderboard Third icon3
avatar 3 icon
fire Filled icon
Sam7+ Days
2420
4
avatar 4 icon
Casey
2180
5
avatar placeholder icon
fire Filled icon
Morgan7+ Days
1950
leaderboard Arrow Up iconPromotion zoneleaderboard Arrow Up icon

Every way to learn

Read, listen, test yourself, ask the AI, or look up anything you've already covered. Every lesson meets you where you are.

Intro to Variables
Audio

A variable is a named container that stores a value you can reference later in your program.

In Python, you create one by writing the name, an equals sign, then the value you want to store.

The value can change over time - reassigning the name simply points it to a new value.

1xSarah

Prove Your Skills

Earn certificates for every course you complete. Add them to your LinkedIn profile and resume to showcase your coding expertise to employers.

CoddyCertificate of Completion
This certifies thatJohn Doehas successfully completed
PythonPython Fundamentals
Verified
DateJan 2026
LinkedInAdd to LinkedIn

Por que aprender React com a Coddy

  • Escreva JSX no navegador desde a primeira lição. Sem instalar Node, sem create-react-app, sem configurar build - cada lição entrega código de componente real para editar e executar.
  • Um currículo que termina em apps de verdade: componentes, props, estado, eventos e hooks na seção de Fundamentos, e depois uma seção completa de Next.js - rotas, layouts, componentes de servidor e cliente, busca de dados e server actions.
  • Dicas de IA que leem o seu código de verdade. Quando um componente não renderiza ou o estado não atualiza, você recebe um empurrão que aponta o bug sem entregar a solução.
  • Um certificado gratuito de React ao concluir - um ótimo sinal para vagas de frontend, onde React continua sendo a biblioteca de UI mais requisitada.

Perguntas frequentes sobre aprender React

O que é React?

React é uma biblioteca JavaScript para construir interfaces de usuário a partir de componentes - funções pequenas e reutilizáveis que retornam marcação. Criada na Meta, ela move uma parte enorme da web moderna, do Facebook e Instagram aos produtos de milhões de startups, e é consistentemente a habilidade de frontend mais pedida nas vagas.

Preciso saber JavaScript antes de aprender React?

Você deve estar confortável com o básico de JavaScript - variáveis, funções, arrays e objetos. O curso apresenta os padrões de JavaScript em que o React se apoia (arrow functions, desestruturação, map) conforme eles aparecem, então não precisa ser especialista. Se você nunca programou, comece pela jornada de JavaScript.

React é difícil de aprender?

As ideias centrais - componentes, JSX, props - encaixam rápido porque lembram coisas que você já conhece: funções e HTML. Estado, efeitos e fluxo de dados pedem mais prática, e é por isso que cada lição faz você escrever e rodar código de componente de verdade em vez de só ler sobre o assunto.

Qual é a diferença entre React e Next.js?

React é a biblioteca de UI - componentes, estado, renderização. Next.js é um framework construído sobre o React que adiciona o que apps reais precisam: rotas por sistema de arquivos, layouts, renderização no servidor, busca de dados e server actions. O curso ensina primeiro os fundamentos de React e depois uma seção dedicada de Next.js leva você dos componentes a um app completo.

Posso aprender React online de graça?

Sim. O curso interativo de React é gratuito: lições práticas, desafios de código com feedback instantâneo, dicas com IA e quizzes. Tudo roda no navegador, então não há nada para instalar e você pode começar agora.

Ganho um certificado ao terminar o curso de React?

Sim. Ao concluir o curso você ganha um certificado gratuito de conclusão para adicionar ao LinkedIn ou ao currículo. Junto com os componentes e apps que você constrói pelo caminho, é uma prova concreta de habilidades práticas em React e Next.js.
Coddy programming languages illustration

Aprenda React com Coddy

COMEÇAR