Newsletter para devsEntra
Masterclass

Primeros pasos en React explicado por dos seniors

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

José Manuel Gómez
Sergi Edo
Mira el trailer

Duración total: 01:30:54

Código descargable

Acceso 100% online

¿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

Descripción de la masterclass

Presentación

Sergi y José Manuel, del #TeamReactionarios, nos brindan una oportunidad única de explorar la transformación de una calculadora de muñecos cabezones, inicialmente creada en jQuery, en una versión dinámica y moderna construida en React.js.

Esta sesión desvela los entresijos de una transición tecnológica respondiendo a las preguntas claves de cualquier arranque de proyecto con React.

Proyecto: Calculadora de muñecos cabezones

👉 Este es el proyecto inicial resuelto con jQuery.

Requisito básico

  • La calculadora va a tener siempre un precio final en euros con 2 decimales al final de todos los campos

4 requisitos básicos

1️⃣ Selector de producto
Elegir entre tres personajes, cada uno tiene un precio

  • 13,5€ Jon Snow
  • 16,5€ Danerys Targaryen
  • 19€ Tyrion Lannister

2️⃣ Cambio según elección

  • Si eliges el segundo personaje aparece un check para definir si lo quieres con o sin dragon en el hombro: 44,5€ mas con dragón

3️⃣ Número de muñecos

  • Input de tipo entero: multiplica el precio final por la cantidad

4️⃣ Aplicación de impuestos
Para no tener que capturar la IP del usuario lo que hacemos es cargar un país de forma aleatoria desde una API externa.

  • Si el país empieza por vocal, aplican 10% de impuestos
  • Si empieza por consonante, 20 %
  • Mostramos el % de impuestos justo antes del precio final

Soluciones en código

Solución paso a paso de Sergi

Sergi usa Vite para crear el proyecto y sigue estos pasos:

  • Desplegable de personajes: Implementación de un desplegable que permite elegir diferentes personajes.
  • Uso de estados: Introducción del concepto de estados en React para gestionar cambios dinámicos en la interfaz.
  • Renderización dinámica: Generación de opciones dinámicas en el selector de personajes.
  • Cálculo de valor total: Utilización de estados para calcular el valor total de la compra.
  • Sincronización en el input: Abordaje de problemas de sincronización en el input.
  • Cálculo de impuestos: Incorporación del cálculo de impuestos en la calculadora.

Solución con hooks de José Manuel

José Manuel arranca fuerte con React y Next:

  • Visibilidad del dragón: Exploración de dos enfoques para determinar si el dragón es visible.
  • Eventos vs. useEffect: Comparativa entre el uso de eventos y useEffect para ciertas funcionalidades.
  • Escuchar cambios en el personaje: Uso de useEffect para detectar cambios en la elección del personaje.
  • Compartir funciones: Uso de eventos para evitar la dependencia excesiva de useEffect.
  • Manejo de estados complejos: Introducción al uso de reducers para manejar estados más complejos.

Refactorización con custom hooks de Sergi

Sergi nos guía a través de una refactorización avanzada, destacando:

  • Refactorización con custom hooks: Reorganización del código utilizando custom hooks y componentes.
  • Estructuración con objetos: Uso de objetos para estructurar las partes esenciales del proyecto.
  • Compatibilidad y escalabilidad: Mantenimiento de la compatibilidad al agregar nuevas funcionalidades.
  • Encapsulación de la interfaz: Abstracción de la lógica de interfaz de la calculadora.
  • Cálculo de precios: Detalle del cálculo del precio total del producto, considerando impuestos y elementos adicionales.

Refactorización para proyectos reales

José Manuel lleva la refactorización al siguiente nivel:

  • Creación de custom hooks: Desarrollo de hooks personalizados para obtener y gestionar datos.
  • Aislamiento de la lógica: Separación de la lógica de negocio en hooks, mejorando la modularidad.
  • Cálculo del ‘dragón’: Implementación de lógica en el hook ‘use for calculator’ para calcular valores.
  • React Hook Form: Exploración de React Hook Form para gestionar inputs, valores iniciales y cambios.

Podrás ver a:

Imagen de José Manuel Gómez

José Manuel Gómez

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

Sergi Edo

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

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]

Descubre todo lo que puedes conseguir sucribiéndote a Web Reactiva

Contenido nuevo todas las semanas

Una comunidad de developers colegas en telegram

Desafíos y retos de programación para que mejores tus habilidades

400 horas de contenido en audio y vídeo

Entrevistas y masterclass en directo con los/las mejores profesionales

Precio

24€Matrículaplus13€Al mes

  • Contenido disponible 24/7
  • Audios y videos
  • Retos y desafíos
  • Todo el código descargable
  • Comunidad de developers
  • Acceso premium completo