import * as React from "react";
import { Component } from "react";
import "./App.css";
import logo from "./assets/react.svg";

interface AppProps { }
interface AppState {
	count: number;
}

export default class App extends Component<AppProps, AppState> {
	constructor(props: AppProps) {
		super(props);
		this.increase = this.increase.bind(this);
		this.decrease = this.decrease.bind(this);
		this.state = {
			count: 0
		};
	}

	private decrease() {
		this.setState({
			count: this.state.count - 1
		});
	}

	private increase() {
		this.setState({
			count: this.state.count + 1
		});
	}

	render() {
		var { count } = this.state;
		return <>
			<h1>Hello React16!</h1>
			<div>
				<img src={logo} alt="react" />
			</div>
			<div>
				<button type="button" onClick={this.decrease}>-</button>
				{count}
				<button type="button" onClick={this.increase}>+</button>
			</div>
		</>;
	}
}