Calculadora React + Vite

Ya en el post anterior les compartí mi primer proyecto con javascript. Continuamos la ruta de aprendizaje con dos tecnologías con las que me estoy familiarizando: React y Vite Y qué mejor manera de empezar que con un clásico: una calculadora.

Debo admitir que me costó un poco más de lo que me esperaba. No soy gran fanático del diseño en general por lo que adelanto que seguramente utilice mucho bootstrap de aquí en adelante y algo de ayuda del buen chatbot (en lo que respecta exclusivamente al diseño). Resulta que las calculadoras son algo más que un if anidado, sobre todo en lo que respecta al comportamiento estable y las situaciones edge:

• Evitar los doble "00", el doble punto: "1.14.5"
• Manejo del doble operador
• Manejo del doble ==
• Cambio de operadores
• Permitir el ingreso de datos a través del teclado
• ...

En fin, situaciones que surgen del uso.

Un diseño muy a lo android que busca ser simple, moderno y funcional, con todo lo necesario para las operaciones del día a día.

Arquitectura de componentes

La calculadora está construida siguiendo una arquitectura de componentes reutilizables, una de las principales ventajas de React.

• Calculadora.jsx: Es el componente principal y el cerebro de la aplicación. Orquesta a todos los demás componentes y centraliza la lógica y el estado. Aquí se manejan los clics de los botones, se realizan las operaciones matemáticas y se actualiza el valor que se muestra en pantalla.

• Display.jsx: Un componente simple y reutilizable cuya única responsabilidad es mostrar los valores que recibe a través de sus props. No contiene lógica, simplemente refleja el estado actual de la calculadora que le es proporcionado por el componente anterior

• Teclado.jsx: Actúa como un contenedor para todos los botones de la calculadora. Su función es organizar y renderizar los componentes Boton.jsx en un diseño coherente de cuadrícula.

• Boton.jsx: Representa un botón individual en la calculadora. Es un componente altamente reutilizable que recibe propiedades (props) para definir su texto (ej. "7", "+", "="), su color y la función que debe ejecutar al ser presionado.

Flujo de Datos y Lógica

El funcionamiento sigue el patrón de diseño común en React de "levantamiento del estado" (lifting state up):

1. Estado Centralizado: Toda la lógica y los datos importantes (como el número actual, la operación pendiente y el resultado) residen en el estado del componente Calculadora.jsx.
2. Paso de Datos (Props): Calculadora.jsx pasa los datos necesarios a los componentes hijos. Por ejemplo, pasa el valor a mostrar al componente Display.jsx.
3. Actualización del Estado: Esta función, al ser llamada, actualiza el estado dentro de Calculadora.jsx con el nuevo valor o realiza la operación correspondiente.
4. Re-renderizado: Al cambiar el estado de Calculadora.jsx, React vuelve a renderizar este componente y sus hijos. Como resultado, Display.jsx recibe el nuevo valor y lo muestra en pantalla, completando el ciclo.

Tecnologías y Conceptos Utilizados

Me apoyé en un conjunto de herramientas y librerías muy populares en el mundo del front-end:

• React: El corazón de la aplicación. Toda la interfaz está construida con componentes reutilizables, como los botones (<Boton />) o la pantalla (<Display />). Fue mi primera inmersión real en el manejo del estado (useState) para la lógica de los cálculos.
• Vite: Como entorno de desarrollo, es increíblemente rápido. Permite tener un servidor de desarrollo casi instantáneo y una experiencia de "hot-reloading" que agiliza muchísimo el trabajo.
• Styled Components: Para el diseño, opté por esta librería de CSS-in-JS. Me encantó la idea de tener los estilos encapsulados dentro de cada componente, lo que hace que el código sea más ordenado y mantenible.
• Bootstrap y React-Bootstrap: Utilicé Bootstrap para la estructura general y algunos componentes base, aprovechando su sistema de grids.
• React Toastify: Para las notificaciones. Si intentas hacer una operación inválida (como dividir por cero), una pequeña notificación aparecerá para avisarte.
• React Helmet: Una herramienta genial para gestionar el <head> de la página y los aspectos relacionados al SEO del sitio.

Y por supuesto, en modo oscuro. Detesto los sitios y/o apps quema retinas.

Como siempre, el código está muy comentado. Les comparto los links al deploy y al repo en github.

• Deploy: https://calculadora-react-tna.netlify.app/
• Github: https://github.com/mcattani/calculadora_react_vite

Cada pequeña ayuda o gesto de apoyo significa un montón para mí. Si quieres ayudar puedes invitándome un cafecito: