React

by Vasilii Chugunov

HTML

<div id="root"></div>

React

const initialState = {
    currentValue : "0",
    currentOperation: "none",
    accumulatedValue: "0"
};

class CalculationField extends React.Component {

    render() {
        return (
            <div className={"input"}>
                <p>{this.props.currentValue}</p>
            </div>
        );
    }
}

class Button extends React.Component {
    clicked(){
        this.props.handleClick(this.props.value);
    }
    render() {
        return (
            <td colSpan={this.props.colspan} className={this.props.className} >
                <button onClick={this.clicked.bind(this)}> {this.props.value}</button>
            </td>
        );
    }
}

class ButtonPanel extends React.Component {
    render() {
        return (
            <table className={"controls"}>
                <tbody>
                <tr>
                    <Button handleClick={this.props.buttonClicked} className={"button-grey"} value={"AC"}/>
                    <Button handleClick={this.props.buttonClicked} className={"button-grey"} value={"+/-"}/>
                    <Button handleClick={this.props.buttonClicked} className={"button-grey"} value={"%"}/>
                    <Button handleClick={this.props.buttonClicked} className={"button-orange"} value={"Ă·"}/>
                </tr>
                <tr>
                    <Button handleClick={this.props.buttonClicked} className={"button-grey"} value={"7"} />
                    <Button handleClick={this.props.buttonClicked} className={"button-grey"} value={"8"} />
                    <Button handleClick={this.props.buttonClicked} className={"button-grey"} value={"9"} />
                    <Button handleClick={this.props.buttonClicked} className={"button-orange"} value={"x"}/>
                </tr>

                <tr>
                    <Button handleClick={this.props.buttonClicked} className={"button-grey"} value={"4"} />
                    <Button handleClick={this.props.buttonClicked} className={"button-grey"} value={"5"} />
  ...