Requirement 1: basic checkout system Apple costs '60c'and Banana costs '15c'. In React JS

Try this. This will create two labels, two textboxes and one button. Whatever you enter in two textboxes, will add up and show as alert on the click of button.

class App extends Component {
  state = {
    number1: "",
    number2: "",
  };

  connect = async () => {
    //alert(this.state.number1);
    //alert(this.state.number2);
    var result = parseInt(this.state.number1) + parseInt(this.state.number2);
    alert(result);
  };
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <p>
            <label>Apple Price:</label>
            <input
              type="number"
              id="input"
              value={this.state.number1}
              onChange={(e) => this.setState({ number1: e.target.value })}
            />
            <label>Banana Price:</label>
            <input
              type="number2"
              id="input"
              value={this.state.number2}
              onChange={(e) => this.setState({ number2: e.target.value })}
            />
            <button type="submit" onClick={() => this.connect()}>
              Button
            </button>
          </p>
        </header>
      </div>
    );
  }
}

ReactDOM.render(
  <Router>
    <App />
  </Router>,
  document.getElementById("root")
);