Curso Básico 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 solo nativos 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. Garantiza que cada estudiante tenga un entorno verificado y ejecutable antes de escribir código.

Lección 3 • Prerrequisitos de JavaScript esencial y ES6

Revisa la sintaxis de JavaScript y las características de ES6 esenciales para React Native. Cubre cualquier brecha de conocimiento antes de que los estudiantes se encuentren con patrones basados en componentes.

Lección 1 • Manejo del estado con useState

Cubre el hook useState para manejar el estado local del componente. Los estudiantes construyen elementos de interfaz de usuario 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 a mostrar condicionalmente elementos de la interfaz de usuario. 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 interfaces de usuario de React Native. Enseña el paso de props, la tipificación y los valores predeterminados para un diseño reutilizable.

Lección 1 • Componentes TextInput y 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 • API 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 de presión

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 aplicaciones.

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 el uso de la API Dimensions y el dimensionamiento basado en porcentajes para diseños responsivos. Los estudiantes construyen interfaces de usuario que se adaptan a teléfonos, tabletas y cambios de orientación.

Lección 2 • Fundamentos del diseño Flexbox

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

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 consistente. Los estudiantes establecen un patrón de tokens de diseño reutilizable en toda la aplicación.

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 foco.

Lección 2 • Navegador de pila 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 aplicación. 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 enlaces profundos basados en URL y construye patrones de rutas protegidas para autenticación. Los estudiantes implementan navegación controlada por inicio de sesión que persiste al reiniciar la aplicación.

Lección 1 • API Context para el estado global

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

Lección 2 • Persistencia del estado con AsyncStorage

Integra AsyncStorage para persistir los datos del usuario en las sesiones de la aplicación. Los estudiantes combinan la persistencia con Redux o Context para restaurar el estado al iniciar la aplicación.

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 característica 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 una solución de estado global se vuelve necesaria.

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 problemas, sin interrumpir la posición de desplazamiento del usuario.

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

Diseña estados de interfaz de usuario para indicadores 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 de HTTP

Utiliza la API Fetch integrada para realizar 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 almacenados en caché cuando no hay conexión. Los estudiantes implementan una cola para solicitudes fallidas que se reintentan 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 compilación 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 • Compilación y envío a las tiendas de aplicaciones

Configura compilaciones de lanzamiento, certificados de firma y metadatos de la tienda de aplicaciones 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 la API Animated y Reanimated

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