React com fundamentos sólidos: componentes, estado, efeitos, roteamento e um caminho claro para Next.js.
Mapa mental do roadmap
JSX e componentesprops e composição
JSX e componentes e um topico essencial da fase "Fundamentos" do Roadmap React, focado em props e composição. Para dominar este conceito, recomenda-se criar um projeto pratico no GitHub e testar implementacoes reais.
Estado e eventosuseState
Estado e eventos e um topico essencial da fase "Fundamentos" do Roadmap React, focado em useState. Para dominar este conceito, recomenda-se criar um projeto pratico no GitHub e testar implementacoes reais.
EfeitosuseEffect com cuidado
Efeitos e um topico essencial da fase "Fundamentos" do Roadmap React, focado em useEffect com cuidado. Para dominar este conceito, recomenda-se criar um projeto pratico no GitHub e testar implementacoes reais.
Listas e formscontrole de inputs
Listas e forms e um topico essencial da fase "Fundamentos" do Roadmap React, focado em controle de inputs. Para dominar este conceito, recomenda-se criar um projeto pratico no GitHub e testar implementacoes reais.
RoteamentoReact Router / Next
Roteamento e um topico essencial da fase "App real" do Roadmap React, focado em React Router / Next. Para dominar este conceito, recomenda-se criar um projeto pratico no GitHub e testar implementacoes reais.
Data fetchingloading e erro
Data fetching e um topico essencial da fase "App real" do Roadmap React, focado em loading e erro. Para dominar este conceito, recomenda-se criar um projeto pratico no GitHub e testar implementacoes reais.
Estado globalquando realmente precisa
Estado global e um topico essencial da fase "App real" do Roadmap React, focado em quando realmente precisa. Para dominar este conceito, recomenda-se criar um projeto pratico no GitHub e testar implementacoes reais.
TypeScriptprops tipadas
TypeScript e um topico essencial da fase "App real" do Roadmap React, focado em props tipadas. Para dominar este conceito, recomenda-se criar um projeto pratico no GitHub e testar implementacoes reais.
TestesTesting Library
Testes e um topico essencial da fase "Qualidade" do Roadmap React, focado em Testing Library. Para dominar este conceito, recomenda-se criar um projeto pratico no GitHub e testar implementacoes reais.
Performancememo sob medida
Performance e um topico essencial da fase "Qualidade" do Roadmap React, focado em memo sob medida. Para dominar este conceito, recomenda-se criar um projeto pratico no GitHub e testar implementacoes reais.
DeployVercel / Pages
Deploy e um topico essencial da fase "Qualidade" do Roadmap React, focado em Vercel / Pages. Para dominar este conceito, recomenda-se criar um projeto pratico no GitHub e testar implementacoes reais.
Detalhamento por fase
1 Fase 1 - Fundamentos
Objetivo da fase: consolidar o aprendizado pratico de fundamentos.
JSX e componentes - props e composiçãoessencial
JSX e componentes e um topico essencial da fase "Fundamentos" do Roadmap React, focado em props e composição. Para dominar este conceito, recomenda-se criar um projeto pratico no GitHub e testar implementacoes reais.
Estado e eventos - useStateessencial
Estado e eventos e um topico essencial da fase "Fundamentos" do Roadmap React, focado em useState. Para dominar este conceito, recomenda-se criar um projeto pratico no GitHub e testar implementacoes reais.
Efeitos - useEffect com cuidadoessencial
Efeitos e um topico essencial da fase "Fundamentos" do Roadmap React, focado em useEffect com cuidado. Para dominar este conceito, recomenda-se criar um projeto pratico no GitHub e testar implementacoes reais.
Listas e forms - controle de inputsessencial
Listas e forms e um topico essencial da fase "Fundamentos" do Roadmap React, focado em controle de inputs. Para dominar este conceito, recomenda-se criar um projeto pratico no GitHub e testar implementacoes reais.
2 Fase 2 - App real
Objetivo da fase: consolidar o aprendizado pratico de app real.
Roteamento - React Router / Nextessencial
Roteamento e um topico essencial da fase "App real" do Roadmap React, focado em React Router / Next. Para dominar este conceito, recomenda-se criar um projeto pratico no GitHub e testar implementacoes reais.
Data fetching - loading e erroessencial
Data fetching e um topico essencial da fase "App real" do Roadmap React, focado em loading e erro. Para dominar este conceito, recomenda-se criar um projeto pratico no GitHub e testar implementacoes reais.
Estado global - quando realmente precisaopcional
Estado global e um topico essencial da fase "App real" do Roadmap React, focado em quando realmente precisa. Para dominar este conceito, recomenda-se criar um projeto pratico no GitHub e testar implementacoes reais.
TypeScript - props tipadasopcional
TypeScript e um topico essencial da fase "App real" do Roadmap React, focado em props tipadas. Para dominar este conceito, recomenda-se criar um projeto pratico no GitHub e testar implementacoes reais.
3 Fase 3 - Qualidade
Objetivo da fase: consolidar o aprendizado pratico de qualidade.
Testes - Testing Libraryessencial
Testes e um topico essencial da fase "Qualidade" do Roadmap React, focado em Testing Library. Para dominar este conceito, recomenda-se criar um projeto pratico no GitHub e testar implementacoes reais.
Performance - memo sob medidaopcional
Performance e um topico essencial da fase "Qualidade" do Roadmap React, focado em memo sob medida. Para dominar este conceito, recomenda-se criar um projeto pratico no GitHub e testar implementacoes reais.
Deploy - Vercel / Pagesessencial
Deploy e um topico essencial da fase "Qualidade" do Roadmap React, focado em Vercel / Pages. Para dominar este conceito, recomenda-se criar um projeto pratico no GitHub e testar implementacoes reais.
Perguntas frequentes
Quanto tempo leva para concluir o Roadmap React?
O tempo estimado e de ~2–4 meses, dependendo da dedicacao diaria e pratica constante.
Por onde comecar do zero absoluto?
Inicie pela Fase 1 pelos nos marcados como essenciais antes de avancar para topicos avancados.
Como usar este roadmap
- Siga as fases na ordem — pular fundamentos cria buracos difíceis de fechar depois.
- Cada nó essencial precisa de um artefato: repo, deploy, checklist marcado ou demo.
- Ajuste o ritmo à sua rotina; a métrica é entrega, não data no calendário.
- Volte aos nós opcionais quando o núcleo estiver sólido.