React — Roadmap | Kaique Yamamoto

Curadoria recente (React 19, Next.js 16, Server Components). Cada módulo é independente — siga a ordem ou pule para o que precisar. Todos os vídeos estão na página de curadoria acima.

Módulo 1 · Base

Fundamentos de React

JSXcomponentespropsstateReact 19

JSX e renderização
Componentes funcionais
Props e composição
State e eventos
Listas e keys
Renderização condicional
Novidades do React 19
Setup com Vite

Estimado: ~12h

TRILHA 1/10

Módulo 2 · Core

Hooks & Conceitos

useStateuseEffectuseContextcustom hooksFiber

useState e useEffect
useContext e Context API
useRef, useReducer
Custom hooks
Virtual DOM e diffing
Reconciliation e React Fiber
Regras dos hooks
use() hook (React 19)

Estimado: ~18h

TRILHA 2/10

Módulo 3 · Performance

Otimização & Performance

memouseMemouseCallbackRSCre-render

React.memo e quando usar
useMemo e useCallback
Evitar re-renders desnecessários
Memoization na prática
Code splitting e lazy/Suspense
React Server Components
React Compiler
Profiler e DevTools

Estimado: ~16h

TRILHA 3/10

Módulo 4 · Tempo real

Real-time

WebSocketSocket.ioSSEEventSourcelive

WebSockets no React
Socket.io cliente + servidor
Chat em tempo real
Server-Sent Events (SSE)
EventSource e streaming
UI otimista (useOptimistic)
Reconexão e estado live
Padrões de sincronização

Estimado: ~16h

TRILHA 4/10

Módulo 5 · Web

Sites & Landing Pages

Next.jsTailwindFramer MotionGSAPdeploy

Next.js App Router
Tailwind CSS e design responsivo
Animações (Framer Motion / GSAP)
Landing pages do zero
Portfólios e sites de negócio
SSG/SSR e SEO
shadcn/ui e componentes
Deploy na Vercel

Estimado: ~20h

TRILHA 5/10

Módulo 6 · Framework

Next.js

App RouterRSCserver actionscachingdeploy

App Router e file-system routing
Layouts, rotas dinâmicas e grupos
Server vs Client Components
Data fetching e streaming
Caching e revalidação
Server Actions e mutações
Route Handlers (API)
Deploy na Vercel

Estimado: ~22h

TRILHA 6/10

Módulo 7 · Mobile

React Native (Expo)

ExpoExpo Routernavegaçãonativopublicar

Setup com Expo
Componentes nativos e estilos
Expo Router (stacks, tabs, dynamic)
Rotas protegidas e layout
Estado e consumo de API
Integração com Supabase
iOS e Android
Build e publicação nas lojas

Estimado: ~24h

TRILHA 7/10

Módulo 8 · Integração IA

Integração com IA / LLM

Vercel AI SDKstreamingchat UIOpenAIgenerative UI

Vercel AI SDK no React
Streaming de respostas
Chat UI e AI Elements
Integração OpenAI / Anthropic
Generative UI
Tool calling / agentic
Chatbot com Next.js
SSE + LLM no front

Estimado: ~16h

TRILHA 6/10

Módulo 9 · Integração API

Integração com APIs / Backend

fetchAxiosReact QuerySWRREST

fetch e Axios
Consumir REST APIs
React Query / TanStack Query
useQuery, useMutation, cache
Paginação e infinite scroll
Optimistic updates
SWR
Tratamento de erros e loading

Estimado: ~16h

TRILHA 7/10

Módulo 10 · Integração BaaS

Integração com BaaS

SupabaseFirebaseauthrealtimestorage

Setup Supabase no React
Supabase Auth e RLS
Realtime subscriptions
CRUD com Supabase
Firebase Auth
Cloud Firestore
Storage de arquivos
Rotas protegidas

Estimado: ~16h

TRILHA 8/10

Roadmap Completo de React

Dez módulos, dos fundamentos à integração