Ruta de aprendizaje de la primera semana

Un cookbook para los primeros cinco días de un nuevo contratista - aprende Expo Router, activa EAS Build y envía una feature de extremo a extremo antes del trabajo del backlog de la segunda semana.

Recipe

Quick-reference recipe card - el camino mínimo desde clonar hasta un PR fusionado con una preview build.

# Day 1 - green path
git clone <repo> && cd <repo> && npm ci
npx expo-doctor && npm run typecheck
npx expo start
 
# Day 3 - trace + change
# app/(tabs)/explore.tsx → features/explore/screens/ExploreScreen.tsx
 
# Day 5 - preview on device
eas build --profile preview --platform android --non-interactive

Arco de la semana:
  Lun  -> Máquina + Metro + lee CONTRIBUTING.md
  Mar  -> Expo Router tour + tiny PR de UI fusionado
  Mié  -> Feature slice trace + unit test
  Jue  -> Navegación + RNTL component test
  Vie  -> Preview build en el teléfono + capstone PR

Cuándo recurrir a esto:

Incorporar a un ingeniero junior o transferencia web en una app Expo SDK 57 existente.
Estandarizar qué significa "productivo en la primera semana" entre equipos.
Reemplazar la orientación ad-hoc "lee todo el repo" con un resultado enviable.

Ejemplo de trabajo

Asume un app de equipo con tabs, una carpeta features/ y un perfil preview de eas.json. El feature capstone: añadir una fila "Tips" en Explore que navegue a /tips.

Día 1 - Máquina y modelo mental

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

Lee en orden:

CONTRIBUTING.md - branch naming, PR template, preview label rules
app/_layout.tsx - providers y root navigator
app/(tabs)/_layout.tsx - tab bar configuration
Expo Router Basics - archivo = ruta

Entregable: Publica en el hilo de onboarding: screenshot del sim ejecutándose + expo-doctor verde.

Día 2 - Tiny merged PR (Router)

Añade un subtítulo en una pantalla existente - practica rama - PR - CI sin riesgo de producto.

// app/(tabs)/explore.tsx - thin route file
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>Bienvenido - primera semana</Text>
    </View>
  );
}

git checkout -b onboarding/jane-explore-subtitle
npm run lint && npm run typecheck && npm test
git push -u origin HEAD
# Open PR - expect PR checks green in <10 min

Entregable: Un PR fusionado con CI pasando. Lee un comentario de revisión de un compañero en voz alta en pairing.

Día 3 - Feature slice trace

Con tu colega, dibuja este camino en una pizarra para un feature existente (auth, cart, profile):

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

Ejercicio Grep:

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

Añade un unit test para un formateador puro en el feature:

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

Entregable: Foto del diagrama + un nuevo archivo de test en el PR o rama capstone.

Relacionado: Folder Structure for Features - escalando pasado el starter layout

Día 4 - Capstone UI + navegación

Añade el flujo Tips - route, screen, 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>Envía PRs pequeños. Ejecuta expo-doctor a menudo.</Text>
      </ScrollView>
    </>
  );
}

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

Component test:

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

Entregable: La navegación funciona en sim; el test pasa localmente y en CI.

Relacionado: Expo Router Basics - Link y href

Día 5 - EAS preview en dispositivo

Activa una preview build e instala en un dispositivo Android físico (o iOS si UDID registrado).

eas login
eas build --profile preview --platform android --non-interactive
# Open EAS dashboard URL - scan QR on device

// eas.json - confirma que el perfil preview existe
{
  "build": {
    "preview": {
      "distribution": "internal",
      "channel": "preview",
      "android": { "buildType": "apk" }
    }
  }
}

En el PR, añade la etiqueta needs-preview si tu equipo automatiza builds - Preview Builds on PRs.

Checklist de capstone PR:

Nueva ruta app/tips.tsx + feature screen
Link desde Explore
Unit o component test
Screenshot desde dispositivo físico en la descripción del PR
npm run lint && npm run typecheck && npm test verde

Entregable: PR de capstone fusionado + prueba de preview build en hardware.

Deep Dive

Qué posponer después de la primera semana

Tema	Posponer por qué	Cuándo
SDK upgrade	Alto blast radius	Mes dos con colega
Native modules / config plugins	Necesita dev client literacy	Cuando se asigna ticket
Store submit	Credenciales + policy	Después de la primera preview build
Monorepo Turbo filters	Complejidad CI	Cuando se toca shared packages
Maestro E2E authoring	Capstone usa RNTL	Semana dos o tres

Sesión de colega agenda (90 minutos)

1. 10m - Pull main, expo-doctor, demo Metro shortcuts
2. 20m - Camina app/_layout.tsx y un stack de tab
3. 20m - Abre Sentry / analytics (lectura) si es aplicable
4. 20m - Empareja en capstone navigation bug si hay alguno
5. 20m - Revisa PR description template y preview label

Retro escrito (privado para el lead)

## Retro de la primera semana - <name>
- Doc más claro:
- Carpeta más confusa:
- Herramienta que me sorprendió:
- Un doc PR que enviaré:

Alimenta las respuestas de "carpeta confusa" en las actualizaciones de Codebase Tour Checklist.

Métricas de éxito para leads

Señal	Primera semana saludable	Investigar
PRs fusionados	≥2 (tiny + capstone)	Cero merges - blocker
CI failures	Auto-fixed después del primero	El mismo lint error día 4
Device build	Preview instalado	Solo sim el viernes
Preguntas	Específicas, temporizadas	Silencio hasta el día 10

FAQs

¿Qué pasa si CI falla el día dos?

Arregla CI antes del work de features - pide al colega que empareje en npx expo customize tsconfig.json o variables de env faltantes. No omitas gates.

¿Capstone demasiado grande para juniors?

Deja caer el requisito de test a un test de función pura; mantén navegación + preview build. Fusiona PRs divididos: UI primero, link segundo.

¿Sin dispositivo físico disponible?

Usa el emulador Android con imagen Play o el perfil de build del iOS simulator. Aún así ejecuta eas build una vez para aprender el dashboard.

¿Monorepo clone - camino diferente?

Ejecuta install desde la raíz del workspace de app documentada en README. El capstone de la primera semana se mantiene dentro de un app package - ve Monorepo with Turborepo.

Relacionado

Onboarding Basics - configuración de máquina del día uno
Expo Router Basics - routes y layouts
EAS Build Basics - perfiles y primera build
Project Setup Basics - SDK 57 scaffold
Codebase Tour Checklist - repo walkthrough estructurado
Pairing & Mob on Mobile - buddy session norms

Versiones de Stack: Esta página fue escrita para React 19.2.3, React Native 0.86.0, y Expo SDK 57 (expo ~57.0.4).

Recipe

Quick-reference recipe card - el camino mínimo desde clonar hasta un PR fusionado con una preview build.

# Day 1 - green path
git clone <repo> && cd <repo> && npm ci
npx expo-doctor && npm run typecheck
npx expo start
 
# Day 3 - trace + change
# app/(tabs)/explore.tsx → features/explore/screens/ExploreScreen.tsx
 
# Day 5 - preview on device
eas build --profile preview --platform android --non-interactive

Arco de la semana:
  Lun  -> Máquina + Metro + lee CONTRIBUTING.md
  Mar  -> Expo Router tour + tiny PR de UI fusionado
  Mié  -> Feature slice trace + unit test
  Jue  -> Navegación + RNTL component test
  Vie  -> Preview build en el teléfono + capstone PR

Cuándo recurrir a esto:

Incorporar a un ingeniero junior o transferencia web en una app Expo SDK 57 existente.
Estandarizar qué significa "productivo en la primera semana" entre equipos.
Reemplazar la orientación ad-hoc "lee todo el repo" con un resultado enviable.

Ejemplo de trabajo

Asume un app de equipo con tabs, una carpeta features/ y un perfil preview de eas.json. El feature capstone: añadir una fila "Tips" en Explore que navegue a /tips.

Día 1 - Máquina y modelo mental

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

Lee en orden:

CONTRIBUTING.md - branch naming, PR template, preview label rules
app/_layout.tsx - providers y root navigator
app/(tabs)/_layout.tsx - tab bar configuration
Expo Router Basics - archivo = ruta

Entregable: Publica en el hilo de onboarding: screenshot del sim ejecutándose + expo-doctor verde.

Día 2 - Tiny merged PR (Router)

Añade un subtítulo en una pantalla existente - practica rama - PR - CI sin riesgo de producto.

// app/(tabs)/explore.tsx - thin route file
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>Bienvenido - primera semana</Text>
    </View>
  );
}

git checkout -b onboarding/jane-explore-subtitle
npm run lint && npm run typecheck && npm test
git push -u origin HEAD
# Open PR - expect PR checks green in <10 min

Entregable: Un PR fusionado con CI pasando. Lee un comentario de revisión de un compañero en voz alta en pairing.

Día 3 - Feature slice trace

Con tu colega, dibuja este camino en una pizarra para un feature existente (auth, cart, profile):

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

Ejercicio Grep:

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

Añade un unit test para un formateador puro en el feature:

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

Entregable: Foto del diagrama + un nuevo archivo de test en el PR o rama capstone.

Relacionado: Folder Structure for Features - escalando pasado el starter layout

Día 4 - Capstone UI + navegación

Añade el flujo Tips - route, screen, 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>Envía PRs pequeños. Ejecuta expo-doctor a menudo.</Text>
      </ScrollView>
    </>
  );
}

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

Component test:

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

Entregable: La navegación funciona en sim; el test pasa localmente y en CI.

Relacionado: Expo Router Basics - Link y href

Día 5 - EAS preview en dispositivo

Activa una preview build e instala en un dispositivo Android físico (o iOS si UDID registrado).

eas login
eas build --profile preview --platform android --non-interactive
# Open EAS dashboard URL - scan QR on device

// eas.json - confirma que el perfil preview existe
{
  "build": {
    "preview": {
      "distribution": "internal",
      "channel": "preview",
      "android": { "buildType": "apk" }
    }
  }
}

En el PR, añade la etiqueta needs-preview si tu equipo automatiza builds - Preview Builds on PRs.

Checklist de capstone PR:

Nueva ruta app/tips.tsx + feature screen
Link desde Explore
Unit o component test
Screenshot desde dispositivo físico en la descripción del PR
npm run lint && npm run typecheck && npm test verde

Entregable: PR de capstone fusionado + prueba de preview build en hardware.

Deep Dive

Qué posponer después de la primera semana

Tema	Posponer por qué	Cuándo
SDK upgrade	Alto blast radius	Mes dos con colega
Native modules / config plugins	Necesita dev client literacy	Cuando se asigna ticket
Store submit	Credenciales + policy	Después de la primera preview build
Monorepo Turbo filters	Complejidad CI	Cuando se toca shared packages
Maestro E2E authoring	Capstone usa RNTL	Semana dos o tres

Sesión de colega agenda (90 minutos)

1. 10m - Pull main, expo-doctor, demo Metro shortcuts
2. 20m - Camina app/_layout.tsx y un stack de tab
3. 20m - Abre Sentry / analytics (lectura) si es aplicable
4. 20m - Empareja en capstone navigation bug si hay alguno
5. 20m - Revisa PR description template y preview label

Retro escrito (privado para el lead)

## Retro de la primera semana - <name>
- Doc más claro:
- Carpeta más confusa:
- Herramienta que me sorprendió:
- Un doc PR que enviaré:

Alimenta las respuestas de "carpeta confusa" en las actualizaciones de Codebase Tour Checklist.

Métricas de éxito para leads

Señal	Primera semana saludable	Investigar
PRs fusionados	≥2 (tiny + capstone)	Cero merges - blocker
CI failures	Auto-fixed después del primero	El mismo lint error día 4
Device build	Preview instalado	Solo sim el viernes
Preguntas	Específicas, temporizadas	Silencio hasta el día 10

FAQs

¿Qué pasa si CI falla el día dos?

Arregla CI antes del work de features - pide al colega que empareje en npx expo customize tsconfig.json o variables de env faltantes. No omitas gates.

¿Capstone demasiado grande para juniors?

Deja caer el requisito de test a un test de función pura; mantén navegación + preview build. Fusiona PRs divididos: UI primero, link segundo.

¿Sin dispositivo físico disponible?

Usa el emulador Android con imagen Play o el perfil de build del iOS simulator. Aún así ejecuta eas build una vez para aprender el dashboard.

¿Monorepo clone - camino diferente?

Ejecuta install desde la raíz del workspace de app documentada en README. El capstone de la primera semana se mantiene dentro de un app package - ve Monorepo with Turborepo.

Relacionado

Onboarding Basics - configuración de máquina del día uno
Expo Router Basics - routes y layouts
EAS Build Basics - perfiles y primera build
Project Setup Basics - SDK 57 scaffold
Codebase Tour Checklist - repo walkthrough estructurado
Pairing & Mob on Mobile - buddy session norms

Versiones de Stack: Esta página fue escrita para React 19.2.3, React Native 0.86.0, y Expo SDK 57 (expo ~57.0.4).

Ruta de aprendizaje de la primera semana

Buscar en la documentación

Ruta de aprendizaje de la primera semana