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

Section 2: Reforzamiento sobre React

Lecture 6 Introducción a la sección

Lecture 7 Temas puntuales de la sección

Lecture 8 Videos adicionales antes de comenzar

Lecture 9 Inicio de proyecto - Bases de React

Lecture 10 Primer componente en TypeScript

Lecture 11 Trabajando con PropTypes

Lecture 12 Manejar un objeto como estado

Lecture 13 Optimizaciones y tipado

Lecture 14 useEffect - CounterEffect

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

Lecture 16 useRef y TimeLines

Lecture 17 CustomHooks con referencias HTML

Lecture 18 Parametrizar y pulir nuestro custom hook

Lecture 19 useReducer

Lecture 20 Función pura - Reducer

Lecture 21 IncreaseBy - Action

Lecture 22 Separar acciones, interfaces y reducer

Lecture 23 Action Creators

Lecture 24 Código fuente de la sección

Section 3: Opcional - Construcción del proyecto inicial

Lecture 25 Introducción a la sección

Lecture 26 Temas puntuales de la sección

Lecture 27 Inicio de Proyecto - ReactApp

Lecture 28 Configurar rutas tradicionales - React Router V6

Lecture 29 Opcional - Configurar rutas tradicionales - React Router V5

Lecture 30 Repositorio de Git y GitHub

Lecture 31 Código fuente de la sección

Section 4: LazyLoad - Chunks - React Router Dom V5

Lecture 32 Introducción a la sección

Lecture 33 Temas puntuales de la sección

Lecture 34 Nota: React Router V5 y V6

Lecture 35 Preparación de proyecto - React-App

Lecture 36 Rutas tradicionales - Sin Lazyload

Lecture 37 Crear archivo de rutas independiente

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

Lecture 39 LazyLoad y Suspense

Lecture 40 Cambiar el nombre de los chunks

Lecture 41 Nested Lazy Routes

Lecture 42 Subir cambios y ramas a GitHub

Lecture 43 Código fuente

Lecture 44 Nota: React Router Dom V5

Lecture 45 Preparación de proyecto - React-App

Lecture 46 Rutas tradicionales - Sin Lazyload

Lecture 47 Crear archivo de rutas independiente

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

Lecture 49 LazyLoad y Suspense

Lecture 50 Cambiar el nombre de los chunks

Lecture 51 Nested Lazy Routes

Lecture 52 Implementar las rutas hijas

Lecture 53 Subir cambios y ramas a GitHub

Lecture 54 Código fuente de la sección

Section 5: Patrones de componentes - Compound Component Pattern

Lecture 55 Introducción a la sección

Lecture 56 Temas puntuales de la sección

Lecture 57 Continuación de proyecto - Patrones de componentes

Lecture 58 Componente básico tradicional

Lecture 59 CustomHook - useProduct

Lecture 60 Recibir props al componente hijo

Lecture 61 Compound Component Pattern - Primeros pasos

Lecture 62 Compound Component Pattern - Segundo Paso

Lecture 63 Unificar exportación de componentes

Lecture 64 Compound Component Pattern - Tercer Paso

Lecture 65 Separando la lógica en archivos independientes

Lecture 66 Asignar componentes a otro componente

Lecture 67 Realizar respaldo y rama

Lecture 68 Código fuente de la sección

Section 6: Patrones de componentes - Extensible Styles

Lecture 69 Introducción a la sección

Lecture 70 Temas puntuales de la sección

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

Lecture 72 Custom className

Lecture 73 className en el ProductTitle y ProductImage

Lecture 74 className en ProductButtons

Lecture 75 Interfaces faltantes

Lecture 76 React CSSProperties

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

Lecture 78 Código fuente de la sección

Section 7: Patrones de componentes - Control Props

Lecture 79 Introducción a la sección

Lecture 80 Temas puntuales de la sección

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

Lecture 82 Problema y necesidad del control de propiedades

Lecture 83 Estado del carrito de compras

Lecture 84 Disparar función personalizada al cambiar estado

Lecture 85 Emitir argumentos en nuestro evento

Lecture 86 Crear carrito de compras

Lecture 87 Mostrar items del carrito de compras

Lecture 88 Mantener sincronizado los valores

Lecture 89 Sincronizar desde el carrito a las tarjetas principales

Lecture 90 Control Props

Lecture 91 Controlando el estado desde el padre

Lecture 92 useShoppingCart

Lecture 93 Respaldo de nuestra rama

Lecture 94 Código fuente de la sección

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

Lecture 95 Introducción a la sección

Lecture 96 Temas puntuales de la sección

Lecture 97 Continuación de la sección

Lecture 98 Implementar la propiedad initialValues

Lecture 99 Mostrar el valor inicial en el componente

Lecture 100 Utilizar el MaxCount como limitante

Lecture 101 Función como hijo de un HOC

Lecture 102 Tarea: isMaxCountReaced

Lecture 103 Exponer funciones y propiedades fuera del componente

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

Lecture 105 Código fuente de la sección

Section 9: NPM Deploy - Desplegar paquete de componentes

Lecture 106 Introducción a la sección

Lecture 107 Temas puntuales de la sección

Lecture 108 Preparación de nuestro juego de componentes

Lecture 109 Crear proyecto de tsdx

Lecture 110 Estructura del proyecto - TSDX - NPM

Lecture 111 Paso #2 - Optimizar index.tsx

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

Lecture 113 Paso #4 - Build

Lecture 114 Paso #6: GitHub Repo

Lecture 115 Paso #7: Pruebas automáticas

Lecture 116 Pruebas en ProductTitle

Lecture 117 Pruebas en ProductImage

Lecture 118 Pruebas en ProductCard

Lecture 119 Paso #8: Publicar

Lecture 120 Nueva versión de nuestro paquete de NPM

Lecture 121 Usar el paquete en un nuevo proyecto

Lecture 122 Código fuente de la sección

Section 10: Formik - React Forms

Lecture 123 Introducción a la sección

Lecture 124 Temas puntuales de la sección

Lecture 125 Inicio de proyecto - Forms

Lecture 126 Formulario tradicional

Lecture 127 Formulario tradicional - con useState

Lecture 128 Actualizar los inputs y tomar el valor del formulario

Lecture 129 CustomHook - useForm

Lecture 130 Expandir funcionalidad de nuestro custom hook

Lecture 131 Formik - Ejercicio básico

Lecture 132 Formik - Obtener información del formulario

Lecture 133 Formik - Validaciones manuales

Lecture 134 Formik - Mostrar errores en los campos

Lecture 135 Yup - ValidationSchema Builder

Lecture 136 Formik - getFieldProps

Lecture 137 Formik - Components

Lecture 138 Formik - Selects y Checks

Lecture 139 Formik - Abstraction - useField

Lecture 140 Formik - Custom Select

Lecture 141 Formik - Custom Checkbox

Lecture 142 Pequeñas optimizaciones

Lecture 143 Código fuente de la sección

Section 11: Formik Dynamic y Custom Forms

Lecture 144 Introducción a la sección

Lecture 145 Temas puntuales de la sección

Lecture 146 Continuación del ejercicio

Lecture 147 Tarea - Formulario de registro con Formik

Lecture 148 Formularios dinámicos

Lecture 149 Creando el initialValues de forma dinámica

Lecture 150 Selects de manera dinámica

Lecture 151 Validaciones dinámicas

Lecture 152 Validaciones dinámicas adicionales

Lecture 153 Código fuente de la sección

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

Lecture 154 Introducción a la sección

Lecture 155 Temas puntuales de la sección

Lecture 156 Inicio de proyecto - MyStoryBook

Lecture 157 Instalar y configurar Storybook

Lecture 158 Modulos de CSS y levantar Storybook

Lecture 159 Componente - MyLabel

Lecture 160 Añadir props y controles a nuestra historia y componente

Lecture 161 Documentar automáticamente las descripciones

Lecture 162 Tarea: Propiedades y controles adicionales

Lecture 163 Nueva propiedad - Color de fuente

Lecture 164 Desplegar Storybook a servidores

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: GitHub Actions + Semantic Versioning + Automatic Npm Deploy + Storybook

Lecture 169 Introducción a la sección

Lecture 170 Temas puntuales de la sección

Lecture 171 Continuación de la sección - Package.json

Lecture 172 TSConfig.json - Configuraciones de TypeScript

Lecture 173 Limpiar y copiar archivos al DIST

Lecture 174 Semantic Versioning Automático

Lecture 175 Configuración de Tokens de acceso

Lecture 176 Github Actions - Crear versionamiento y despliegues de forma automática

Lecture 177 Github Actions - Actualizar Versión y paquete

Lecture 178 Posibles problemas comunes

Lecture 179 Usando nuestro paquete en un proyecto independiente

Lecture 180 Código fuente de la sección

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

Lecture 181 Introducción a la sección

Lecture 182 Temas puntuales de la sección

Lecture 183 Preparación de la sección

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

Lecture 185 Introducción a las PWAs y Service Workers

Section 15: React + PWA

Lecture 186 Introducción a la sección

Lecture 187 Temas puntuales de la sección

Lecture 188 Levantar los procesos de backend y frontend

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

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

Lecture 191 Manual - Descarga e instalación SW

Lecture 192 Manual - Grabar en caché

Lecture 193 Manual - Fetch dentro del service worker

Lecture 194 Manual - Network first with cache fallback

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

Lecture 196 Tarea - Almacenar en caché los eventos

Lecture 197 Código fuente de la sección

Section 16: Workbox

Lecture 198 Introducción a la sección

Lecture 199 Temas puntuales de la sección

Lecture 200 Continuación de la aplicación

Lecture 201 Workbox CLI - Wizard

Lecture 202 Workbox SW Manual

Lecture 203 Workbox Cache Strategies

Lecture 204 Verificación de Token offline

Lecture 205 Background Sync - Posteos sin conexión

Lecture 206 Tarea - Put y Delete

Lecture 207 Optimizar nuestro service worker

Lecture 208 Mostrar mensaje de Online y Offline

Lecture 209 Código fuente de la sección

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

Lecture 210 Temas puntuales de la sección

Lecture 211 Demostración del objetivo al final

Lecture 212 Inicio de Proyecto - MapasApp

Lecture 213 Crear el contexto de lugares

Lecture 214 PlacesReducer - Estado de nuestro contexto

Lecture 215 Obtener la geolocalización del usuario

Lecture 216 Mostrar la geolocalización del usuario en pantalla

Lecture 217 Mostrar mapa de Mapbox

Lecture 218 Crear el contexto para el mapa

Lecture 219 Establecer el mapa en el contexto

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

Lecture 221 Mostrar logo de React

Lecture 222 SearchBar y Debounce manual

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

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

Lecture 225 Mostrar los lugares encontrados

Lecture 226 Colocar marcadores en cada lugar encontrado

Lecture 227 Volar y activar el lugar seleccionado

Lecture 228 DirectionsApi - Direcciones entre dos puntos

Lecture 229 Probar el API desde React

Lecture 230 Mostrar la polyline en el mapa

Lecture 231 Desplegar aplicación

Lecture 232 Código fuente de la sección

Section 18: Despedida del curso

Lecture 233 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