React Pro: Lleva Tus Bases Al Siguiente Nivel

Storybook, Github Actions, publicar NPM, TypeScript, patrones de componentes, PWA, Formik, formularios dinámicos y más

What you'll learn

Progresar como desarrolladores en React

TypeScript

PWAs manuales y con Workbox

Storybook

TSDX, Storybook y despliegues manuales a NPM

Github Actions

Versionamiento Semántico

Patrones de creación de componentes

Formik

Formularios dinámicos

Lazyload

Módulos

Re-utilización de componentes

Requirements

Tener las bases de React con Hooks

Saber TypeScript es útil pero no indispensable (introducción incluída)

Poder realizar instalaciones en el equipo como administrador

Description

React Pro: Lleva tus bases al siguiente nivelBienvenidos a mi curso de React Pro, el objetivo principal es simple, mejorar tus habilidades existentes de React. No es un curso para personas que quieran empezar con esta librería, ya que el curso está dirigido a personas que ya tengan conocimientos de React con Hooks.Breve Descripción del cursoEl curso empieza con una breve introducción de React con Typescript, pero dejo videos adicionales en YouTube para mayor referencia (dichos videos creados por mi también y son 5 horas adicionales no incluidas aquí), luego pasamos a la creación de un pequeño proyecto que nos servirá para practicar diferentes patrones de creación de componentes, explicaré varios muy populares y poco a poco iremos creando un juego de componentes robusto que desplegaremos a NPM mediante TSDX. En el camino pasamos por separación de módulos y lazyload, adicionalmente doy mi punto personalizado preferido para trabajar con módulos.Luego explicamos Formik, validaciones, Yup y formularios dinámicos, creando componentes re-utilizables simples que nos ayudarán a no tener que escribir lo mismo una y otra vez.Posteriormente pasamos a Storybook, explicamos qué es, para que nos puede servir, creamos un par de configuraciones y luego publicamos nuestro Storybook en varios lugares, eventualmente crearemos los archivos de configuración de TypeScript necesarios, modificaciones en el package.json y configuraciones con semantic release para realizar todo un proceso sistematizado de creación y actualización de componentes utilizando GitHub Actions como intermediario.Después nos movemos a levantar una aplicación realizada en mi curso de React de cero a experto que tiene un backend personalizado con JWTs, para transformar nuestra aplicación de React en una PWA, explicando configuraciones automáticas, manuales y personalizaciones que nos permitan trabajar sin conexión a internet nuestra aplicación de React, también instalarla como si fuera una aplicación de Windows, Linux o Mac.Temas puntuales del curso:El curso esta cargado de mucha información para mejorar nuestras habilidades de React, puntualmente estos son algunos temas de interés que tocamos en el curso:React con TypeScript en un 95% del cursoLazyload y SuspenseRutas HijasModularizaciónGit y GitHub para el manejo de ramas, versiones y accionesPatrones de creación de componentesCompound Components PatternExtensible Styles PatternControl Props PatternState Initializer PatternFunction Child PatternCustom State Initializer + Function Child patternDespliegues a NPMTSDXStorybook to NPMDespliegue manual a NPM: TypeScript + create-react-appSemantic Release automáticoFormikFormularios tradicionalesValidaciones manualesValidaciones con YupCustom Formik HooksComponentes de FormikFormik AbstractationComponentes personalizados reutilizables para FormikFormularios dinámicosValidaciones de formularios dinámicosStorybookIntroduccionesPropertiesOpcionesElementosControlesDesplieguesPublicaciones a NPMTypeScriptDocumentación automáticaBonus: ChromaticBonus: Notas en ChromaticGitHub Actions: El procedimiento a crear el siguienteConfiguración de accionesInstalación de NodeBuild de aplicacion de ReactCreación de un versionamiento semanticoGenerar ReleasePublicación automática a NpmDespliegue automático de StorybookPWA:Service WorkerManifestConfiguraciones automáticas de npx create-react-appConfiguraciones manualesEstrategias de cachéPre-cacheCache OnlyCache first with network fallbackNetwork first with cache fallbackNetwork onlyOffline modeCRUD sin conexiónCreateReadUpdateDeleteBackground SyncWorkboxConfiguración manualConfiguración con WizardConfiguración preferida por mi (manual)Background SyncIndexedDBWorkbox CDNMódulos de WorkboxReact - Detectar online y offlineNuevamente el curso tiene por objetivo pulir tus habilidades existentes de React con Hooks y llevarlas a un nivel superior para que tus aplicaciones de React sean aún mejores.Espero el curso te ayude mucho y espero verte dentro del curso!

Overview

Section 1: Introducción

Lecture 1 Introducción al curso - Visón General

Lecture 2 Bienvenida al curso

Lecture 3 ¿Cómo funcionará el curso?

Lecture 4 ¿Cómo realizar preguntas?

Lecture 5 Instalaciones recomendadas y obligatorias

Lecture 6 ¡Únete a Nuestra Comunidad de DevTalles en Discord!

Section 2: Reforzamiento sobre React

Lecture 7 Introducción a la sección

Lecture 8 Temas puntuales de la sección

Lecture 9 Videos adicionales antes de comenzar

Lecture 10 Inicio de proyecto - Bases de React

Lecture 11 Primer componente en TypeScript

Lecture 12 Trabajando con PropTypes

Lecture 13 Manejar un objeto como estado

Lecture 14 Optimizaciones y tipado

Lecture 15 useEffect - CounterEffect

Lecture 16 Realizar animación cuando se llega al valor máximo

Lecture 17 useRef y TimeLines

Lecture 18 CustomHooks con referencias HTML

Lecture 19 Parametrizar y pulir nuestro custom hook

Lecture 20 useReducer

Lecture 21 Función pura - Reducer

Lecture 22 IncreaseBy - Action

Lecture 23 Separar acciones, interfaces y reducer

Lecture 24 Action Creators

Lecture 25 Código fuente de la sección

Section 3: Opcional - Construcción del proyecto inicial

Lecture 26 Introducción a la sección

Lecture 27 Temas puntuales de la sección

Lecture 28 Inicio de Proyecto - ReactApp

Lecture 29 Configurar rutas tradicionales - React Router V6

Lecture 30 Opcional - Configurar rutas tradicionales - React Router V5

Lecture 31 Repositorio de Git y GitHub

Lecture 32 Código fuente de la sección

Section 4: LazyLoad - Chunks - React Router Dom V5

Lecture 33 Introducción a la sección

Lecture 34 Temas puntuales de la sección

Lecture 35 Nota: React Router V5 y V6

Lecture 36 Preparación de proyecto - React-App

Lecture 37 Rutas tradicionales - Sin Lazyload

Lecture 38 Crear archivo de rutas independiente

Lecture 39 Resolución de tarea de rutas estáticas

Lecture 40 LazyLoad y Suspense

Lecture 41 Cambiar el nombre de los chunks

Lecture 42 Nested Lazy Routes

Lecture 43 Subir cambios y ramas a GitHub

Lecture 44 Código fuente

Lecture 45 Nota: React Router Dom V5

Lecture 46 Preparación de proyecto - React-App

Lecture 47 Rutas tradicionales - Sin Lazyload

Lecture 48 Crear archivo de rutas independiente

Lecture 49 Resolución de tarea de rutas estáticas

Lecture 50 LazyLoad y Suspense

Lecture 51 Cambiar el nombre de los chunks

Lecture 52 Nested Lazy Routes

Lecture 53 Implementar las rutas hijas

Lecture 54 Subir cambios y ramas a GitHub

Lecture 55 Código fuente de la sección

Section 5: Patrones de componentes - Compound Component Pattern

Lecture 56 Introducción a la sección

Lecture 57 Temas puntuales de la sección

Lecture 58 Continuación de proyecto - Patrones de componentes

Lecture 59 Componente básico tradicional

Lecture 60 CustomHook - useProduct

Lecture 61 Recibir props al componente hijo

Lecture 62 Compound Component Pattern - Primeros pasos

Lecture 63 Compound Component Pattern - Segundo Paso

Lecture 64 Unificar exportación de componentes

Lecture 65 Compound Component Pattern - Tercer Paso

Lecture 66 Separando la lógica en archivos independientes

Lecture 67 Asignar componentes a otro componente

Lecture 68 Realizar respaldo y rama

Lecture 69 Código fuente de la sección

Section 6: Patrones de componentes - Extensible Styles

Lecture 70 Introducción a la sección

Lecture 71 Temas puntuales de la sección

Lecture 72 Continuación de la sección - Extensible Styles

Lecture 73 Custom className

Lecture 74 className en el ProductTitle y ProductImage

Lecture 75 className en ProductButtons

Lecture 76 Interfaces faltantes

Lecture 77 React CSSProperties

Lecture 78 Creación de rama y commit de los cambios

Lecture 79 Código fuente de la sección

Section 7: Patrones de componentes - Control Props

Lecture 80 Introducción a la sección

Lecture 81 Temas puntuales de la sección

Lecture 82 Continuación de la sección - Control Props

Lecture 83 Problema y necesidad del control de propiedades

Lecture 84 Estado del carrito de compras

Lecture 85 Disparar función personalizada al cambiar estado

Lecture 86 Emitir argumentos en nuestro evento

Lecture 87 Crear carrito de compras

Lecture 88 Mostrar items del carrito de compras

Lecture 89 Mantener sincronizado los valores

Lecture 90 Sincronizar desde el carrito a las tarjetas principales

Lecture 91 Control Props

Lecture 92 Controlando el estado desde el padre

Lecture 93 useShoppingCart

Lecture 94 Respaldo de nuestra rama

Lecture 95 Código fuente de la sección

Section 8: State initializer + Function Child = Render Props - Formik implementation

Lecture 96 Introducción a la sección

Lecture 97 Temas puntuales de la sección

Lecture 98 Continuación de la sección

Lecture 99 Implementar la propiedad initialValues

Lecture 100 Mostrar el valor inicial en el componente

Lecture 101 Utilizar el MaxCount como limitante

Lecture 102 Función como hijo de un HOC

Lecture 103 Tarea: isMaxCountReaced

Lecture 104 Exponer funciones y propiedades fuera del componente

Lecture 105 Trabajar con toda la información expuesta como argumento

Lecture 106 Código fuente de la sección

Section 9: NPM Deploy - Desplegar paquete de componentes

Lecture 107 Introducción a la sección

Lecture 108 Temas puntuales de la sección

Lecture 109 Preparación de nuestro juego de componentes

Lecture 110 Crear proyecto de tsdx

Lecture 111 Estructura del proyecto - TSDX - NPM

Lecture 112 Paso #2 - Optimizar index.tsx

Lecture 113 Paso #3 - ( Opcional ) Módulos

Lecture 114 Paso #4 - Build

Lecture 115 Paso #6: GitHub Repo

Lecture 116 Paso #7: Pruebas automáticas

Lecture 117 Pruebas en ProductTitle

Lecture 118 Pruebas en ProductImage

Lecture 119 Pruebas en ProductCard

Lecture 120 Paso #8: Publicar

Lecture 121 Nueva versión de nuestro paquete de NPM

Lecture 122 Usar el paquete en un nuevo proyecto

Lecture 123 Código fuente de la sección

Section 10: Formik - React Forms

Lecture 124 Introducción a la sección

Lecture 125 Temas puntuales de la sección

Lecture 126 Inicio de proyecto - Forms

Lecture 127 Formulario tradicional

Lecture 128 Formulario tradicional - con useState

Lecture 129 Actualizar los inputs y tomar el valor del formulario

Lecture 130 CustomHook - useForm

Lecture 131 Expandir funcionalidad de nuestro custom hook

Lecture 132 Formik - Ejercicio básico

Lecture 133 Formik - Obtener información del formulario

Lecture 134 Formik - Validaciones manuales

Lecture 135 Formik - Mostrar errores en los campos

Lecture 136 Yup - ValidationSchema Builder

Lecture 137 Formik - getFieldProps

Lecture 138 Formik - Components

Lecture 139 Formik - Selects y Checks

Lecture 140 Formik - Abstraction - useField

Lecture 141 Formik - Custom Select

Lecture 142 Formik - Custom Checkbox

Lecture 143 Pequeñas optimizaciones

Lecture 144 Código fuente de la sección

Section 11: Formik Dynamic y Custom Forms

Lecture 145 Introducción a la sección

Lecture 146 Temas puntuales de la sección

Lecture 147 Continuación del ejercicio

Lecture 148 Tarea - Formulario de registro con Formik

Lecture 149 Formularios dinámicos

Lecture 150 Creando el initialValues de forma dinámica

Lecture 151 Selects de manera dinámica

Lecture 152 Validaciones dinámicas

Lecture 153 Validaciones dinámicas adicionales

Lecture 154 Código fuente de la sección

Section 12: Storybook - Cama para creación y mantenimiento de componentes y paquetes

Lecture 155 Introducción a la sección

Lecture 156 Temas puntuales de la sección

Lecture 157 Inicio de proyecto - MyStoryBook

Lecture 158 Instalar y configurar Storybook

Lecture 159 Componente - MyLabel

Lecture 160 Añadir props y controles

Lecture 161 Documentar automáticamente las descripciones

Lecture 162 Tarea: Propiedades y controles adicionales

Lecture 163 Resolución de la tarea

Lecture 164 Desplegar Storybook

Lecture 165 Github y GitHub Pages

Lecture 166 Bonus: Chromatic

Lecture 167 Bonus: Chromatic - Atrapar cambios en el UI

Lecture 168 Código fuente de la sección

Section 13: NPM Empaquetamiento y publicación

Lecture 169 Introducción a la sección

Lecture 170 Temas puntuales de la sección

Lecture 171 Continuación del proyecto

Lecture 172 Configuraciones en el package.json

Lecture 173 Configuraciones en el tsconfig.json

Lecture 174 Eliminar manualmente la carpeta de distribución

Lecture 175 Copiar recursos estáticos

Lecture 176 npm publish

Lecture 177 Información adicional del paquete

Lecture 178 Probar importación del paquete

Lecture 179 NP - A better npm publish

Lecture 180 Crear nueva versión de nuestro paquete

Lecture 181 Npm Check Updates

Lecture 182 Código fuente de la sección

Section 14: Aplicación de React y Backend para PWA

Lecture 183 Introducción a la sección

Lecture 184 Temas puntuales de la sección

Lecture 185 Preparación de la sección

Lecture 186 ¿Cómo funciona la aplicación actual?

Lecture 187 Introducción a las PWAs y Service Workers

Section 15: React + PWA

Lecture 188 Introducción a la sección

Lecture 189 Temas puntuales de la sección

Lecture 190 Levantar los procesos de backend y frontend

Lecture 191 Service Worker para una aplicación existente - npx

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

Lecture 193 Manual - Descarga e instalación SW

Lecture 194 Manual - Grabar en caché

Lecture 195 Manual - Fetch dentro del service worker

Lecture 196 Manual - Network first with cache fallback

Lecture 197 Manual - Network first with cache fallback - Parte 2

Lecture 198 Tarea - Almacenar en caché los eventos

Lecture 199 Código fuente de la sección

Section 16: Workbox

Lecture 200 Introducción a la sección

Lecture 201 Temas puntuales de la sección

Lecture 202 Continuación de la aplicación

Lecture 203 Workbox CLI - Wizard

Lecture 204 Workbox SW Manual

Lecture 205 Workbox Cache Strategies

Lecture 206 Verificación de Token offline

Lecture 207 Background Sync - Posteos sin conexión

Lecture 208 Tarea - Put y Delete

Lecture 209 Optimizar nuestro service worker

Lecture 210 Mostrar mensaje de Online y Offline

Lecture 211 Código fuente de la sección

Section 17: Mapas - Marcadores - Rutas - Polylines - Mapbox

Lecture 212 Temas puntuales de la sección

Lecture 213 Demostración del objetivo al final

Lecture 214 Inicio de Proyecto - MapasApp

Lecture 215 Crear el contexto de lugares

Lecture 216 PlacesReducer - Estado de nuestro contexto

Lecture 217 Obtener la geolocalización del usuario

Lecture 218 Mostrar la geolocalización del usuario en pantalla

Lecture 219 Mostrar mapa de Mapbox

Lecture 220 Crear el contexto para el mapa

Lecture 221 Establecer el mapa en el contexto

Lecture 222 Marcadores, Popups y botón de ubicación

Lecture 223 Mostrar logo de React

Lecture 224 SearchBar y Debounce manual

Lecture 225 Buscar lugares basados en el query de búsqueda

Lecture 226 Colocar el tipo de dato y almacenarlo en en el state

Lecture 227 Mostrar los lugares encontrados

Lecture 228 Colocar marcadores en cada lugar encontrado

Lecture 229 Volar y activar el lugar seleccionado

Lecture 230 DirectionsApi - Direcciones entre dos puntos

Lecture 231 Probar el API desde React

Lecture 232 Mostrar la polyline en el mapa

Lecture 233 Desplegar aplicación

Lecture 234 Código fuente de la sección

Section 18: Despedida del curso

Lecture 235 Despedida

Desarrolladores actuales de React,Desarrolladores que quieran seguir progresando en React,Todos los que quieran saber más sobre PWAs con Workbox,Los que quieran aprender a desplegar paquetes a NPM de diferentes formas,Todos los que quiera aprender React con TypeScript,Personas que quiera modularizar la aplicación