DevTalles

Introducción a la sección

Temas puntuales de la sección

Continuación de la sección - Control Props

Problema y necesidad del control de propiedades

Estado del carrito de compras

Disparar función personalizada al cambiar estado

Emitir argumentos en nuestro evento

Crear carrito de compras

Mostrar items del carrito de compras

Mantener sincronizado los valores

Sincronizar desde el carrito a las tarjetas principales

Control Props

Controlando el estado desde el padre

useShoppingCart

Respaldo de nuestra rama

Código fuente de la sección

Introducción a la sección

Temas puntuales de la sección

Continuación de la sección

Implementar la propiedad initialValues

Mostrar el valor inicial en el componente

Utilizar el MaxCount como limitante

Función como hijo de un HOC

Tarea: isMaxCountReaced

Exponer funciones y propiedades fuera del componente

Trabajar con toda la información expuesta como argumento

Código fuente de la sección

Introducción a la sección

Temas puntuales

Preparaciones iniciales

Nuevo proyecto - Librería de NPM

Código fuente del paquete

Configurar Rollup

Configurar Vitest

NPM - Carga y versionamiento semántico

Utilizar paquete de npm

Pruebas locales del paquete

Código fuente

Introducción a la sección

Temas puntuales de la sección

Inicio de proyecto - Forms

Formulario tradicional

Formulario tradicional - con useState

Actualizar los inputs y tomar el valor del formulario

CustomHook - useForm

Expandir funcionalidad de nuestro custom hook

Formik - Ejercicio básico

Formik - Obtener información del formulario

Formik - Validaciones manuales

Formik - Mostrar errores en los campos

Yup - ValidationSchema Builder

Formik - getFieldProps

Formik - Selects y Checks

Formik - Abstraction - useField

Formik - Custom Select

Formik - Custom Checkbox

Pequeñas optimizaciones

Código fuente de la sección

Introducción a la sección

Temas puntuales de la sección

Continuación del ejercicio

Tarea - Formulario de registro con Formik

Formularios dinámicos

Creando el initialValues de forma dinámica

Selects de manera dinámica

Validaciones dinámicas

Validaciones dinámicas adicionales

Código fuente de la sección

Introducción a la sección

Temas puntuales de la sección

Inicio de proyecto - MyStoryBook

Instalar y configurar Storybook

Añadir props y controles a nuestra historia y componente

Documentar automáticamente las descripciones

Tarea: Propiedades y controles adicionales

Resolución de la tarea

Desplegar Storybook a servidores

Github y GitHub Pages

Bonus: Chromatic

Bonus: Chromatic - Atrapar cambios en el UI

Código fuente de la sección

Introducción a la sección

Temas puntuales de la sección

Continuación del proyecto

Configuraciones en el package.json

Configuraciones en el tsconfig.json

Eliminar manualmente la carpeta de distribución

Copiar recursos estáticos

npm publish

Información adicional del paquete

Probar importación del paquete

NP - A better npm publish

Crear nueva versión de nuestro paquete

Npm Check Updates

Código fuente de la sección

Introducción a la sección

Temas puntuales de la sección

Preparación de la sección

¿Cómo funciona la aplicación actual?

Introducción a las PWAs y Service Workers

Introducción a la sección

Temas puntuales de la sección

Levantar los procesos de backend y frontend

Service Worker para una aplicación existente - npx

¿Qué está sucediendo con la configuración por defecto?

Manual - Descarga e instalación SW

Manual - Grabar en caché

Manual - Fetch dentro del service worker

Manual - Network first with cache fallback

Manual - Network first with cache fallback - Parte 2

Código fuente de la sección

Introducción a la sección

Temas puntuales de la sección

Continuación de la aplicación

Workbox CLI - Wizard

Workbox SW Manual

Workbox Cache Strategies

Verificación de Token offline

Background Sync - Posteos sin conexión

Tarea - Put y Delete

Optimizar nuestro service worker

Mostrar mensaje de Online y Offline

Código fuente de la sección

Temas puntuales de la sección

Demostración del objetivo al final

Inicio de Proyecto - MapasApp

Crear el contexto de lugares

PlacesReducer - Estado de nuestro contexto

Obtener la geolocalización del usuario

Mostrar la geolocalización del usuario en pantalla

Mostrar mapa de Mapbox

Crear el contexto para el mapa

Establecer el mapa en el contexto

Marcadores, Popups y botón de ubicación

Mostrar logo de React

SearchBar y Debounce manual

Buscar lugares basados en el query de búsqueda

Colocar el tipo de dato y almacenarlo en en el state

Mostrar los lugares encontrados

Colocar marcadores en cada lugar encontrado

Volar y activar el lugar seleccionado

DirectionsApi - Direcciones entre dos puntos

Probar el API desde React

Mostrar la polyline en el mapa

Desplegar aplicación

Código fuente de la sección

Más información sobre nuestros otros cursos

Despedida