+- Softwarez.Info - Software's World! (https://softwarez.info)
+-- Forum: Library Zone (https://softwarez.info/Forum-Library-Zone)
+--- Forum: Video Tutorials (https://softwarez.info/Forum-Video-Tutorials)
+--- Thread: React Pro - Lleva Tus Bases Al Siguiente Nivel (/Thread-React-Pro-Lleva-Tus-Bases-Al-Siguiente-Nivel)
React Pro - Lleva Tus Bases Al Siguiente Nivel - OneDDL - 08-09-2024
![[Image: df77f3f2d1febc3393977a87c43a26df.jpeg]](https://i123.fastpic.org/big/2024/0808/df/df77f3f2d1febc3393977a87c43a26df.jpeg)
Free Download React Pro - Lleva Tus Bases Al Siguiente Nivel
Last updated 10/2023
MP4 | Video: h264, 1920x1080 | Audio: AAC, 44.1 KHz
Language: Spanish | Size: 13.78 GB | Duration: 26h 17m
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
Homepage
Recommend Download Link Hight Speed | Please Say Thanks Keep Topic Live
No Password - Links are Interchangeable