Create a Simple Calculator with React and JavaScript

React is an easy to use JavaScript framework that lets us create front end apps.

In this article, we’ll look at how to create a simple calculator with React and JavaScript.

Create the Project

We can create the React project with Create React App.

To install it, we run:

npx create-react-app simple-calculator

with NPM to create our React project.

Also, we’ve to install the mathjs library so that we can evaluate math expressions in strings easily.

To install it, we run:

npm i mathjs

Create the Calculator App

To create the calculator app, we write:

import { useState } from "react";
import { evaluate } from "mathjs";

export default function App() {
  const [expression, setExpression] = useState("");

  const submit = (e) => {
    e.preventDefault();
    setExpression((ex) => evaluate(ex));
  };

  return (
    <div className="App">
      <style>
        {`button {
          width: 20px
        }`}
      </style>
      <div>{expression}</div>
      <form onSubmit={submit}>
        <div>
          <button type="button" onClick={() => setExpression((ex) => `${ex}+`)}>
            +
          </button>
          <button type="button" onClick={() => setExpression((ex) => `${ex}-`)}>
            -
          </button>
          <button type="button" onClick={() => setExpression((ex) => `${ex}*`)}>
            *
          </button>
          <button type="button" onClick={() => setExpression((ex) => `${ex}/`)}>
            /
          </button>
        </div>
        <div>
          <button type="button" onClick={() => setExpression((ex) => `${ex}.`)}>
            .
          </button>
          <button type="button" onClick={() => setExpression((ex) => `${ex}9`)}>
            9
          </button>
          <button type="button" onClick={() => setExpression((ex) => `${ex}8`)}>
            8
          </button>
          <button type="button" onClick={() => setExpression((ex) => `${ex}7`)}>
            7
          </button>
        </div>
        <div>
          <button type="button" onClick={() => setExpression((ex) => `${ex}6`)}>
            6
          </button>
          <button type="button" onClick={() => setExpression((ex) => `${ex}5`)}>
            5
          </button>
          <button type="button" onClick={() => setExpression((ex) => `${ex}4`)}>
            4
          </button>
          <button type="button" onClick={() => setExpression((ex) => `${ex}3`)}>
            3
          </button>
        </div>
        <div>
          <button type="button" onClick={() => setExpression((ex) => `${ex}2`)}>
            2
          </button>
          <button type="button" onClick={() => setExpression((ex) => `${ex}1`)}>
            1
          </button>
          <button type="button" onClick={() => setExpression((ex) => `${ex}0`)}>
            0
          </button>
          <button type="submit">=</button>
        </div>
        <div>
          <button
            type="button"
            style={{ width: 50 }}
            onClick={() => setExpression("")}
          >
            Clear
          </button>
        </div>
      </form>
    </div>
  );
}

We have the expression state which we create with the useState hook.

It’s set to an empty string as its initial value.

Then we return the JSX code with the keypad and the expression display.

We also have a style tag to set button elements to 20px width.

Most buttons except the = button all call setExpression to append a character to expression .

The callback has the ex parameter which is the current value of expression .

We return the new value for expression .

The form element has the onSubmit prop set to the submit function.

In submit , we call e.preventDefault() to prevent server-side form submission.

Then we call setExpression with a callback to return the returned value from mathjs ‘s evaluate method, which returns the evaluated value of the expression string.

The Clear button sets expression back to an empty string when we click it.

Conclusion

We can create a simple calculator easily with React and JavaScript.