Curso de React Native para apps Android e iOS

Lección 1 • Generación de tu primer proyecto

Utiliza React Native CLI y Expo CLI para generar plantillas de proyecto y compara sus ventajas y desventajas. Los estudiantes ejecutan una aplicación Hola Mundo en simuladores de Android e iOS.

Lección 2 • Comprender la arquitectura de React Native

Cubre el puente de JavaScript, los módulos nativos y el nuevo renderizador Fabric. Proporciona el modelo mental necesario para depurar y optimizar a lo largo del curso.

Lección 3 • Depuración y herramientas para desarrolladores

Presenta Flipper, React DevTools y el menú de desarrollador integrado en la aplicación para inspeccionar el estado y las llamadas de red. Las habilidades de depuración establecidas aquí se aplican a todos los capítulos siguientes.

Lección 1 • Componentes funcionales y JSX

Revisa la sintaxis JSX, la composición de componentes y el paso de props en un contexto de React Native. Establece la mentalidad orientada a componentes necesaria para todo el trabajo de interfaz de usuario futuro.

Lección 2 • Gestión del estado con Hooks

Cubre useState, useReducer y useRef para gestionar el estado local del componente y los efectos secundarios. Estos hooks impulsan las funciones interactivas construidas a lo largo del curso.

Lección 3 • API de Contexto para estado compartido

Implementa React Context con useContext para compartir el estado del tema y la autenticación entre componentes. Proporciona una solución ligera de estado global antes de introducir Redux.

Lección 4 • Efectos secundarios y ciclo de vida con useEffect

Explica el array de dependencias de useEffect, las funciones de limpieza y las trampas comunes como los cierres obsoletos. El uso correcto de efectos es fundamental para la obtención de datos cubierta en capítulos posteriores.

Lección 1 • Sistema de diseño Flexbox

Explica flexDirection, justifyContent, alignItems y el dimensionamiento flex según se aplican en React Native. El dominio aquí permite diseños coherentes multiplataforma en todo el trabajo del proyecto.

Lección 2 • Técnicas de diseño responsivo

Utiliza la API Dimensions, el hook useWindowDimensions y el dimensionamiento basado en porcentajes para diseños adaptables. Asegura que las interfaces de usuario se vean correctas en teléfonos y tabletas de distintos tamaños de pantalla.

Lección 3 • API StyleSheet y tematización

Enseña StyleSheet.create, estilos en línea y composición dinámica de estilos. Los estudiantes construyen un objeto de tema reutilizable usado a lo largo del proyecto del curso.

Lección 1 • Navegación por pestañas y cajón

Implementa navegadores de pestañas inferiores y cajón lateral con iconos y soporte para insignias. Estos patrones proporcionan la estructura de nivel superior de la aplicación utilizada en el proyecto del curso.

Lección 2 • Enlaces profundos y manejo de URL

Configura esquemas de URL y enlaces universales para abrir pantallas específicas desde fuentes externas. Los enlaces profundos son necesarios para la navegación de notificaciones push cubierta más adelante.

Lección 3 • Configuración y conceptos de React Navigation

Instala las dependencias de React Navigation y explica la jerarquía del navegador, la pantalla y la ruta. Esta base es necesaria antes de poder implementar cualquier patrón de navegación.

Lección 4 • Patrones de flujo de autenticación

Implementa pilas de navegación condicionales que alternan entre pantallas de autenticación y de la aplicación principal según el estado del token. Este patrón se reutiliza en el proyecto completo del curso.

Lección 1 • Obtención de datos con la API Fetch

Utiliza la API Fetch y Axios para realizar solicitudes GET, POST, PUT y DELETE con un manejo de errores adecuado. Las llamadas de red alimentan el contenido dinámico del proyecto del curso.

Lección 2 • SQLite y datos locales estructurados

Integra una biblioteca SQLite para crear tablas, ejecutar consultas y gestionar datos relacionales en el dispositivo. El almacenamiento estructurado es necesario para la funcionalidad offline-first del proyecto.

Lección 3 • Estrategias de almacenamiento en caché y modo offline

Implementa el almacenamiento en caché stale-while-revalidate y la detección del estado de la red para la experiencia de usuario offline. Estas estrategias aseguran que la aplicación siga siendo utilizable sin conexión de red.

Lección 4 • Patrones de Async/Await y Promise

Aplica la sintaxis async/await, Promise.all y patrones de cancelación para gestionar solicitudes concurrentes. Un código asíncrono limpio previene condiciones de carrera en pantallas con gran volumen de datos.

Lección 1 • Integración de geolocalización y mapas

Recupera la ubicación del dispositivo con la API de geolocalización y renderiza mapas usando react-native-maps. Las funciones de ubicación alimentan la pantalla de mapa en el proyecto del curso.

Lección 2 • Acceso a la cámara y la biblioteca multimedia

Integra react-native-vision-camera y la API de la biblioteca multimedia para la captura y selección de fotos. Las funciones de cámara se utilizan en las pantallas de perfil y carga de contenido del proyecto.

Lección 3 • Configuración de notificaciones push

Configura Firebase Cloud Messaging para Android y APNs para iOS para entregar notificaciones push. El manejo de notificaciones se conecta con los patrones de enlaces profundos del Capítulo 4.

Lección 4 • Sensores, biometría y respuesta háptica

Accede a las APIs del acelerómetro, la autenticación biométrica y la respuesta háptica para una experiencia de usuario mejorada. Estas funciones diferencian las aplicaciones móviles nativas de las alternativas basadas en web.

Lección 1 • React Query para el estado del servidor

Utiliza los hooks useQuery y useMutation de React Query para separar el estado del servidor del estado de la interfaz de usuario. Este enfoque simplifica la sincronización de datos en comparación con los thunks manuales de Redux.

Lección 2 • Thunks asíncronos y RTK Query

Maneja la obtención de datos asíncrona con createAsyncThunk y la capa de obtención de datos de RTK Query. RTK Query reemplaza la lógica de fetch manual y el almacenamiento en caché del Capítulo 5.

Lección 3 • Zustand para estado global ligero

Implementa stores de Zustand para el estado de la interfaz de usuario que no pertenece a las bibliotecas de estado del servidor. La API minimalista de Zustand complementa a React Query en una arquitectura de estado moderna.

Lección 4 • Fundamentos de Redux Toolkit

Crea slices, reducers y acciones con las APIs createSlice y configureStore de Redux Toolkit. RTK elimina el código repetitivo y es el enfoque estándar de la industria para Redux.

Lección 1 • Perfilado y optimización del rendimiento

Utiliza el motor Hermes, el panel de rendimiento de Flipper y el rastreo de re-renderizados para identificar cuellos de botella. Las técnicas de optimización aquí se aplican a todas las pantallas construidas en el proyecto del curso.

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

Escribe pruebas de componentes con Jest y React Native Testing Library, y pruebas de integración para flujos de navegación. Una base de código probada reduce el riesgo de regresión durante la fase de despliegue.

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

Automatiza flujos completos de usuario en simuladores reales usando Detox para una cobertura E2E fiable. Las pruebas E2E detectan problemas de integración que las pruebas unitarias no pueden detectar.

Lección 4 • Animaciones con la API Animated y Reanimated

Construye animaciones de interfaz de usuario fluidas utilizando la API Animated y React Native Reanimated 3 en el hilo de interfaz de usuario. Las animaciones fluidas son un diferenciador clave de las aplicaciones móviles de alta calidad.