React & JS repl

React-repl.md

React & JS repl

https://jscomplete.com/repl/

ES 5/6/7/8

    


class SayHello extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            message: 'Hello!'
        };
        // constructor bind(this)
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick() {
        alert(this.state.message);
    }
    // WARNING: this syntax is experimental! Using an arrow here binds the method:
    // ES7 bind(this)
    ES7_handleClick = () => {
        alert(this.state.message);
    };
    render() {
        return (
            <div>
                <button onClick={this.handleClick}>
                    ES6 constructor
                </button>
                {/*ES6 bind(this) onClick={(e) => this.handleClick(e)} */}
                <button onClick={() => this.handleClick()}>
                    ES6 Arrow Function
                </button>
                <button onClick={this.ES7_handleClick}>
                    ES7 class properties
                </button>
            </div>
        );
    }
}

const app = `mountNode`;

// ReactDOM.render(component, app_container[, callback])
const callback_func = (e) => {
    console.log(`e = `, e);
};

ReactDOM.render(<SayHello />, mountNode, callback_func);