Creando una Calculadora Responsiva

Introducción

React es una popular biblioteca de JavaScript utilizada para construir interfaces de usuario interactivas y reutilizables. En este tutorial, aprenderemos cómo crear una calculadora básica con React y hacerla responsiva para adaptarse a diferentes tamaños de pantalla, como pantallas grandes y dispositivos móviles. 

Introducción a React: Librería vs. Framework

React es una poderosa y popular biblioteca de JavaScript desarrollada por Facebook para construir interfaces de usuario interactivas y reactivas. React se ha convertido en una opción predilecta para el desarrollo web debido a su enfoque en la construcción de componentes reutilizables y su eficiente manejo de actualizaciones en el DOM.

A menudo, surge la confusión entre si React es una librería o un framework. Para comprender mejor esta distinción, veamos las características que definen tanto a las librerías como a los frameworks:

Librería:

Una librería es un conjunto de funciones y componentes que proporciona soluciones específicas para tareas comunes.

Las librerías generalmente se utilizan para agregar funcionalidades adicionales a una aplicación existente, pero no definen una estructura rígida para el desarrollo de la aplicación.
Los desarrolladores tienen más libertad para elegir qué partes de la librería usar y cómo integrarlas en su código.

Framework:

Un framework es un entorno de desarrollo completo que define una estructura y un flujo de trabajo para construir aplicaciones.

Los frameworks tienden a ser más completos y proporcionan una arquitectura predefinida para guiar a los desarrolladores a lo largo del proceso de desarrollo.
Los desarrolladores deben seguir las convenciones y patrones del framework, lo que puede requerir un mayor aprendizaje inicial pero simplifica la toma de decisiones en el desarrollo posterior.

React como Librería:

React se considera una librería porque proporciona un conjunto de componentes y funciones específicas para la construcción de interfaces de usuario. React no impone una estructura rígida para el desarrollo, lo que permite a los desarrolladores tomar decisiones sobre cómo estructurar sus aplicaciones.

Componentes en React:

Los componentes son la base fundamental de React. Un componente es una pieza independiente y reutilizable de una interfaz de usuario que encapsula la lógica y la presentación. Los componentes pueden ser complejos, como un encabezado o un pie de página, o simples, como un botón o un ítem de una lista. La composición de componentes permite construir aplicaciones con una arquitectura modular y escalable.

Estado y Hooks en React:

El estado es un concepto clave en React y representa los datos que pueden cambiar dentro de un componente. Los componentes de clase (anteriormente, los únicos disponibles en React) utilizan el estado a través de su método setState. Sin embargo, con la introducción de los Hooks en React 16.8, también se puede utilizar el estado en componentes funcionales mediante el Hook useState.

Los Hooks son funciones que permiten a los componentes funcionales tener estado y otras características que antes solo estaban disponibles en componentes de clase. Los Hooks más comunes son useState, useEffect, useContext, entre otros.

Diferencia con otros Frameworks:

React se destaca por su enfoque en la construcción de componentes reutilizables y su Virtual DOM, que mejora significativamente el rendimiento y eficiencia en las actualizaciones del DOM. Comparado con otros frameworks como Angular o Vue.js, React tiende a ser más liviano y permite mayor flexibilidad en la estructura y el flujo de trabajo de desarrollo.

Paso 1: Configuración del entorno

Antes de comenzar, asegúrate de tener Node.js y npm (Node Package Manager) instalados en tu computadora. Abre tu Terminal, Escribe las Palabras Node -v, te debe salir la version actual que tengas instalada. Si no los tienes, descárgalos e instálalos desde https://nodejs.org/

Luego, crearemos un nuevo proyecto de React utilizando «Create React App«, una herramienta para crear proyectos de React preconfigurados. Abre una terminal y ejecuta el siguiente comando:

npx create-react-app calculadora-react

Esto creará una nueva carpeta llamada «calculadora-react» con la estructura básica de una aplicación de React.

Paso 2: Creando la calculadora

Abre la carpeta «calculadora-react» en tu editor de código preferido. Navega hasta el archivo «src/App.js» y reemplaza su contenido con el siguiente código:

Codigo src/App.js

// Importar las dependencias necesarias de React
import React, { useState } from 'react';
// Importar los estilos CSS para la aplicación
import './App.css';

// Definir el componente principal de la aplicación
function App() {
  // Declarar el estado del valor mostrado en la pantalla de la calculadora utilizando el hook useState de React
  const [displayValue, setDisplayValue] = useState('0');

  // Función para manejar el clic en un número
  const handleNumberClick = (number) => {
    // Comprobar si el valor actual en la pantalla es '0'
    if (displayValue === '0') {
      // Si es '0', reemplazarlo con el número seleccionado como una cadena
      setDisplayValue(number.toString());
    } else {
      // Si no es '0', concatenar el número seleccionado al valor actual en la pantalla
      setDisplayValue(displayValue + number);
    }
  };

  // Función para restablecer el valor de la pantalla a '0'
  const handleReset = () => {
    setDisplayValue('0');
  };

  // Función para calcular el resultado de la expresión matemática ingresada en la pantalla de la calculadora
  const handleCalculate = () => {
    try {
      // Validar la expresión ingresada antes de evaluarla
      const isValidExpression = /^[\d+\-*/. ]+$/.test(displayValue);

      // Comprobar si la expresión es válida
      if (isValidExpression) {
        // Si es válida, evaluarla y mostrar el resultado en la pantalla
        setDisplayValue(eval(displayValue).toString());
      } else {
        // Si no es válida, mostrar 'Error' en la pantalla
        setDisplayValue('Error');
      }
    } catch (error) {
      // Si ocurre un error en la evaluación, mostrar 'Error' en la pantalla
      setDisplayValue('Error');
    }
  };

  // Devolver el JSX que representa la interfaz de usuario de la calculadora
  return (
    <div className="app">
      {/* Título de la aplicación */}
      <h1>Uso de React JPV</h1>
      <div className="calculator">
        {/* Pantalla de la calculadora que muestra el valor actual */}
        <div className="display">{displayValue}</div>
        <div className="buttons">
          {/* Botones de la calculadora */}
          {/* Cada botón llama a la función correspondiente cuando se hace clic, pasando el valor del botón como argumento */}
          <button onClick={() => handleNumberClick('7')}>7</button>
          <button onClick={() => handleNumberClick('8')}>8</button>
          <button onClick={() => handleNumberClick('9')}>9</button>
          <button onClick={() => handleNumberClick('+')}>+</button>
          <button onClick={() => handleNumberClick('4')}>4</button>
          <button onClick={() => handleNumberClick('5')}>5</button>
          <button onClick={() => handleNumberClick('6')}>6</button>
          <button onClick={() => handleNumberClick('-')}>-</button>
          <button onClick={() => handleNumberClick('1')}>1</button>
          <button onClick={() => handleNumberClick('2')}>2</button>
          <button onClick={() => handleNumberClick('3')}>3</button>
          <button onClick={() => handleNumberClick('*')}>*</button>
          <button onClick={() => handleNumberClick('0')}>0</button>
          <button onClick={() => handleNumberClick('.')}>.</button>
          <button onClick={() => handleCalculate()}>=</button>
          <button onClick={() => handleNumberClick('/')}>/</button>
          <button onClick={() => handleReset()}>Reset</button>
        </div>
      </div>
    </div>
  );
}

// Exportar el componente principal para que pueda ser utilizado en otros archivos
export default App;



Hoja de Estilo App.css

Paso 3: Estilizando la calculadora

Para darle estilo a nuestra calculadora, crearemos un archivo llamado «App.css» en la misma carpeta que «App.js» y agregaremos los siguientes estilos:


/* Estilos para la clase .app */
.app {
  text-align: center; /* Centra el texto horizontalmente */
}

/* Estilos para los elementos h1 */
h1 {
  font-size: 28px; /* Tamaño de fuente de 28 píxeles */
  margin-bottom: 20px; /* Margen inferior de 20 píxeles */
  color: #333; /* Color del texto en tono de gris oscuro (#333) */
}

/* Estilos para la clase .calculator */
.calculator {
  width: 240px; /* Ancho de 240 píxeles */
  margin: 0 auto; /* Margen horizontal automático para centrar en el contenedor padre */
  padding: 20px; /* Relleno interno de 20 píxeles */
  border: 1px solid #ccc; /* Borde de 1 píxel de ancho y color gris (#ccc) */
  border-radius: 5px; /* Bordes redondeados con un radio de 5 píxeles */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* Sombra debajo del elemento */
  font-family: Arial, sans-serif; /* Fuente Arial o fuente genérica sans-serif */
}

/* Escala para pantallas grandes */
@media (min-width: 768px) {
  .calculator {
    width: 270px; /* Ancho de 270 píxeles en pantallas grandes */
  }
}

/* Escala para dispositivos móviles */
@media (max-width: 767px) {
  .calculator {
    width: 90%; /* Ancho del 90% del contenedor en dispositivos móviles */
  }
}

/* Estilos para la clase .display */
.display {
  height: 40px; /* Altura de 40 píxeles */
  font-size: 24px; /* Tamaño de fuente de 24 píxeles */
  text-align: right; /* Alineación del texto a la derecha */
  padding: 5px; /* Relleno interno de 5 píxeles */
  border: 1px solid #ccc; /* Borde de 1 píxel de ancho y color gris (#ccc) */
  border-radius: 5px; /* Bordes redondeados con un radio de 5 píxeles */
  margin-bottom: 10px; /* Margen inferior de 10 píxeles */
}

/* Estilos para la clase .buttons */
.buttons {
  display: grid; /* Mostrar los elementos como una cuadrícula */
  grid-template-columns: repeat(4, 1fr); /* Cuatro columnas con tamaño igual */
  grid-gap: 5px; /* Espacio de 5 píxeles entre los elementos de la cuadrícula */
}

/* Estilos para los elementos button */
button {
  height: 40px; /* Altura de 40 píxeles */
  font-size: 18px; /* Tamaño de fuente de 18 píxeles */
  background-color: #f0f0f0; /* Color de fondo en tono de gris claro (#f0f0f0) */
  border: 1px solid #ccc; /* Borde de 1 píxel de ancho y color gris (#ccc) */
  border-radius: 5px; /* Bordes redondeados con un radio de 5 píxeles */
  cursor: pointer; /* Cambiar el puntero del cursor a una mano (cursor de clic) */
}

/* Estilos para los elementos button cuando se pasa el cursor sobre ellos */
button:hover {
  background-color: #e0e0e0; /* Cambiar el color de fondo a un tono de gris más oscuro (#e0e0e0) */
}

Paso 4: Implementando la lógica de la calculadora

Hemos creado la estructura de la calculadora y hemos aplicado estilos para adaptarla a diferentes tamaños de pantalla. Ahora, agregaremos la lógica para que funcione correctamente.

Dentro de App.js, hemos definido tres funciones: handleNumberClick, handleReset y handleCalculate. Estas funciones se encargarán de manejar las acciones cuando el usuario haga clic en los botones de la calculadora.

handleNumberClick: Esta función agrega el número seleccionado al valor de la pantalla. Si el valor actual es ‘0’, reemplaza ‘0’ con el número seleccionado; de lo contrario, concatena el número al valor actual.

handleReset: Esta función restablece el valor de la pantalla a ‘0’.

handleCalculate: Esta función evalúa la expresión matemática ingresada en la pantalla utilizando la función eval(). Si la expresión es válida, muestra el resultado en la pantalla; de lo contrario, muestra ‘Error’.

Publicar una aplicación React:

Publicar una aplicación React en Vercel es un proceso sencillo y rápido. Aquí tienes una guía paso a paso para publicar tu aplicación en Vercel:

Crear una cuenta en Vercel:

Si aún no tienes una cuenta en Vercel, ve al sitio web de Vercel (https://vercel.com) y crea una cuenta gratuita.

Instalar Vercel CLI (Command Line Interface):

Abre una ventana de comandos o terminal en tu computadora.

Instala el CLI de Vercel ejecutando el siguiente comando en la terminal:

npm install -g vercel

Preparar la aplicación para el despliegue:

Asegúrate de que tu aplicación de React esté lista para el despliegue. Asegúrate de que todos los cambios estén guardados y que el proyecto se encuentre en un estado funcional.

Compilar la aplicación React:

Antes de desplegar, debes compilar tu aplicación React para generar una versión optimizada para producción. Ejecuta el siguiente comando en la terminal:

npm run build

Esto generará una carpeta llamada «build» que contiene los archivos optimizados para producción.

Desplegar la aplicación en Vercel:

En la terminal, asegúrate de estar ubicado en la raíz de tu proyecto de React. Ejecuta el siguiente comando:

vercel

Vercel te pedirá que inicies sesión con tu cuenta y te guiará a través de algunas opciones para configurar el despliegue. Asegúrate de seleccionar el directorio de compilación «build» cuando se te solicite.

Confirmar el despliegue:

Una vez que Vercel termine de configurar tu proyecto, te mostrará la URL de tu aplicación desplegada. Puedes personalizar la URL si tienes un dominio personalizado configurado.
¡Y eso es todo! Tu aplicación de React ahora estará en línea y disponible para que la veas en la URL proporcionada por Vercel. Cualquier cambio que realices en el repositorio y lo subas a GitHub (u otro servicio compatible) se desplegará automáticamente en Vercel.

Conclusión

¡Felicidades! Has creado una calculadora básica con React y la has hecho responsiva para adaptarse a diferentes tamaños de pantalla. Ahora puedes seguir mejorando esta aplicación agregando más funcionalidades, como operaciones adicionales, teclas de operación, etc. Recuerda que React es una herramienta poderosa para crear aplicaciones web interactivas y eficientes.

Te dejaré el código fuente en GitHub para que lo clones o descargues y puedas replicar y mejorar, como te he mencionado. No olvides suscribirte al blog y al canal de YouTube, darle «me gusta», compartir; eso me ayuda a seguir creando contenidos como este, que aporten a tu educación y aprendizaje.

Te dejare el codigo ¡Espero que hayas disfrutado este tutorial y que continúes aprendiendo y explorando el mundo de React! Happy coding!

Comparte este Contenido en tus Redes Sociales

Deja un comentario