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 [ANCHOR] algoritmo de diferenciación 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 las funciones de UI sin estado.

Lección 3 • Repaso de Sintaxis Moderna de JavaScript

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

Lección 1 • Qué Es React Native

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

Lección 2 • Creando Su Primer Proyecto

Utiliza la CLI de React Native para crear la estructura inicial de un proyecto y explica la estructura de archivos generada. Conecta la disposició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 la UI. Demuestra cómo cada uno se mapea a un widget nativo.

Lección 4 • Configuración del 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 • Manejo del Estado con useState

Introduce la firma de useState, la inicialización del estado y los patrones de la función actualizadora. Cubre errores comunes como los cierres obsoletos y las actualizaciones por lotes.

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

Aplica useState y useEffect juntos en un contador y temporizador regresivo práctico. Refuerza las actualizaciones de estado, los intervalos y la limpieza en un componente real.

Lección 3 • Efectos Secundarios con useEffect

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

Lección 4 • Obtención de 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 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 las referencias a funciones con useCallback para prevenir re-renderizados innecesarios en los hijos.

Lección 2 • APIs Imperativas con useImperativeHandle

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

Lección 3 • Referenciando Valores con useRef

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

Lección 4 • Estado Complejo con useReducer

Implementa una función reductora y un patrón de despacho 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 Gestión de Estado de Formularios

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

Lección 2 • Prueba de 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 la 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 [ANCHOR] URL y opciones configurables. Demuestra cómo los hooks personalizados reducen el boilerplate de los componentes.

Lección 4 • useLocalStorage y useAsyncStorage

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

Lección 1 • Patrones de 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 Cajón

Agrega navegadores de pestañas inferiores y de cajón, y los anida dentro de la pila. Personaliza los íconos de las pestañas y el contenido del cajón con un estado controlado 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 de la aplicación según el estado del [ANCHOR] token almacenado en el contexto. Demuestra el enrutamiento protegido en el mundo 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 los objetos de navegación.

Lección 1 • Estado del Servidor con React Query

Utiliza los hooks useQuery y useMutation de React Query para gestionar el estado del servidor, el almacenamiento en caché y el re-fetch en segundo plano. Elimina la gestión 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 wrapper Provider. Conecta los componentes usando useSelector y useDispatch.

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

Divide el contexto en proveedores de estado y de despacho para prevenir re-renderizados innecesarios en árboles grandes. Combina useReducer con el 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 [ANCHOR] API mínima de Zustand con el boilerplate de Contexto.

Lección 1 • Perfilado y Diagnóstico de Rendimiento

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

Lección 2 • Optimización de Listas e Imágenes

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

Lección 3 • Prueba de Componentes y Hooks

Escribe pruebas unitarias y de integración con Jest y React Native Testing Library, cubriendo las interacciones del usuario y el 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 [ANCHOR] API Animated y actualiza a Reanimated 2 para animaciones en el hilo de UI. Cubre movimiento por resorte, temporizado y controlado por gestos.