Masterclass

Primeros pasos en React explicado por dos seniors

#CalculadoraDinámica #jQueryAReact #CustomHooks #StateManagement #ReactHookForm #GestiónDeFormularios #Reactionarios

Desde 15€/mes

Duración total: 01:30:54
Código descargable
Acceso 100% online

Reimplementación en React de una calculadora hecha en jQuery: creación con Vite/Next, manejo de estado (useState/useReducer), fetch con useEffect, custom hooks, componentes y React Hook Form.

Qué vas a aprender

1Crear proyecto React rápido con Vite o Next.js
2Uso básico de useState para reactividad en componentes
3Renderizado condicional frente a manipulación directa del DOM
4Gestión de efectos y fetch con useEffect
5Refactorizar lógica en custom hooks reutilizables
6Agrupar estado con objetos y usar useReducer
7Control y patrones de inputs: controlado vs no controlado
8Formularios con React Hook Form y validación
9Buenas prácticas: keys en listas y evitar renders innecesarios
10Arquitectura: separación dominio, infraestructura y adaptadores

Explora los capítulos

1. Presentación [05:06]

Presentación

[00:56]

Proyecto en jQuery

[00:28]

Solución en React

[00:21]

Proyecto React con Vite

[03:21]

2. Solución paso a paso de Sergi [24:54]

Solución paso a paso de Sergi

[00:55]

Desplegable de personajes

[00:53]

Añadir estado para cambios

[02:03]

Opciones dinámicas en selector

[01:19]

Estado calcula valor total

[01:04]

Calcular valor final 🔥

[04:32]

Problemas en input

[00:32]

Cálculo de impuestos

[00:32]

Llamada externa sin evento

[04:46]

useEffect no afecta estado 🔥

[00:52]

Alcance de variable country

[00:31]

useEffect modifica setCountry

[02:54]

useState y variable constante

[00:18]

Uso y espera de estados 🔥

[00:32]

Cálculo de porcentajes

[03:11]

3. Solución con hooks de José Manuel [16:10]

Solución con hooks de José Manuel

[01:26]

Ver si dragón visible

[00:22]

Usar eventos, no useEffect 🔥

[00:19]

Escuchar cambios en personaje

[00:19]

Menos recomendable usar useEffect 🔥

[05:22]

Compartir funciones en eventos

[01:21]

Reducers manejan arreglos 🔥

[02:46]

Reducer para estado complejo

[01:11]

Ventajas de un reducer

[00:26]

Funciones reductoras en Redux

[02:38]

4. Refactorización con custom hooks de Sergi [27:00]

Refactorización con custom hooks de Sergi

[00:44]

Comparar con useState

[00:36]

Cuándo usar estado en React

[00:24]

Cálculos sin estado

[00:30]

Refactor con custom hooks 🔥

[03:02]

Mover lógica de random country

[00:57]

Lógica de impuestos separada

[00:18]

Hook useTaxes para impuestos

[03:56]

Ejemplo de useTaxes 🔥

[00:09]

Objetos para estructurar

[00:11]

Mantener compatibilidad

[00:13]

Retornar objetos recomendado 🔥

[05:14]

Estado en setSelectedProduct

[00:23]

Función cambia personaje

[03:57]

Encapsular render de selección 🔥

[00:27]

Precio total con impuestos

[00:10]

Abstraer interfaz calculadora

[04:24]

Input por defecto falso

[00:30]

Campo default value

[00:55]

5. Refactor para proyectos reales con José Manuel [17:44]

Refactor para proyectos reales con José Manuel

[03:35]

Primer custom hook para país

[00:39]

Lógica en hook, cálculo total 🔥

[00:14]

Cálculo de 'dragon' en hook

[04:10]

TypeScript en UseForm

[00:18]

Funcionamiento React Hook Form 🔥

[00:17]

Valores iniciales en Hook Form

[00:32]

Campos adicionales en Hook Form

[04:03]

Evitar renderizado en cascada 🔥

[00:34]

Librería React Hook Form

[00:15]

Watch para funciones

[03:07]

Podrás ver a:

José Manuel Gómez

Full-stack developer, Reactionario por antonomasia y amante de los CRM y ERP.

Sergi Edo

Apasionado del desarrollo, sobretodo si hay mapas de por medio ❤️🌎

Desde 15€/mes