Curso de React Native y Hooks

Lección 1 • JSX y el DOM Virtual

Explica la compilación de JSX, la reconciliación de props key y cómo el algoritmo de diferencias de React minimiza las actualizaciones nativas. Conecta el comportamiento del DOM virtual con el rendimiento.

Lección 2 • Inmersión Profunda en Componentes Funcionales

Contrasta los componentes de clase con los componentes funcionales y explica por qué los hooks requieren componentes funcionales. Establece el modelo mental para funciones de UI sin estado.

Lección 3 • Repaso de Sintaxis de JavaScript Moderno

Cubre la desestructuración, spread/rest, funciones flecha y async/await tal como se usan en los proyectos de React Native. Reduce la confusión de sintaxis en ejemplos posteriores de hooks.

Lección 1 • Qué Es React Native

Explica la arquitectura del bridge, el hilo de JavaScript y el sistema de módulos nativos. Posiciona React Native en relación con React para web y el desarrollo nativo.

Lección 2 • Creando Tu Primer Proyecto

Utiliza la CLI de React Native para generar la estructura de un proyecto y explica la estructura de archivos generada. Conecta la organización de carpetas con el pipeline de construcción.

Lección 3 • Componentes Integrados Principales

Presenta View, Text, Image, ScrollView y TextInput como los bloques de construcción primitivos de UI. Demuestra cómo cada uno se asigna a un widget nativo.

Lección 4 • Configurando el Entorno de Desarrollo

Instala Node, Watchman, Xcode y Android Studio con las versiones correctas del SDK. Valida la cadena de herramientas ejecutando un proyecto en blanco en ambas plataformas.

Lección 1 • Manejando el Estado con useState

Presenta la firma de useState, la inicialización del estado y patrones de funciones actualizadoras. Cubre errores comunes como cierres obsoletos y actualizaciones por lotes.

Lección 2 • Construyendo una App de Contador y Temporizador

Aplica useState y useEffect juntos en un contador y temporizador de cuenta regresiva prácticos. Refuerza las actualizaciones de estado, intervalos y limpieza en un componente real.

Lección 3 • Efectos Secundarios con useEffect

Explica el arreglo de dependencias, las funciones de limpieza y el momento de ejecución relativo al renderizado. Reemplaza los tres métodos del ciclo de vida de clase con un solo hook.

Lección 4 • Obteniendo Datos Remotos con Hooks

Construye un patrón de obtención de datos usando useState para los estados de datos/carga/error y useEffect para la llamada de fetch. Introduce los estados de UI de carga y error.

Lección 1 • Hooks de Rendimiento: useMemo y useCallback

Memoriza cálculos costosos con useMemo y estabiliza referencias de funciones con useCallback para prevenir re-renderizados innecesarios de componentes hijos.

Lección 2 • APIs Imperativas con useImperativeHandle

Expone una API imperativa controlada desde un componente hijo a una referencia del padre usando useImperativeHandle y forwardRef. Útil para componentes de entrada personalizados.

Lección 3 • Haciendo Referencia a Valores con useRef

Utiliza useRef para persistir valores mutables a través de renderizados sin provocar re-renderizados y para acceder a instancias de componentes nativos. Lo contrasta con useState para datos no visuales.

Lección 4 • Estado Complejo con useReducer

Implementa una función reductora y un patrón de dispatch para máquinas de estado de múltiples acciones. Compara useReducer con useState para escenarios de formularios y carritos de compra.

Lección 1 • useForm: Hook de Manejo de Estado de Formularios

Construye un hook useForm que maneja valores de campos, errores de validación y estado de envío. Reemplaza la lógica repetitiva de formularios en múltiples pantallas.

Lección 2 • Probando Hooks Personalizados

Utiliza React Native Testing Library y renderHook para hacer pruebas unitarias de hooks personalizados de forma aislada. Cubre act, act asíncrono y simulación de dependencias externas.

Lección 3 • useFetch: Hook de Obtención de Datos

Extrae el patrón de fetch-carga-error en un hook useFetch reutilizable con URL y opciones configurables. Demuestra cómo los hooks personalizados reducen el código repetitivo de los componentes.

Lección 4 • useLocalStorage y useAsyncStorage

Envuelve AsyncStorage en un hook que refleja la API de useState para datos persistentes clave-valor. Maneja la serialización, deserialización y casos de error.

Lección 1 • Patrones del Navegador de Pila

Crea un navegador de pila nativo con transiciones push, pop y replace. Pasa parámetros entre pantallas y los lee con useRoute.

Lección 2 • Navegadores de Pestañas y Drawer

Agrega navegadores de pestañas inferiores y drawer y los anida dentro de la pila. Personaliza los iconos de pestañas y el contenido del drawer con estado manejado por hooks.

Lección 3 • Flujo de Autenticación con Navegación

Implementa un navegador condicional que alterna entre las pilas de autenticación y app según el estado del token almacenado en el contexto. Demuestra enrutamiento protegido en un escenario real.

Lección 4 • Hooks de Navegación en Profundidad

Utiliza useNavigation, useRoute, useFocusEffect y useIsFocused para controlar el comportamiento de navegación desde los componentes. Reemplaza la perforación de props de objetos de navegación.

Lección 1 • Estado del Servidor con React Query

Utiliza los hooks useQuery y useMutation de React Query para manejar el estado del servidor, el almacenamiento en caché y la reobtención en segundo plano. Elimina el manejo manual del estado de carga/error.

Lección 2 • Integración de Redux Toolkit

Configura un store de Redux con createSlice, RTK Query para la obtención de datos y el envoltorio Provider. Conecta componentes usando useSelector y useDispatch.

Lección 3 • Patrones de la API de Contexto a Escala

Divide el contexto en proveedores de estado y dispatch para prevenir re-renderizados innecesarios en árboles grandes. Combina useReducer con contexto para un patrón similar a Redux.

Lección 4 • Estado Global con Zustand

Crea un store de Zustand con acciones y selectores, luego lo consume con una sola llamada al hook. Compara la API minimalista de Zustand con el código repetitivo del Contexto.

Lección 1 • Perfilando y Diagnosticando el Rendimiento

Utiliza Flipper, el perfilador de React DevTools y el Monitor de Rendimiento para identificar renders lentos y trabas en el hilo de JS. Establece un flujo de trabajo de optimización basado en medir primero.

Lección 2 • Optimizando Listas e Imágenes

Aplica props de optimización de FlatList, almacenamiento en caché de imágenes y carga diferida para eliminar el lag de desplazamiento. Cubre windowSize, initialNumToRender y getItemLayout.

Lección 3 • Probando Componentes y Hooks

Escribe pruebas unitarias y de integración con Jest y React Native Testing Library, cubriendo interacciones del usuario y comportamiento asíncrono. Logra una cobertura significativa sin probar detalles de implementación.

Lección 4 • Animación con Animated y Reanimated

Construye animaciones fluidas usando la API Animated y migra a Reanimated 2 para animaciones en el hilo de UI. Cubre movimiento con spring, timing y basado en gestos.