remake the project below with react js stack

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Simple Calculator</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="calculator">
    <!-- New div to display the previous calculation -->
    <div class="calculator-previous"></div>
    <input type="text" class="calculator-screen" value="" disabled />

    <div class="calculator-keys">
      <!-- First row: AC, %, /, backspace -->
      <button type="button" class="all-clear" value="all-clear">AC</button>
      <button type="button" value="%">%</button>
      <button type="button" class="operator" value="/">÷</button>
      <button type="button" class="backspace" value="backspace">⌫</button>

      <!-- Second row: 7, 8, 9, * -->
      <button type="button" value="7">7</button>
      <button type="button" value="8">8</button>
      <button type="button" value="9">9</button>
      <button type="button" class="operator" value="*">×</button>

      <!-- Third row: 4, 5, 6, - -->
      <button type="button" value="4">4</button>
      <button type="button" value="5">5</button>
      <button type="button" value="6">6</button>
      <button type="button" class="operator" value="-">−</button>

      <!-- Fourth row: 1, 2, 3, + -->
      <button type="button" value="1">1</button>
      <button type="button" value="2">2</button>
      <button type="button" value="3">3</button>
      <button type="button" class="operator" value="+">+</button>

      <!-- Fifth row: 0, decimal point, Save, = -->
      <button type="button" value="0">0</button>
      <button type="button" class="decimal" value=".">.</button>
      <button type="button" class="save" value="Save">Save</button>
      <button type="button" class="equal-sign operator" value="=">=</button>
    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>
```

```css
/* General Styles */
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f3f3f3;
}

.calculator {
  width: 400px;
  margin: 100px auto;
  border: 1px solid #ccc;
  border-radius: 10px;
  overflow: hidden;
}

/* Previous Calculation Display */
.calculator-previous {
  width: 100%;
  height: 40px;
  background-color: #1a1a1a;
  color: #aaa;
  text-align: right;
  font-size: 1.5rem;
  padding-right: 20px;
  padding-left: 10px;
  box-sizing: border-box;
  overflow: hidden;
}

/* Screen Styles */
.calculator-screen {
  width: 100%;
  height: 80px;
  border: none;
  background-color: #252525;
  color: #fff;
  text-align: right;
  font-size: 4rem;
  padding-right: 20px;
  padding-left: 10px;
  box-sizing: border-box;
}

/* Button Styles */
.calculator-keys {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

button {
  height: 80px;
  font-size: 2rem;
  border: 1px solid #ddd;
  background-color: #e0e0e0;
  color: #333;
  cursor: pointer;
}

button:hover {
  background-color: #d0d0d0;
}

.operator {
  background-color: #ff9500;
  color: #fff;
}

.all-clear, .backspace {
  background-color: #ff3b30;
  color: #fff;
}

.equal-sign {
  background-color: #007aff;
  color: #fff;
}

/* Style the "Save" button */
.save {
  background-color: #a9a9a9;
  color: #fff;
}
```

```js
// Get all the keys from the document
const keys = document.querySelector('.calculator-keys');
const screen = document.querySelector('.calculator-screen');
const previousDisplay = document.querySelector('.calculator-previous'); // New element for previous calculation

let currentInput = '0';
let previousInput = '';
let operator = null;
let waitingForSecondOperand = false;
let savedNumber = null; // Variable to store the saved number
let previousCalculation = ''; // Variable to store the previous calculation expression

// Add event listener to the keys
keys.addEventListener('click', event => {
  const { target } = event;
  const { value } = target;

  // If the clicked element is not a button, exit function
  if (!target.matches('button')) {
    return;
  }

  switch (value) {
    case '+':
    case '-':
    case '*':
    case '/':
      handleOperator(value);
      break;
    case '=':
      calculate();
      break;
    case 'all-clear':
      resetCalculator();
      break;
    case '.':
      inputDecimal(value);
      break;
    case 'backspace':
      backspace();
      break;
    case '%':
      inputPercent();
      break;
    case 'Save':
      saveNumber();
      break;
    default:
      if (Number.isInteger(parseFloat(value))) {
        inputNumber(value);
      }
  }

  updateScreen();
});

// Functions to handle inputs and calculations
function updateScreen() {
  screen.value = currentInput;
  previousDisplay.textContent = previousCalculation; // Update previous calculation display
}

function inputNumber(number) {
  if (waitingForSecondOperand) {
    currentInput = number;
    waitingForSecondOperand = false;
  } else {
    currentInput = currentInput === '0' ? number : currentInput + number;
  }
}

function inputDecimal(dot) {
  if (waitingForSecondOperand) {
    currentInput = '0.';
    waitingForSecondOperand = false;
    return;
  }

  if (!currentInput.includes(dot)) {
    currentInput += dot;
  }
}

function handleOperator(nextOperator) {
  const inputValue = parseFloat(currentInput);

  if (operator && waitingForSecondOperand) {
    operator = nextOperator;
    return;
  }

  if (previousInput === '') {
    previousInput = inputValue;
  } else if (operator) {
    let result = performCalculation[operator](previousInput, inputValue);
    result = roundResult(result);
    currentInput = String(result);
    previousInput = result;
  }

  operator = nextOperator;
  waitingForSecondOperand = true;
}

const performCalculation = {
  '+': (firstOperand, secondOperand) => firstOperand + secondOperand,
  '-': (firstOperand, secondOperand) => firstOperand - secondOperand,
  '*': (firstOperand, secondOperand) => firstOperand * secondOperand,
  '/': (firstOperand, secondOperand) => firstOperand / secondOperand,
};

function calculate() {
  const inputValue = parseFloat(currentInput);

  if (operator && !waitingForSecondOperand) {
    let result = performCalculation[operator](previousInput, inputValue);
    result = roundResult(result);

    // Store the previous calculation expression
    previousCalculation = `${previousInput} ${operator} ${inputValue} =`;

    currentInput = String(result);
    previousInput = '';
    operator = null;
    waitingForSecondOperand = false;
  }
}

function resetCalculator() {
  currentInput = '0';
  previousInput = '';
  operator = null;
  waitingForSecondOperand = false;
  previousCalculation = '';
}

function backspace() {
  if (currentInput.length > 1) {
    currentInput = currentInput.slice(0, -1);
  } else {
    currentInput = '0';
  }
}

// Function to handle percentage calculations
function inputPercent() {
  const value = parseFloat(currentInput);
  const result = value / 100;
  currentInput = String(roundResult(result));
}

// Function to save the current number or recall the saved number
function saveNumber() {
  if (savedNumber === null) {
    // Save the current number
    savedNumber = parseFloat(currentInput);
    previousCalculation = `Saved: ${savedNumber}`;
  } else {
    // Recall the saved number
    if (waitingForSecondOperand) {
      previousInput = savedNumber;
      waitingForSecondOperand = false;
    } else {
      currentInput = String(savedNumber);
    }
    previousCalculation = `Recalled: ${savedNumber}`;
  }
}

function roundResult(number) {
  return parseFloat(number.toFixed(10));
}
```