Curso Avanzado de React Native

Lección 1 • Panorama General de la Arquitectura de React Native

Cubre el puente, JSI y el pipeline de renderizado de Fabric. Conecta el conocimiento arquitectónico con las decisiones de rendimiento que se toman a lo largo del curso.

Lección 2 • Estructura del Proyecto y Convenciones de Archivos

Define estructuras de carpetas escalables y convenciones de nomenclatura para aplicaciones grandes. Una estructura consistente reduce la fricción de incorporación y da soporte al crecimiento modular.

Lección 3 • Configuración del Entorno de Desarrollo

Configura Xcode, Android Studio y herramientas de CLI para builds multiplataforma. Una configuración adecuada previene errores relacionados con el entorno en capítulos posteriores.

Lección 1 • Zustand y Stores de Estado Ligeros

Introduce Zustand como una alternativa minimalista para estado global acotado. Los estudiantes eligen la herramienta correcta según la complejidad de la aplicación y el tamaño del equipo.

Lección 2 • Context API y Riesgos de Rendimiento

Enseña Context para compartir estado entre componentes evitando re-renderizados innecesarios. Se conecta directamente con las decisiones de estado global en aplicaciones más grandes.

Lección 3 • Integración de Redux Toolkit

Implementa slices, thunks y selectores de Redux Toolkit en una app React Native. Proporciona un patrón de estado global listo para producción en entornos de equipo.

Lección 4 • Inmersión Profunda en React Hooks

Explora a fondo useState, useReducer, useRef y hooks personalizados. Un conocimiento sólido de hooks es el prerrequisito para todos los patrones de gestión de estado futuros.

Lección 1 • Deep Linking y Universal Links

Configura esquemas de URL y universal links para abrir pantallas específicas desde fuentes externas. Crítico para campañas de marketing y flujos de notificaciones push.

Lección 2 • Flujos de Autenticación y Rutas Protegidas

Implementa navegación condicional basada en estado de autenticación mediante cambio de navegador. Conecta el conocimiento de gestión de estado a patrones reales de control de acceso.

Lección 3 • Patrones de Navegación por Tabs y Drawer

Construye navegadores de tabs inferiores y drawer lateral con UI personalizada y soporte de insignias. Permite shells de app complejas usadas en aplicaciones móviles en producción.

Lección 4 • Navegación con Tipos Seguros con TypeScript

Define listas tipadas de parámetros de ruta y aplica contratos de navegación en tiempo de compilación. Previene errores de enrutamiento en tiempo de ejecución en bases de código grandes.

Lección 1 • React Native Reanimated 3

Implementa animaciones basadas en worklets que se ejecutan completamente en el hilo de UI. Logra un rendimiento sin interrupciones para interacciones complejas basadas en gestos.

Lección 2 • Animaciones con Lottie y SVG

Integra animaciones JSON de Lottie y react-native-svg para gráficos vectoriales. Amplía el conjunto de herramientas de animación más allá del movimiento basado en código.

Lección 3 • Integración de Gesture Handler

Combina React Native Gesture Handler con Reanimated para gestos de deslizar, pellizcar y desplazar. Permite interacciones con sensación nativa que coinciden con las convenciones de la plataforma.

Lección 4 • Técnicas Avanzadas de StyleSheet

Cubre temas dinámicos, unidades responsivas y sobrescrituras de estilo específicas de plataforma. Establece la base de estilos para el trabajo de animación y gestos que se realizará más adelante.

Lección 1 • Entendiendo el Sistema de Módulos Nativos

Explica el sistema de módulo puente heredado y sus limitaciones antes de JSI. Proporciona contexto sobre por qué se introdujeron los TurboModules y cuándo aplica cada enfoque.

Lección 2 • TurboModules e Integración JSI

Implementa un TurboModule usando la capa JSI en C++ de la nueva arquitectura para llamadas síncronas. Ofrece ganancias de rendimiento medibles sobre los módulos basados en puente.

Lección 3 • Escritura de Módulos Nativos de Android en Kotlin

Construye un ReactContextBaseJavaModule en Kotlin y lo registra en un paquete. Refleja el capítulo de módulo iOS para asegurar la paridad de funcionalidades multiplataforma.

Lección 4 • Componentes de UI Nativos y Fabric

Crea componentes de vista nativa personalizados renderizados a través del renderizador Fabric. Permite incrustar widgets de UI nativos de plataforma no disponibles como componentes JavaScript.

Lección 1 • Optimización del Bundle de JavaScript

Reduce el tamaño del bundle mediante división de código, tree shaking y compilación de bytecode de Hermes. Bundles más pequeños mejoran el tiempo de inicio en todos los niveles de dispositivo.

Lección 2 • Herramientas de Perfilado y Métricas

Usa Flipper, el perfilador de Hermes y React DevTools para identificar cuellos de botella de JS y renderizado. Establece una mentalidad de medición primero antes de aplicar cualquier optimización.

Lección 3 • Rendimiento de Listas con FlatList y FlashList

Optimiza el renderizado de listas grandes usando props de FlatList y la biblioteca Shopify FlashList. Aborda directamente uno de los puntos débiles de rendimiento más comunes en aplicaciones móviles.

Lección 4 • Gestión de Memoria y Prevención de Fugas

Identifica fugas de memoria por suscripciones no limpiadas, closures y asignaciones nativas. Previene fallos de la aplicación y degradación del rendimiento durante sesiones largas.

Lección 1 • Monitoreo de Errores y Reporte de Fallos

Integra componentes de límite de error y un SDK de reporte de fallos para visibilidad en producción. Cierra el ciclo de retroalimentación entre el despliegue y la resolución de incidencias.

Lección 2 • Pruebas de Componentes con RNTL

Prueba componentes renderizados usando consultas de React Native Testing Library y eventos de usuario. Valida el comportamiento de la UI sin depender de detalles de implementación.

Lección 3 • Pruebas Unitarias con Jest

Escribe pruebas unitarias para hooks, utilidades y reducers usando Jest y React Native Testing Library. Establece la capa base de pruebas para la pirámide completa de QA.

Lección 4 • Técnicas y Herramientas de Depuración

Aplica plugins de Flipper, Chrome DevTools y Reactotron para depuración en tiempo de ejecución. Una depuración eficiente reduce el tiempo medio de resolución de incidencias en producción.

Lección 1 • Actualizaciones Over-the-Air con CodePush

Despliega actualizaciones de bundles de JavaScript a dispositivos en producción sin ciclos de revisión en tienda. Permite correcciones rápidas y pruebas A/B de cambios en la UI.

Lección 2 • Firma de Código y Gestión de Certificados

Gestiona perfiles de aprovisionamiento de iOS y keystores de Android para builds firmadas de lanzamiento. La firma correcta es un prerrequisito para cada paso de envío a la tienda.

Lección 3 • Pipelines de Build Automatizados

Configura flujos de trabajo de GitHub Actions o Bitrise para construir, probar y archivar en cada push. La automatización elimina errores de compilación manual y acelera la cadencia de lanzamiento.

Lección 4 • Automatización con Fastlane para Envío a Tiendas

Usa lanes de Fastlane para automatizar cargas a TestFlight y despliegues a Play Store. Reduce el tiempo de envío de horas a minutos con scripts repetibles.