npx create-expo-app. Rode no celular antes da aula.View, Text, FlatList, TouchableOpacity, ActivityIndicator nos docs oficiais.📌 Material de chegada: Expo Go instalado + projeto rodando no celular + 1 dúvida sobre custom hooks. Esses 3 itens alimentam o daily de abertura.
Mobile-first, RN em 1 slide, padrão MVVM e a anatomia Model / ViewModel / View em TypeScript real.
Receber um componente "tudo num arquivo" e separar em Model + useEspetaculosViewModel + EspetaculosScreen. MR individual.
feat/espetaculos-mvvmfetch nem useEffect🎯 Saída do dia: MR individual com o refactor nos 3 arquivos (model, viewmodel, view) + 1 frase sobre o que ficou testável. Sem ponderada hoje — prepara o terreno pro TDD da aula 7.
Framework do Meta para construir apps mobile iOS e Android com JavaScript/TypeScript. Os componentes (<View>, <Text>) são traduzidos em componentes nativos (UIView, android.view.View) — não são WebView.
RN usa os componentes nativos do SO (UIButton, Material). Flutter desenha tudo num canvas próprio (Skia) — visual 100% controlado, mas sem look-and-feel nativo automático.
Componente puro de UI. Não tem lógica de negócio. Renderiza estado e dispara eventos.
Mantém o estado da View, chama o Model, expõe ações. Sem JSX. Em React: um custom hook.
Tipos, validação, fetch da API. Não conhece a View nem o ViewModel. Reusável em qualquer tela.
No MVC clássico a Controller orquestra tudo e a View conhece o Model. No MVVM a ViewModel isola — a View só sabe falar com o VM. Reduz acoplamento, ganha testabilidade.
View → VM: input do usuário muda estado (ex.: digitou no campo). VM → View: estado novo re-renderiza a UI. Em React isso é o ciclo natural de useState + re-render.
📐 Princípio: o Model é puro — sem React, sem hooks, sem UI. Pode ser testado com Jest sem montar componente. Reusável em qualquer tela do app.
💡 Por que custom hook? No React funcional, hooks são ViewModels. Carregam estado da tela, expõem ações, não tem JSX. Testáveis com @testing-library/react-hooks sem renderizar UI — exatamente o que MVVM promete.
🔎 Note: a View não tem fetch, não tem useEffect, não conhece a API. Só consome o que o ViewModel expõe. Trocar a fonte de dados (mock, GraphQL, Firestore) não toca nesse arquivo.
useState · estado local simplesuseReducer · transições complexasaventura://espetaculo/42RootStackParamList📌 Regra de bolso: comece com useState dentro do hook ViewModel. Promova para Zustand quando 2+ telas compartilharem o mesmo estado. Não use Redux só porque é famoso.
Quebre o arquivo ao lado nas 3 camadas que você viu nos slides 8–10:
model/Espetaculo.ts — tipo + fetchEspetaculos()viewmodels/useEspetaculosViewModel.ts — items, loading, error, reloadviews/EspetaculosScreen.tsx — só consome o hookRegra: a View não pode ter fetch nem useEffect. Pode usar IA pra acelerar.
feat/espetaculos-mvvm🔗 Ponte pra aula 7: o ViewModel que você isolou hoje é exatamente o que vamos testar com TDD na próxima aula — sem montar a UI. Hoje você o tornou testável; lá escrevemos os testes.