Tutorial paso a paso para construir una calculadora funcional usando React y JavaScript
¡Hola desarrolladores entusiastas! Si estás comenzando en el mundo del desarrollo frontend y quieres aprender a construir una calculadora con JavaScript usando React, este tutorial es para ti. Aquí te guiaré paso a paso, desde la configuración del entorno con Create React App, hasta la creación de componentes reutilizables, manejo de estado con hooks, implementación de operaciones básicas y el diseño con CSS.
Este tutorial está pensado para principiantes en programación React, así que no te preocupes si no tienes mucha experiencia. ¡Vamos! 🚀
¿Por qué usar React para construir una calculadora?
React es una biblioteca JavaScript que facilita la creación de interfaces de usuario reactivas y escalables. Construir una calculadora es un ejercicio clásico que te permite practicar lo básico de React, como componentes, estado y eventos.
Además, te prepara para proyectos más grandes en desarrollo frontend React.
1. Configuración del entorno con Create React App
Para comenzar a trabajar con React de manera sencilla y rápida, usaremos la herramienta oficial Create React App.
Paso 1: Asegúrate de tener Node.js y npm instalados
Puedes descargar Node.js (que incluye npm) desde nodejs.org. Para verificar si ya lo tienes instalado:
|
1 2 3 |
node -v npm -v |
Paso 2: Crear el proyecto
En tu terminal, ejecuta:
|
1 2 |
npx create-react-app calculadora-react |
Esto creará una carpeta llamada calculadora-react con todo el entorno configurado.
Paso 3: Entrar al proyecto y arrancar el servidor
|
1 2 3 |
cd calculadora-react npm start |
Esto abrirá tu aplicación React en el navegador, típicamente en http://localhost:3000.
¡Listo para empezar a programar nuestra calculadora!
2. Estructura del proyecto y creación de componentes reutilizables
Vamos a construir nuestra calculadora dividiéndola en componentes simples y reutilizables:
- Display: Muestra el número actual o resultado.
- Button: Botón reutilizable para números y operaciones.
- Calculator: Componente principal que junta todo.
Crear carpeta para componentes
Dentro de src, crea una carpeta llamada components donde pondremos nuestros archivos.
3. Componente Button
Crea un archivo Button.js dentro de src/components.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
import React from 'react'; import './Button.css'; // Componente Button reutilizable const Button = ({ value, onClick, className }) => { return ( <button className={`button ${className}`} onClick={() => onClick(value)}> {value} </button> ); }; export default Button; |
Explicación:
- Recibe
value,onClick(función a ejecutar al hacer clic) yclassNamepara estilos condicionales. - Al hacer clic, llama a
onClickcon el valor del botón.
Diseño básico para Button
Crea Button.css:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
.button { font-size: 1.5rem; padding: 20px; margin: 5px; border-radius: 8px; border: none; cursor: pointer; background-color: #f0f0f0; transition: background-color 0.3s ease; } .button:hover { background-color: #d9d9d9; } .button.operator { background-color: #81b29a; color: white; } .button.operator:hover { background-color: #688a7e; } |
4. Componente Display
Crea Display.js en src/components:
|
1 2 3 4 5 6 7 8 9 |
import React from 'react'; import './Display.css'; const Display = ({ value }) => { return <div className="display">{value}</div>; }; export default Display; |
CSS para Display: Display.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.display { background-color: #22223b; color: #f2e9e4; font-size: 2.5rem; padding: 20px; border-radius: 10px; text-align: right; margin-bottom: 10px; min-height: 60px; user-select: none; overflow-x: auto; white-space: nowrap; } |
El display mostrará el texto que le pasemos como prop.
5. Componente Calculator: lógica y estado con hooks
En src/components/Calculator.js creemos el componente principal. Aquí usaremos el hook useState para controlar la entrada y resultado.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
import React, { useState } from 'react'; import Button from './Button'; import Display from './Display'; import './Calculator.css'; const Calculator = () => { // Estado para la entrada y cálculo const [input, setInput] = useState(''); // Función para manejar clicks en botones const handleClick = (value) => { if (value === 'C') { setInput(''); // Limpiar entrada return; } if (value === '=') { try { // Evaluar la expresión con eval (cuidado en apps reales) // Aquí es seguro porque solo permitimos inputs controlados // eslint-disable-next-line no-eval const result = eval(input); setInput(String(result)); } catch (error) { setInput('Error'); } return; } // Para evitar entradas inválidas como operadores seguidos const operators = ['+', '-', '*', '/']; const lastChar = input[input.length - 1]; if ( operators.includes(value) && (input === '' || operators.includes(lastChar)) ) { // No permitir operador si input vacío o último caracter es operador return; } setInput(input + value); }; return ( <div className="calculator"> <Display value={input || '0'} /> <div className="buttons"> {/* Números y puntos */} {[ '7', '8', '9', '4', '5', '6', '1', '2', '3', '0', '.' ].map(num => ( <Button key={num} value={num} onClick={handleClick} /> ))} {/* Operadores */} <Button value="+" onClick={handleClick} className="operator" /> <Button value="-" onClick={handleClick} className="operator" /> <Button value="*" onClick={handleClick} className="operator" /> <Button value="/" onClick={handleClick} className="operator" /> {/* Otros botones */} <Button value="C" onClick={handleClick} className="operator" /> <Button value="=" onClick={handleClick} className="operator" /> </div> </div> ); }; export default Calculator; |
Explicación paso a paso:
- Estado
input: almacena la cadena que representa la operación que el usuario escribe. handleClick: función que actualizainputsegún el botón presionado.- Si es “C”, resetea el input.
- Si es “=”, evalúa la expresión y muestra el resultado.
- Evita entradas inválidas: no permite que se ingresen operadores consecutivos o al principio.
- Usamos
eval()para evaluar la expresión calculadora. (Nota: Evitar usar eval en apps sensibles.)
CSS para Calculator (Calculator.css)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.calculator { max-width: 400px; margin: 40px auto; background-color: #f4f1de; padding: 20px; border-radius: 15px; box-shadow: 0 4px 10px rgb(0 0 0 / 0.2); } .buttons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } |
6. Integrando el componente Calculator en la app
Edita el archivo src/App.js para mostrar la calculadora:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
import React from 'react'; import Calculator from './components/Calculator'; import './App.css'; function App() { return ( <div className="App"> <h1>Calculadora React 👩💻📱</h1> <Calculator /> </div> ); } export default App; |
Y agrega un poco de estilo en src/App.css:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.App { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; text-align: center; background-color: #e0fbfc; min-height: 100vh; padding: 20px; } h1 { color: #3d5a80; margin-bottom: 20px; } |
7. ¡Probemos nuestra calculadora!
Con npm start ejecutando el proyecto, deberías ver:
- Una pantalla para mostrar números y resultados.
- Botones numéricos y de operadores.
- Funcionalidad para sumar, restar, multiplicar, dividir.
- Botón “C” para limpiar, “=” para obtener resultados.
¿Qué más podemos mejorar?
- Manejar errores y divisiones por cero.
- Añadir soporte para teclas del teclado.
- Mejorar el diseño para dispositivos móviles.
Pero para comenzar, lo que tienes es un excelente ejercicio de desarrollo frontend React.
Buenas prácticas para programación React y proyecto calculadora
- Componentes reutilizables: Evita repetir código creando componentes genéricos.
- Hooks para estado: Utiliza
useStatepara controlar el estado de forma clara. - Evitar manipulación directa del DOM: React se encarga de actualizar el DOM de forma eficiente.
- Separar estilos: Usa archivos CSS o módulos para mantener claro el estilo de cada componente.
- Validar entrada: En interfaces interactivas, siempre valida para evitar errores.
Conclusión y siguiente paso
¡Felicidades! 🎉 Has construido una calculadora funcional con React y JavaScript, entendiendo desde la configuración del entorno, creación de componentes, manejo de estado con hooks y diseño con CSS.
Este proyecto es una base increíble para tu aprendizaje en desarrollo frontend React. Te animo a mejorar esta calculadora:
- Añade funciones avanzadas como raíz cuadrada, porcentaje, memoria.
- Implementa control del teclado para mejor experiencia.
- Refactoriza el código para mejorar manejo de errores.
¿Listo para seguir aprendiendo?
Explora más tutoriales React, crea proyectos propios y participa en la comunidad. La programación React para principiantes es solo el comienzo de un viaje fascinante.
¡Manos a la obra! Comparte tu proyecto, comenta tus dudas y sigue creciendo.
Esperamos que este tutorial React te haya motivado y facilitado tus primeros pasos en React y JavaScript.
