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

¿Qué aprenderás en este vídeo?

Resolución de un proyecto sencillo con React
Transformar la lógica de jQuery en un framework reactivo moderno
Añadir un estado para provocar cambios en React
Manejo de estados en un formulario
Calcular el valor final a partir del estado
Aprender a resolver problemas de sincronización
Cómo usar bien el useEffect
Uso de useEffect para escuchar cambios en el personaje
Diferencias entre manejo de eventos useEffect
Uso de un reducer para manejar un estado complejo
Refactorización con custom hooks
Primeros pasos para usar React Hook Form

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