Curso de Fundamentos de React Native

Lección 1 • Qué es React Native

Define React Native, su relación con React y su modelo multiplataforma. Establece el contexto de por qué se usa en lugar de enfoques nativos puros o solo web.

Lección 2 • Configuración del entorno de desarrollo

Guía la instalación de todas las herramientas necesarias para el desarrollo en iOS y Android. Asegura que cada estudiante tenga un entorno verificado y funcional antes de escribir código.

Lección 3 • Prerrequisitos de JavaScript básico y ES6

Repasa la sintaxis de JavaScript y las características de ES6 esenciales para React Native. Cubre las brechas de conocimiento antes de que los estudiantes se enfrenten a patrones basados en componentes.

Lección 1 • Gestión de estado con useState

Cubre el hook useState para gestionar el estado local del componente. Los estudiantes construyen elementos de UI interactivos que responden a la entrada del usuario y se vuelven a renderizar correctamente.

Lección 2 • Listas y renderizado condicional

Enseña a renderizar listas dinámicas y mostrar elementos de UI condicionalmente. Estos patrones aparecen en casi todas las pantallas reales de React Native.

Lección 3 • Comprensión de la sintaxis JSX

Explica cómo JSX se compila a JavaScript y en qué se diferencia de HTML. Conecta las reglas de JSX directamente con los componentes que los estudiantes construirán en React Native.

Lección 4 • Componentes funcionales y props

Presenta los componentes funcionales como el bloque de construcción principal de las UI de React Native. Enseña el paso de props, tipado y valores por defecto para un diseño reutilizable.

Lección 1 • TextInput y componentes de formulario

Enseña a capturar la entrada del usuario a través de TextInput y patrones de formulario relacionados. Los estudiantes construyen formularios controlados con retroalimentación de validación antes del envío.

Lección 2 • APIs y componentes específicos de la plataforma

Presenta el módulo Platform y las extensiones de archivo específicas de la plataforma para comportamientos divergentes. Los estudiantes escriben código que se adapta correctamente a las diferencias entre iOS y Android.

Lección 3 • Interacciones táctiles y presionables

Cubre todos los componentes de manejo táctil y sus diferencias de comportamiento. Los estudiantes eligen el componente correcto para cada patrón de interacción en sus apps.

Lección 4 • Componentes View, Text e Image

Presenta los tres componentes más fundamentales de React Native y sus props. Los estudiantes entienden por qué estos reemplazan a div, p e img del desarrollo web.

Lección 1 • Dimensiones y diseño responsivo

Enseña a usar la API Dimensions y el dimensionamiento basado en porcentajes para layouts responsivos. Los estudiantes construyen UI que se adaptan a teléfonos, tablets y cambios de orientación.

Lección 2 • Fundamentos de layout Flexbox

Cubre Flexbox como el motor de layout principal en React Native, señalando sus diferencias con Flexbox en web. Los estudiantes organizan componentes usando dirección, alineación y ajuste de línea.

Lección 3 • API StyleSheet y estilos en línea

Explica cómo los estilos de React Native difieren de CSS y cómo funciona StyleSheet.create. Los estudiantes adoptan las mejores prácticas para la organización y el rendimiento de los estilos.

Lección 4 • Sistemas de tipografía y color

Cubre el estilo de fuentes, fuentes personalizadas y la construcción de una paleta de colores coherente. Los estudiantes establecen un patrón de tokens de diseño reutilizable en toda la app.

Lección 1 • Hooks de navegación y control programático

Cubre los hooks useNavigation, useFocusEffect y useRoute para una lógica de navegación flexible. Los estudiantes activan la navegación desde fuera de los componentes de pantalla y responden a eventos de enfoque.

Lección 2 • Stack Navigator para flujos de pantalla

Construye flujos de pantalla lineales con el navegador de pila nativo y animaciones de transición. Los estudiantes pasan parámetros entre pantallas y gestionan la pila de retroceso.

Lección 3 • Navegadores de pestañas y cajón

Agrega navegadores de pestañas inferiores y cajón lateral para las secciones principales de la app. Los estudiantes anidan navegadores para crear estructuras de navegación complejas del mundo real.

Lección 4 • Enlaces profundos y flujos de autenticación

Configura los enlaces profundos basados en URL y construye patrones de rutas protegidas para autenticación. Los estudiantes implementan una navegación protegida por inicio de sesión que persiste al reiniciar la app.

Lección 1 • Context API para estado global

Construye un patrón de proveedor y consumidor de Context para el estado de toda la app sin librerías de terceros. Los estudiantes implementan contextos de tema y autenticación como ejemplos prácticos.

Lección 2 • Persistencia del estado con AsyncStorage

Integra AsyncStorage para persistir datos del usuario entre sesiones de la app. Los estudiantes combinan la persistencia con Redux o Context para restaurar el estado al iniciar la app.

Lección 3 • Fundamentos de Redux Toolkit

Presenta el modelo de slice, store y dispatch de Redux Toolkit para un estado predecible. Los estudiantes migran una función basada en Context a Redux para comparar los dos enfoques.

Lección 4 • Elevación del estado y perforación de props

Explica cuándo se debe elevar el estado local y los problemas que crea la perforación de props. Los estudiantes reconocen el umbral en el que se vuelve necesaria una solución de estado global.

Lección 1 • Paginación y desplazamiento infinito

Implementa paginación basada en cursor y en página con onEndReached de FlatList. Los estudiantes cargan datos adicionales sin interrumpir la posición de desplazamiento del usuario.

Lección 2 • Estados de carga, error y vacío

Diseña estados de UI para spinners de carga, mensajes de error y escenarios de datos vacíos. Los estudiantes construyen un componente contenedor de obtención de datos reutilizable que se usa en todas las pantallas.

Lección 3 • API Fetch y fundamentos HTTP

Usa la API Fetch integrada para hacer solicitudes GET y POST y analizar respuestas JSON. Los estudiantes manejan códigos de estado y errores de red en un patrón consistente.

Lección 4 • Soporte sin conexión y detección de red

Detecta cambios en la conectividad de red y sirve datos en caché cuando no hay conexión. Los estudiantes implementan una cola para solicitudes fallidas que reintenta cuando se restablece la conectividad.

Lección 1 • Pruebas de extremo a extremo con Detox

Automatiza flujos completos de usuario en simuladores reales usando Detox. Los estudiantes escriben pruebas E2E que validan rutas críticas antes de cada build de lanzamiento.

Lección 2 • Pruebas unitarias y de integración

Escribe pruebas unitarias con Jest y pruebas de componentes con React Native Testing Library. Los estudiantes prueban interacciones de usuario, cambios de estado asíncronos y flujos de navegación.

Lección 3 • Construcción y envío a las tiendas de apps

Configura builds de lanzamiento, certificados de firma y metadatos de la tienda de apps para ambas plataformas. Los estudiantes producen archivos APK/AAB e IPA firmados listos para la revisión de la tienda.

Lección 4 • Animaciones con Animated API y Reanimated

Construye animaciones fluidas usando la Animated API e introduce React Native Reanimated para gestos complejos. Los estudiantes animan opacidad, posición y escala en el hilo de la UI.