Caminho de Aprendizado da Primeira Semana

Um guia para os primeiros cinco dias de um novo contratado - aprenda Expo Router, dispare EAS Build e envie um recurso de ponta a ponta antes do trabalho de backlog da segunda semana.

Receita

Cartão de receita de referência rápida - o caminho mínimo de clone a PR mesclado com um build de dispositivo.

# Dia 1 - caminho verde
git clone <repo> && cd <repo> && npm ci
npx expo-doctor && npm run typecheck
npx expo start
 
# Dia 3 - rastrear + alterar
# app/(tabs)/explore.tsx → features/explore/screens/ExploreScreen.tsx
 
# Dia 5 - prévia no dispositivo
eas build --profile preview --platform android --non-interactive

Arc da semana:
  Seg → Máquina + Metro + ler CONTRIBUTING.md
  Ter → Tour do Expo Router + pequeno PR de UI mesclado
  Qua → Rastreamento de fatia de recurso + teste unitário
  Qui → Navegação + teste de componente RNTL
  Sex → Build de prévia no telefone + trabalho final (PR)

Quando usar isso:

Onboarding de um engenheiro júnior ou de transferência web em um aplicativo Expo SDK 57 existente.
Padronização do que significa "produtivo na primeira semana" entre as equipes.
Substituição da orientação ad-hoc "ler o repositório inteiro" por um resultado que pode ser enviado.

Exemplo de Trabalho

Assuma um aplicativo de equipe com abas, uma pasta features/ e um perfil de prévia eas.json. O recurso final: adicionar uma linha "Dicas" na tela Explorar que navega para /tips.

Dia 1 - Máquina e modelo mental

npm ci
npx expo-doctor
cp .env.example .env.local
npx expo start

Leia em ordem:

CONTRIBUTING.md - nomenclatura de branch, template de PR, regras de rótulo de prévia
app/_layout.tsx - provedores e navegador raiz
app/(tabs)/_layout.tsx - configuração da barra de abas
Noções Básicas do Expo Router - arquivo = rota

Entregável: Postar no thread de onboarding: captura de tela do simulador em execução + expo-doctor verde.

Dia 2 - Pequeno PR mesclado (Router)

Adicione uma legenda em uma tela existente - pratique branch → PR → CI sem risco de produto.

// app/(tabs)/explore.tsx - arquivo de rota simples
import { ExploreScreen } from "@/features/explore/screens/ExploreScreen";
 
export default ExploreScreen;

// features/explore/screens/ExploreScreen.tsx
import { Text, View } from "react-native";
 
export function ExploreScreen() {
  return (
    <View style={{ flex: 1, padding: 16 }}>
      <Text accessibilityRole="header">Explore</Text>
      <Text>Bem-vindo - primeira semana</Text>
    </View>
  );
}

git checkout -b onboarding/jane-explore-subtitle
npm run lint && npm run typecheck && npm test
git push -u origin HEAD
# Abrir PR - esperar que os checks do PR fiquem verdes em <10 min

Entregável: Um PR mesclado com CI aprovado. Leia um comentário de revisão de um colega em voz alta durante o pareamento.

Dia 3 - Rastreamento de fatia de recurso

Com seu colega, desenhe este caminho em um quadro branco para um recurso existente (autenticação, carrinho, perfil):

app/orders/[id].tsx
  → features/orders/screens/OrderDetailScreen.tsx
    → features/orders/hooks/useOrder.ts
      → features/orders/api/ordersApi.ts
        → shared/api/client.ts

Exercício de grep:

rg "useOrder" --type ts
rg "ordersApi" app features

Adicione um teste unitário para um formatador puro no recurso:

// features/orders/lib/formatOrderTotal.test.ts
import { formatOrderTotal } from "./formatOrderTotal";
 
it("formats USD total", () => {
  expect(formatOrderTotal(1299, "USD")).toBe("$12.99");
});

Entregável: Foto do diagrama + um novo arquivo de teste no PR ou branch do trabalho final.

Relacionado: Estrutura de Pastas para Recursos - escalando além do layout inicial

Dia 4 - UI e navegação do trabalho final

Adicione o fluxo de Dicas - rota, tela, link.

// app/tips.tsx
import { TipsScreen } from "@/features/tips/screens/TipsScreen";
 
export default TipsScreen;

// features/tips/screens/TipsScreen.tsx
import { Stack } from "expo-router";
import { ScrollView, Text } from "react-native";
 
export function TipsScreen() {
  return (
    <>
      <Stack.Screen options={{ title: "Tips" }} />
      <ScrollView contentContainerStyle={{ padding: 16 }}>
        <Text>Envie pequenos PRs. Execute expo-doctor com frequência.</Text>
      </ScrollView>
    </>
  );
}

// features/explore/screens/ExploreScreen.tsx (excerto)
import { Link } from "expo-router";
import { Pressable, Text } from "react-native";
 
<Link href="/tips" asChild>
  <Pressable accessibilityRole="link">
    <Text>Ver dicas de onboarding →</Text>
  </Pressable>
</Link>

Teste de componente:

// features/explore/screens/ExploreScreen.test.tsx
import { render, screen } from "@testing-library/react-native";
import { ExploreScreen } from "./ExploreScreen";
 
it("shows link to tips", () => {
  render(<ExploreScreen />);
  expect(screen.getByRole("link", { name: /tips/i })).toBeTruthy();
});

Entregável: Navegação funciona no simulador; teste passa localmente e em CI.

Relacionado: Noções Básicas do Expo Router - Link e href

Dia 5 - Prévia EAS no dispositivo

Dispare um build de prévia e instale em um dispositivo Android físico (ou iOS se o UDID estiver registrado).

eas login
eas build --profile preview --platform android --non-interactive
# Abra a URL do painel EAS - escaneie o QR no dispositivo

// eas.json - confirme se o perfil de prévia existe
{
  "build": {
    "preview": {
      "distribution": "internal",
      "channel": "preview",
      "android": { "buildType": "apk" }
    }
  }
}

No PR, adicione o rótulo needs-preview se sua equipe automatizar builds - Builds de Prévia em PRs.

Checklist do PR do trabalho final:

Nova rota app/tips.tsx + tela de recurso
Link de Explorar
Teste unitário ou de componente
Captura de tela de um dispositivo físico na descrição do PR
npm run lint && npm run typecheck && npm test verde

Entregável: PR do trabalho final mesclado + prova do build de prévia em hardware.

Aprofundamento

O que adiar para depois da primeira semana

Tópico	Por que adiar	Quando
Upgrade do SDK	Alto raio de impacto	Segundo mês com colega
Módulos nativos / plugins de configuração	Necessita de familiaridade com o cliente de desenvolvimento	Quando receber um ticket
Envio para loja	Credenciais + política	Após o primeiro build de prévia
Filtros Turbo do Monorepo	Complexidade da CI	Ao mexer em pacotes compartilhados
Criação de E2E Maestro	Trabalho final usa RNTL	Segunda ou terceira semana

Agenda da sessão em dupla (90 minutos)

1. 10m - Puxar main, expo-doctor, demonstrar atalhos do Metro
2. 20m - Percorrer app/_layout.tsx e uma pilha de abas
3. 20m - Abrir Sentry / analytics (somente leitura), se aplicável
4. 20m - Parear no bug de navegação do trabalho final, se houver
5. 20m - Revisar o template de descrição do PR e o rótulo de prévia

Retrospectiva escrita (privada para o líder)

## Retrospectiva da primeira semana - <nome>
- Documento mais claro:
- Pasta mais confusa:
- Ferramenta que me surpreendeu:
- Um PR de documentação que enviarei:

Use as respostas de "pasta mais confusa" para atualizar o Checklist do Tour do Código.

Métricas de sucesso para líderes

Sinal	Primeira semana saudável	Investigar
PRs mesclados	≥2 (pequeno + trabalho final)	Zero merges - bloqueador
Falhas de CI	Auto-corrigidas após a primeira	Mesmo erro de lint no dia 4
Build de dispositivo	Prévia instalada	Apenas simulador na sexta-feira
Perguntas	Específicas, com tempo	Silencioso até o dia 10

FAQs

E se a CI falhar no segundo dia?

Corrija a CI antes do trabalho de recurso - peça ao colega para parear em npx expo customize tsconfig.json ou variáveis de ambiente ausentes. Não pule os portões.

O trabalho final é muito grande para juniores?

Reduza o requisito de teste para um teste de função pura; mantenha a navegação + build de prévia. Mescle PRs divididos: UI primeiro, link depois.

Não há dispositivo físico disponível?

Use o emulador Android com imagem Play ou o perfil de build do simulador iOS. Ainda assim, execute eas build uma vez para aprender o painel.

Clone de Monorepo - caminho diferente?

Execute a instalação a partir da raiz do workspace do aplicativo documentada no README. O trabalho final da primeira semana permanece dentro de um único pacote de aplicativo - veja Monorepo com Turborepo.

Relacionados

Noções Básicas de Onboarding - configuração da máquina no primeiro dia
Noções Básicas do Expo Router - rotas e layouts
Noções Básicas do EAS Build - perfis e primeiro build
Noções Básicas de Configuração de Projeto - scaffold do SDK 57
Checklist do Tour do Código - percurso estruturado do repositório
Normas de Pareamento e Mob em Mobile - sessões em dupla

Versões da Stack: Esta página foi escrita para React 19.2.3, React Native 0.86.0 e Expo SDK 57 (expo ~57.0.4).

Receita

Cartão de receita de referência rápida - o caminho mínimo de clone a PR mesclado com um build de dispositivo.

# Dia 1 - caminho verde
git clone <repo> && cd <repo> && npm ci
npx expo-doctor && npm run typecheck
npx expo start
 
# Dia 3 - rastrear + alterar
# app/(tabs)/explore.tsx → features/explore/screens/ExploreScreen.tsx
 
# Dia 5 - prévia no dispositivo
eas build --profile preview --platform android --non-interactive

Arc da semana:
  Seg → Máquina + Metro + ler CONTRIBUTING.md
  Ter → Tour do Expo Router + pequeno PR de UI mesclado
  Qua → Rastreamento de fatia de recurso + teste unitário
  Qui → Navegação + teste de componente RNTL
  Sex → Build de prévia no telefone + trabalho final (PR)

Quando usar isso:

Onboarding de um engenheiro júnior ou de transferência web em um aplicativo Expo SDK 57 existente.
Padronização do que significa "produtivo na primeira semana" entre as equipes.
Substituição da orientação ad-hoc "ler o repositório inteiro" por um resultado que pode ser enviado.

Exemplo de Trabalho

Assuma um aplicativo de equipe com abas, uma pasta features/ e um perfil de prévia eas.json. O recurso final: adicionar uma linha "Dicas" na tela Explorar que navega para /tips.

Dia 1 - Máquina e modelo mental

npm ci
npx expo-doctor
cp .env.example .env.local
npx expo start

Leia em ordem:

CONTRIBUTING.md - nomenclatura de branch, template de PR, regras de rótulo de prévia
app/_layout.tsx - provedores e navegador raiz
app/(tabs)/_layout.tsx - configuração da barra de abas
Noções Básicas do Expo Router - arquivo = rota

Entregável: Postar no thread de onboarding: captura de tela do simulador em execução + expo-doctor verde.

Dia 2 - Pequeno PR mesclado (Router)

Adicione uma legenda em uma tela existente - pratique branch → PR → CI sem risco de produto.

// app/(tabs)/explore.tsx - arquivo de rota simples
import { ExploreScreen } from "@/features/explore/screens/ExploreScreen";
 
export default ExploreScreen;

// features/explore/screens/ExploreScreen.tsx
import { Text, View } from "react-native";
 
export function ExploreScreen() {
  return (
    <View style={{ flex: 1, padding: 16 }}>
      <Text accessibilityRole="header">Explore</Text>
      <Text>Bem-vindo - primeira semana</Text>
    </View>
  );
}

git checkout -b onboarding/jane-explore-subtitle
npm run lint && npm run typecheck && npm test
git push -u origin HEAD
# Abrir PR - esperar que os checks do PR fiquem verdes em <10 min

Entregável: Um PR mesclado com CI aprovado. Leia um comentário de revisão de um colega em voz alta durante o pareamento.

Dia 3 - Rastreamento de fatia de recurso

Com seu colega, desenhe este caminho em um quadro branco para um recurso existente (autenticação, carrinho, perfil):

app/orders/[id].tsx
  → features/orders/screens/OrderDetailScreen.tsx
    → features/orders/hooks/useOrder.ts
      → features/orders/api/ordersApi.ts
        → shared/api/client.ts

Exercício de grep:

rg "useOrder" --type ts
rg "ordersApi" app features

Adicione um teste unitário para um formatador puro no recurso:

// features/orders/lib/formatOrderTotal.test.ts
import { formatOrderTotal } from "./formatOrderTotal";
 
it("formats USD total", () => {
  expect(formatOrderTotal(1299, "USD")).toBe("$12.99");
});

Entregável: Foto do diagrama + um novo arquivo de teste no PR ou branch do trabalho final.

Relacionado: Estrutura de Pastas para Recursos - escalando além do layout inicial

Dia 4 - UI e navegação do trabalho final

Adicione o fluxo de Dicas - rota, tela, link.

// app/tips.tsx
import { TipsScreen } from "@/features/tips/screens/TipsScreen";
 
export default TipsScreen;

// features/tips/screens/TipsScreen.tsx
import { Stack } from "expo-router";
import { ScrollView, Text } from "react-native";
 
export function TipsScreen() {
  return (
    <>
      <Stack.Screen options={{ title: "Tips" }} />
      <ScrollView contentContainerStyle={{ padding: 16 }}>
        <Text>Envie pequenos PRs. Execute expo-doctor com frequência.</Text>
      </ScrollView>
    </>
  );
}

// features/explore/screens/ExploreScreen.tsx (excerto)
import { Link } from "expo-router";
import { Pressable, Text } from "react-native";
 
<Link href="/tips" asChild>
  <Pressable accessibilityRole="link">
    <Text>Ver dicas de onboarding →</Text>
  </Pressable>
</Link>

Teste de componente:

// features/explore/screens/ExploreScreen.test.tsx
import { render, screen } from "@testing-library/react-native";
import { ExploreScreen } from "./ExploreScreen";
 
it("shows link to tips", () => {
  render(<ExploreScreen />);
  expect(screen.getByRole("link", { name: /tips/i })).toBeTruthy();
});

Entregável: Navegação funciona no simulador; teste passa localmente e em CI.

Relacionado: Noções Básicas do Expo Router - Link e href

Dia 5 - Prévia EAS no dispositivo

Dispare um build de prévia e instale em um dispositivo Android físico (ou iOS se o UDID estiver registrado).

eas login
eas build --profile preview --platform android --non-interactive
# Abra a URL do painel EAS - escaneie o QR no dispositivo

// eas.json - confirme se o perfil de prévia existe
{
  "build": {
    "preview": {
      "distribution": "internal",
      "channel": "preview",
      "android": { "buildType": "apk" }
    }
  }
}

No PR, adicione o rótulo needs-preview se sua equipe automatizar builds - Builds de Prévia em PRs.

Checklist do PR do trabalho final:

Nova rota app/tips.tsx + tela de recurso
Link de Explorar
Teste unitário ou de componente
Captura de tela de um dispositivo físico na descrição do PR
npm run lint && npm run typecheck && npm test verde

Entregável: PR do trabalho final mesclado + prova do build de prévia em hardware.

Aprofundamento

O que adiar para depois da primeira semana

Tópico	Por que adiar	Quando
Upgrade do SDK	Alto raio de impacto	Segundo mês com colega
Módulos nativos / plugins de configuração	Necessita de familiaridade com o cliente de desenvolvimento	Quando receber um ticket
Envio para loja	Credenciais + política	Após o primeiro build de prévia
Filtros Turbo do Monorepo	Complexidade da CI	Ao mexer em pacotes compartilhados
Criação de E2E Maestro	Trabalho final usa RNTL	Segunda ou terceira semana

Agenda da sessão em dupla (90 minutos)

1. 10m - Puxar main, expo-doctor, demonstrar atalhos do Metro
2. 20m - Percorrer app/_layout.tsx e uma pilha de abas
3. 20m - Abrir Sentry / analytics (somente leitura), se aplicável
4. 20m - Parear no bug de navegação do trabalho final, se houver
5. 20m - Revisar o template de descrição do PR e o rótulo de prévia

Retrospectiva escrita (privada para o líder)

## Retrospectiva da primeira semana - <nome>
- Documento mais claro:
- Pasta mais confusa:
- Ferramenta que me surpreendeu:
- Um PR de documentação que enviarei:

Use as respostas de "pasta mais confusa" para atualizar o Checklist do Tour do Código.

Métricas de sucesso para líderes

Sinal	Primeira semana saudável	Investigar
PRs mesclados	≥2 (pequeno + trabalho final)	Zero merges - bloqueador
Falhas de CI	Auto-corrigidas após a primeira	Mesmo erro de lint no dia 4
Build de dispositivo	Prévia instalada	Apenas simulador na sexta-feira
Perguntas	Específicas, com tempo	Silencioso até o dia 10

FAQs

E se a CI falhar no segundo dia?

Corrija a CI antes do trabalho de recurso - peça ao colega para parear em npx expo customize tsconfig.json ou variáveis de ambiente ausentes. Não pule os portões.

O trabalho final é muito grande para juniores?

Reduza o requisito de teste para um teste de função pura; mantenha a navegação + build de prévia. Mescle PRs divididos: UI primeiro, link depois.

Não há dispositivo físico disponível?

Use o emulador Android com imagem Play ou o perfil de build do simulador iOS. Ainda assim, execute eas build uma vez para aprender o painel.

Clone de Monorepo - caminho diferente?

Relacionados

Noções Básicas de Onboarding - configuração da máquina no primeiro dia
Noções Básicas do Expo Router - rotas e layouts
Noções Básicas do EAS Build - perfis e primeiro build
Noções Básicas de Configuração de Projeto - scaffold do SDK 57
Checklist do Tour do Código - percurso estruturado do repositório
Normas de Pareamento e Mob em Mobile - sessões em dupla

Versões da Stack: Esta página foi escrita para React 19.2.3, React Native 0.86.0 e Expo SDK 57 (expo ~57.0.4).

Caminho de Aprendizado da Primeira Semana

Buscar na documentação

Caminho de Aprendizado da Primeira Semana