ReactJS |Simple React Calculator

This article will guide you through the process of creating a functional, user-friendly calculator using ReactJS. We'll cover the essential concepts like state management, event handling, and component structure to make this project accessible to beginners and a great learning experience for those familiar with React.

Project Setup

Create a New React App:
Start by setting up a new React project using Create React App:

npx create-react-app react-calculator
cd react-calculator
content_copy
Use code with caution.
Bash

Start the Development Server:
Run the following command to launch your development server:

npm start
content_copy
Use code with caution.
Bash

Your React app will be accessible at http://localhost:3000/.

Component Structure

We'll structure our calculator using a single component: App.js. This component will handle the entire calculator's logic and rendering.

App.js (Main Component)

import React, { useState } from "react";
import "./App.css";

function App() {
const [displayValue, setDisplayValue] = useState("0");
const [operator, setOperator] = useState(null);
const [firstOperand, setFirstOperand] = useState(null);

// Function to handle number button clicks
const handleNumberClick = (number) => {
if (displayValue === "0") {
setDisplayValue(number.toString());
} else {
setDisplayValue(displayValue + number.toString());
}
};

// Function to handle operator button clicks
const handleOperatorClick = (op) => {
setOperator(op);
setFirstOperand(parseFloat(displayValue));
setDisplayValue("0");
};

// Function to handle equals button click
const handleEqualsClick = () => {
const secondOperand = parseFloat(displayValue);
let result;

switch (operator) {
  case "+":
    result = firstOperand + secondOperand;
    break;
  case "-":
    result = firstOperand - secondOperand;
    break;
  case "*":
    result = firstOperand * secondOperand;
    break;
  case "/":
    if (secondOperand === 0) {
      result = "Error";
    } else {
      result = firstOperand / secondOperand;
    }
    break;
  default:
    result = "Invalid Operation";
}

setDisplayValue(result.toString());
setOperator(null);
setFirstOperand(null);

};

// Function to handle clear button click
const handleClearClick = () => {
setDisplayValue("0");
setOperator(null);
setFirstOperand(null);
};

return (

{/* Display the current value */}
{displayValue}

  {/* Button grid for calculator functions */}
  <div className="buttons">
    <button onClick={() => handleNumberClick("7")}>7</button>
    <button onClick={() => handleNumberClick("8")}>8</button>
    <button onClick={() => handleNumberClick("9")}>9</button>
    <button onClick={() => handleOperatorClick("/")}>/</button>
    <button onClick={() => handleNumberClick("4")}>4</button>
    <button onClick={() => handleNumberClick("5")}>5</button>
    <button onClick={() => handleNumberClick("6")}>6</button>
    <button onClick={() => handleOperatorClick("*")}>*</button>
    <button onClick={() => handleNumberClick("1")}>1</button>
    <button onClick={() => handleNumberClick("2")}>2</button>
    <button onClick={() => handleNumberClick("3")}>3</button>
    <button onClick={() => handleOperatorClick("-")}>-</button>
    <button onClick={() => handleNumberClick("0")}>0</button>
    <button onClick={() => handleNumberClick(".")}>.</button>
    <button onClick={() => handleEqualsClick()}>=</button>
    <button onClick={() => handleOperatorClick("+")}>+</button>
    <button onClick={() => handleClearClick()}>C</button>
  </div>
</div>

);
}

export default App;
content_copy
Use code with caution.
JavaScript

Explanation

State Management:
We use useState hooks to manage the calculator's state. displayValue holds the current value displayed, operator stores the selected operation, and firstOperand saves the first number entered.

Event Handling:
Functions like handleNumberClick, handleOperatorClick, handleEqualsClick, and handleClearClick handle user interactions with the buttons.

Component Composition:
The App component is responsible for both the logic and the rendering of the calculator, demonstrating how components can combine functionality and presentation.

Adding Styling (App.css)

.calculator {
display: flex;
flex-direction: column;
width: 300px;
border: 1px solid #ccc;
padding: 20px;
border-radius: 5px;
}

.display {
height: 50px;
background-color: #eee;
font-size: 24px;
text-align: right;
padding: 10px;
border-radius: 5px;
margin-bottom: 10px;
}

.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
}

button {
padding: 10px;
border: none;
border-radius: 5px;
background-color: #f0f0f0;
font-size: 18px;
cursor: pointer;
}

button:hover {
background-color: #ddd;
}
content_copy
Use code with caution.
Css

Conclusion

By following these steps, you've created a fully functional calculator using React! This project serves as a great foundation for further exploration of React's capabilities. You can now add features like advanced operations, memory functions, or even a visual theme. Experiment and have fun!