3. พิมพ์โค้ดต่อไปนี้ลงไปในไฟล์ src/App.js ในโฟลเดอร์แอปที่สร้างในขั้นตอนที่ 1 จากนั้นบันทึกไฟล์ให้เรียบร้อย (ระวังเรื่องตัวพิมพ์ใหญ่และตัวพิมพ์เล็กของชื่อตัวแปรด้วย)

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

class App extends React.Component {
    static num1 = 0;
    static num2 = 0;
    static signSelect = "";
    static isClearTextBoxNext = false;

    constructor(props) {
        super(props);
        this.state = {button: "", num: ""};
    }

    submitHandler = (event) => {
        event.preventDefault();

        let numText = this.state.num;
        let inputText = this.state.button;

        if (inputText === "plus") {
            this.num1 = parseFloat(numText);
            this.signSelect = "+";
            this.isClearTextBoxNext = true;
        } else if (inputText === "minus") {
            this.num1 = parseFloat(numText);
            this.signSelect = "-";
            this.isClearTextBoxNext = true;
        } else if (inputText === "mul") {
            this.num1 = parseFloat(numText);
            this.signSelect = "*";
            this.isClearTextBoxNext = true;
        } else if (inputText === "div") {
            this.num1 = parseFloat(numText);
            this.signSelect = "/";
            this.isClearTextBoxNext = true;
        } else if (inputText === "equal") {
            this.num2 = parseFloat(numText);

        if (this.signSelect === "+"){
        	numText = this.num1 + this.num2;
        } else if (this.signSelect === "-") {
        	numText = this.num1 - this.num2;
        } else if (this.signSelect === "*") {
        	numText = this.num1 * this.num2;
        } else if (this.signSelect === "/") {
        	if (this.num2 === 0) {
        		numText = "Cannot Divide"
        	} else {
        		numText = this.num1 / this.num2;
        	}
        }

            this.isClearTextBoxNext = true;
        } else if (inputText === "clear") {
            this.num1 = 0;
            this.num2 = 0;
            this.signSelect = "";
            this.isClearTextBoxNext = false;
            numText = "";
        } else {
            if (this.isClearTextBoxNext) {
                numText = "";
                this.isClearTextBoxNext = false;
            }
            numText += inputText;
        }

        this.setState({num: numText});console.log(this.state);
    }

    render() {
      return (
      <div>
        <h1>My calculator</h1>
        <form onSubmit={this.submitHandler}>
        <input type="text" name="num" value={this.state.num || ''} />
        <br/><br/>
        <button type="submit" onClick={() => (this.state.button = "7")} value="7">7</button>
        <button type="submit" onClick={() => (this.state.button = "8")} value="8">8</button>
        <button type="submit" onClick={() => (this.state.button = "9")} value="9">9</button>
        <button type="submit" onClick={() => (this.state.button = "div")} value="div">÷</button>
        <br/>
        <button type="submit" onClick={() => (this.state.button = "4")} value="4">4</button>
        <button type="submit" onClick={() => (this.state.button = "5")} value="5">5</button>
        <button type="submit" onClick={() => (this.state.button = "6")} value="6">6</button>
        <button type="submit" onClick={() => (this.state.button = "mul")} value="mul">×</button>
        <br/>
        <button type="submit" onClick={() => (this.state.button = "1")} value="1">1</button>
        <button type="submit" onClick={() => (this.state.button = "2")} value="2">2</button>
        <button type="submit" onClick={() => (this.state.button = "3")} value="3">3</button>
        <button type="submit" onClick={() => (this.state.button = "minus")} value="minus">-</button>
        <br/>
        <button type="submit" onClick={() => (this.state.button = "0")} value="0" style={{width: "128px"}}>0</button>
        <button type="submit" onClick={() => (this.state.button = ".")} value=".">.</button>
        <button type="submit" onClick={() => (this.state.button = "plus")} value="plus">+</button>
        <br/>
        <button type="submit" onClick={() => (this.state.button = "clear")} value="clear" style={{width: "128px"}}>Clear</button>
        <button type="submit" onClick={() => (this.state.button = "equal")} value="equal" style={{width: "128px"}}>=</button>
        </form>
      </div>
      );
    }
}

export default App;

4. พิมพ์คำสั่ง npm start เพื่อรันแอป หน้าเว็บ http://localhost:3000 จะถูกเปิดขึ้นมาซึ่งถ้าทุกอย่างถูกต้องจะได้หน้าเว็บเครื่องคิดเลขดังภาพ