Primeros pasos en React explicado por dos seniors

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 de Sergi / Reactionarios.dev
• Solución de José Manuel

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.