📊 Capítulo 01: Ecossistema React 19 & JSX/TSX
Especialização em Frontend com React
🗺️ O Ciclo de Renderização e Reconciliação do React (Fiber Tree)
flowchart TD
TSX["Código JSX/TSX: <Card title='Prod' />"]
--> COMPILER["Compilador JSX: React.createElement(...) / jsxRuntime"]
--> VIRTUAL_DOM["Árvore de Elementos (Virtual DOM / React Fiber Node)"]
VIRTUAL_DOM --> RENDER_PHASE["Render Phase (Cálculo puro de diferenças - Diffing / Sem tocar no DOM real)"]
RENDER_PHASE --> COMMIT_PHASE["Commit Phase (Aplica mutações mínimas calculadas diretamente no Real DOM)"]
COMMIT_PHASE --> REAL_DOM["Browser Real DOM atualizado em 60 FPS! ⚡"]
style TSX fill:#ede7f6,stroke:#512da8,stroke-width:2px
style COMPILER fill:#fff3e0,stroke:#ff9800,stroke-width:1.5px
style VIRTUAL_DOM fill:#e1f5fe,stroke:#03a9f4,stroke-width:2px
style RENDER_PHASE fill:#e8f5e9,stroke:#4caf50,stroke-width:2px
style COMMIT_PHASE fill:#c8e6c9,stroke:#2e7d32,stroke-width:2px
style REAL_DOM fill:#00897b,stroke:#004d40,stroke-width:2px,color:#ffffff
🎯 Slide 1: O Que Há de Novo no React 19?
-
React Compiler (Forget): Otimização e memoização automática de componentes e hooks em tempo de compilação sem precisar de
useMemomanual! -
Actions e Server Functions Nativas: Suporte nativo a mutações assíncronas com tratamento de estado pendente (
useActionState,useOptimistic). - Asset Loading & Document Metadata:
<title>e<meta>inseridos diretamente em qualquer componente!
🎯 Slide 2: JSX/TSX Sob o Capô
-
JSX não é HTML; é uma extensão de sintaxe para JavaScript que compila para chamadas de função (
_jsx('div', { children: ... })). - Toda expressão entre chaves
{ variavel }é JavaScript puro avaliado em tempo de execução.
🎯 Slide 3: O Ambiente Moderno com Vite
npm create vite@latest meu-app -- --template react-ts- HMR (Hot Module Replacement) instantâneo com suporte completo a TypeScript e Fast Refresh nativo!
🔗 Navegação do Capítulo 01
| 📖 Ler Conteúdo Completo | 🧠 Fazer Quiz | 💻 Ver Exemplos | 🧩 Exercícios |
Slide 1 de 1
Atalhos: ← → Navegar • Espaço Avançar • F Tela Cheia • Home Início • End Fim