Build a Simple Calculator App with React: A Step-by-Step Guide

Written by

learnmodernjavascript

in

In the world of web development, simple projects can often be the most effective learning tools. They allow you to grasp core concepts without getting bogged down in complexity. Today, we’re going to build a basic calculator app using React. This project is perfect for beginners and intermediate developers looking to solidify their understanding of React components, state management, event handling, and basic styling. By the end of this tutorial, you’ll have a functional calculator and a deeper appreciation for the building blocks of React applications.

Why Build a Calculator App?

A calculator app might seem trivial, but it provides a fantastic platform for learning several key React concepts. Here’s why this project is beneficial:

  • Component Composition: You’ll learn how to break down a complex UI into smaller, reusable components.
  • State Management: You’ll manage the calculator’s display and internal calculations using React’s state.
  • Event Handling: You’ll handle user interactions (button clicks) and trigger state updates.
  • Conditional Rendering: You might incorporate conditional rendering to display error messages or handle different states.
  • Basic Styling: You’ll gain experience in applying CSS to React components.

Furthermore, building a calculator helps you understand how user input drives application behavior, a fundamental principle in interactive web applications. It’s a stepping stone to more complex projects.

Prerequisites

Before we begin, make sure you have the following:

  • Node.js and npm (or yarn) installed: These are essential for managing project dependencies and running React applications.
  • A basic understanding of HTML, CSS, and JavaScript: Familiarity with these languages is crucial for understanding the code.
  • A code editor: Visual Studio Code, Sublime Text, or any other editor you prefer.

Setting Up the Project

Let’s get started by creating a new React project. Open your terminal and run the following command:

npx create-react-app react-calculator

This command will create a new React app named “react-calculator”. Navigate into the project directory:

cd react-calculator

Now, let’s clean up the project by removing unnecessary files. Delete the following files from the src directory:

  • App.css
  • App.test.js
  • logo.svg
  • setupTests.js

Then, open App.js and replace its contents with the following basic structure:

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="calculator-app">
      <h1>React Calculator</h1>
      <div className="calculator-display">0</div>
      <div className="calculator-keypad">
        <button>7</button>
        <button>8</button>
        <button>9</button>
        <button className="operator">/</button>
        <button>4</button>
        <button>5</button>
        <button>6</button>
        <button className="operator">*</button>
        <button>1</button>
        <button>2</button>
        <button>3</button>
        <button className="operator">-</button>
        <button>0</button>
        <button>.</button>
        <button className="operator">=</button>
        <button className="operator">+</button>
        <button className="clear">C</button>
      </div>
    </div>
  );
}

export default App;

Also, create a new file named App.css in the src directory and add some basic styling:

.calculator-app {
  width: 300px;
  margin: 50px auto;
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
  font-family: sans-serif;
}

.calculator-display {
  background-color: #f0f0f0;
  padding: 10px;
  text-align: right;
  font-size: 1.5em;
}

.calculator-keypad {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.calculator-keypad button {
  padding: 15px;
  font-size: 1.2em;
  border: 1px solid #ccc;
  background-color: #fff;
  cursor: pointer;
}

.calculator-keypad button:hover {
  background-color: #eee;
}

.operator {
  background-color: #f0f0f0;
}

.clear {
  background-color: #f00;
  color: white;
}

Finally, run the app using:

npm start

You should see a basic calculator layout in your browser, but it won’t do anything yet. That’s what we’ll build next.

Building the Calculator Components

Our calculator will consist of several components:

  • App.js: The main component, holding the overall structure.
  • CalculatorDisplay: Displays the current input and result.
  • CalculatorKeypad: Contains the buttons for numbers and operations.
  • CalculatorButton: A reusable button component.

Let’s start by creating the CalculatorDisplay component. Create a new file named CalculatorDisplay.js in the src directory:

import React from 'react';

function CalculatorDisplay({ value }) {
  return (
    <div className="calculator-display">{value}</div>
  );
}

export default CalculatorDisplay;

This component takes a value prop and displays it. Now, let’s modify App.js to use this component:

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

function App() {
  const [displayValue, setDisplayValue] = useState('0');

  return (
    <div className="calculator-app">
      <h1>React Calculator</h1>
      <CalculatorDisplay value={displayValue} />
      <div className="calculator-keypad">
        <button>7</button>
        <button>8</button>
        <button>9</button>
        <button className="operator">/</button>
        <button>4</button>
        <button>5</button>
        <button>6</button>
        <button className="operator">*</button>
        <button>1</button>
        <button>2</button>
        <button>3</button>
        <button className="operator">-</button>
        <button>0</button>
        <button>.</button>
        <button className="operator">=</button>
        <button className="operator">+</button>
        <button className="clear">C</button>
      </div>
    </div>
  );
}

export default App;

We’ve imported CalculatorDisplay and used it, passing the displayValue state. We also initialized the displayValue state with ‘0’. Next, we’ll create the CalculatorKeypad and CalculatorButton components.

Create CalculatorKeypad.js:

import React from 'react';
import CalculatorButton from './CalculatorButton';

function CalculatorKeypad({ handleButtonClick }) {
  return (
    <div className="calculator-keypad">
      <CalculatorButton value="7" onClick={handleButtonClick} />
      <CalculatorButton value="8" onClick={handleButtonClick} />
      <CalculatorButton value="9" onClick={handleButtonClick} />
      <CalculatorButton value="/" className="operator" onClick={handleButtonClick} />
      <CalculatorButton value="4" onClick={handleButtonClick} />
      <CalculatorButton value="5" onClick={handleButtonClick} />
      <CalculatorButton value="6" onClick={handleButtonClick} />
      <CalculatorButton value="*" className="operator" onClick={handleButtonClick} />
      <CalculatorButton value="1" onClick={handleButtonClick} />
      <CalculatorButton value="2" onClick={handleButtonClick} />
      <CalculatorButton value="3" onClick={handleButtonClick} />
      <CalculatorButton value="-" className="operator" onClick={handleButtonClick} />
      <CalculatorButton value="0" onClick={handleButtonClick} />
      <CalculatorButton value="." onClick={handleButtonClick} />
      <CalculatorButton value="=" className="operator" onClick={handleButtonClick} />
      <CalculatorButton value="+" className="operator" onClick={handleButtonClick} />
      <CalculatorButton value="C" className="clear" onClick={handleButtonClick} />
    </div>
  );
}

export default CalculatorKeypad;

Create CalculatorButton.js:

import React from 'react';

function CalculatorButton({ value, className, onClick }) {
  return (
    <button className={`calculator-button ${className || ''}`} onClick={() => onClick(value)}>
      {value}
    </button>
  );
}

export default CalculatorButton;

Now, modify App.js to use these new components and add the handleButtonClick function. This function will be responsible for updating the displayValue state when a button is clicked.

import React, { useState } from 'react';
import './App.css';
import CalculatorDisplay from './CalculatorDisplay';
import CalculatorKeypad from './CalculatorKeypad';

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

  const handleButtonClick = (buttonValue) => {
    switch (buttonValue) {
      case 'C':
        // Clear the calculator
        setDisplayValue('0');
        setWaitingForOperand(false);
        setOperator(null);
        setFirstOperand(null);
        break;
      case '=':
        // Perform calculation
        performCalculation();
        break;
      case '+':
      case '-':
      case '*':
      case '/':
        // Handle operator
        handleOperator(buttonValue);
        break;
      case '.':
        // Handle decimal
        handleDecimal();
        break;
      default:
        // Handle numbers
        handleNumber(buttonValue);
    }
  };

  const handleNumber = (number) => {
    if (waitingForOperand) {
      setDisplayValue(number);
      setWaitingForOperand(false);
    } else {
      setDisplayValue(displayValue === '0' ? number : displayValue + number);
    }
  };

  const handleOperator = (nextOperator) => {
    const value = parseFloat(displayValue);

    if (firstOperand === null) {
      setFirstOperand(value);
    } else if (operator) {
      const result = performCalculation();
      setFirstOperand(result);
      setDisplayValue(result.toString());
    }

    setWaitingForOperand(true);
    setOperator(nextOperator);
  };

  const handleDecimal = () => {
    if (!displayValue.includes('.')) {
      setDisplayValue(displayValue + '.');
    }
  };

  const performCalculation = () => {
    if (!operator || firstOperand === null) {
      return parseFloat(displayValue);
    }

    const secondOperand = parseFloat(displayValue);
    let result;

    switch (operator) {
      case '+':
        result = firstOperand + secondOperand;
        break;
      case '-':
        result = firstOperand - secondOperand;
        break;
      case '*':
        result = firstOperand * secondOperand;
        break;
      case '/':
        result = firstOperand / secondOperand;
        break;
      default:
        result = secondOperand;
    }

    return result;
  };

  return (
    <div className="calculator-app">
      <h1>React Calculator</h1>
      <CalculatorDisplay value={displayValue} />
      <CalculatorKeypad handleButtonClick={handleButtonClick} />
    </div>
  );
}

export default App;

In this updated App.js:

  • We’ve added CalculatorKeypad and passed the handleButtonClick function as a prop.
  • The handleButtonClick function now handles different button types (numbers, operators, clear, equals, decimal).
  • We’ve implemented the logic for handling numbers, operators, the decimal point, and the clear button.
  • We’ve added state variables: waitingForOperand, operator, and firstOperand, to manage the calculation logic.
  • The performCalculation function now performs the actual calculation based on the selected operator and operands.

Now, your calculator should be functional! Click the buttons and see the display update.

Handling User Input and State Updates

The core of the calculator’s functionality lies in how it handles user input and updates its state. Let’s break down the key parts:

1. The handleButtonClick Function

This function acts as the central hub for all button clicks. It receives the button’s value as an argument and uses a switch statement to determine the action to take. This is also where we implement the logic for clearing the display, handling operators, decimals, and numbers.

2. State Variables

  • displayValue: Stores the value currently displayed on the calculator.
  • waitingForOperand: A boolean flag that indicates whether the calculator is waiting for the user to enter the second operand after an operator has been selected.
  • operator: Stores the currently selected operator (+, -, *, /).
  • firstOperand: Stores the first number entered by the user before an operator is selected.

3. Handling Numbers (handleNumber)

When a number button is clicked, the handleNumber function is called. It checks if the calculator is waiting for the second operand (waitingForOperand). If it is, the display is updated with the new number. Otherwise, the new number is appended to the existing display value.

4. Handling Operators (handleOperator)

When an operator button is clicked, the handleOperator function is called. It first converts the current display value to a number. Then, it checks if there is a first operand already entered. If not, it sets the current display value as the first operand. If there is a first operand, it performs the previous calculation. Finally, it sets the operator and sets waitingForOperand to true.

5. Handling the Decimal Point (handleDecimal)

The handleDecimal function is responsible for adding the decimal point to the display. It checks if the current display value already includes a decimal point. If not, it appends the decimal point.

6. Performing Calculations (performCalculation)

This function performs the actual calculation. It’s called when the equals button is clicked or when a new operator is selected after a previous operator has been selected. It retrieves the first and second operands, performs the calculation based on the selected operator, and returns the result.

Common Mistakes and How to Fix Them

When building this calculator, you might encounter some common issues. Here’s a breakdown and how to resolve them:

1. Incorrect State Updates

Problem: The display doesn’t update correctly when you click buttons. The state might not be updating, or the component isn’t re-rendering.

Solution:

  • Ensure you’re using useState correctly to manage the state.
  • Use the set... functions (e.g., setDisplayValue) to update the state.
  • Double-check that you’re passing the correct props to child components, and that the child components are correctly using those props.

2. Operator Precedence Issues

Problem: The calculator doesn’t follow the correct order of operations (PEMDAS/BODMAS).

Solution:

  • This is a more advanced feature. You’ll need to modify the performCalculation function to handle the order of operations correctly. You might need to parse the entire expression and apply the operations in the correct sequence. This could involve using a library or writing a function to handle operator precedence.

3. Floating-Point Precision Errors

Problem: You might get unexpected results with floating-point numbers (e.g., 0.1 + 0.2 != 0.3).

Solution:

  • This is a common issue with floating-point arithmetic. Use the toFixed() method to limit the number of decimal places for display.
  • For more complex calculations, consider using a library specifically designed for handling precise decimal arithmetic.

4. Division by Zero Errors

Problem: The calculator crashes or displays an error when dividing by zero.

Solution:

  • Add a check in the performCalculation function to handle division by zero. Display an error message or prevent the calculation from happening.

5. Styling Issues

Problem: The calculator’s appearance doesn’t match your expectations.

Solution:

  • Review your CSS rules and make sure they are applied correctly.
  • Use browser developer tools to inspect the elements and see how the styles are being applied.
  • Use more specific CSS selectors to override default styles or apply your desired styles.

Enhancements and Next Steps

Once you have a working calculator, you can add several enhancements:

  • Memory Functions: Add memory recall, memory save, and memory clear buttons.
  • Advanced Operations: Implement more advanced mathematical functions (e.g., square root, trigonometric functions).
  • Error Handling: Improve error handling and display more informative error messages.
  • Theme Switching: Allow users to switch between different calculator themes.
  • Keyboard Support: Add keyboard event listeners to allow users to use the calculator with their keyboard.
  • Testing: Write unit tests for your components and functions to ensure they work as expected.

Key Takeaways

This React calculator project demonstrates several core concepts in React development. You’ve learned how to structure a React application into components, manage state using useState, handle user interactions through event listeners, and perform calculations based on user input. You’ve also seen how to break down a complex UI into smaller, reusable components, making your code more organized and maintainable. This project serves as a solid foundation for building more complex React applications.

Through this project, you’ve not only built a functional calculator but also strengthened your understanding of fundamental React principles. Remember that practice is key. Try experimenting with different features, refactoring the code, and exploring the enhancements suggested above. This hands-on experience will significantly boost your React skills and prepare you for tackling more advanced projects. The journey of a thousand lines of code begins with a single calculation, and now you have the tools to make it happen!

More posts