import React from 'react';
import ReactDOM from 'react-dom';

import 'font-awesome/css/font-awesome.min.css';
import './index.css';
import './index.scss';

class Component extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            name: 'Yuusuke',
            age: 18
        };
    }

    handleClick() {
        this.setState({
            age: this.state.age + 1
        })
    }

    onValueChange(e) {
        this.setState({
            age: e.target.value
        })
    }

    render() {
        return (
            <div>
                <h1>I am {this.state.name}</h1>
                <p>I am {this.state.age} years old!</p>
                <p>
                    <button onClick={() => {
                        this.handleClick
                    }}>年齡加一
                    </button>
                </p>
                <p>
                    <button onClick={() => {
                        this.handleClick()
                    }}>年齡加一
                    </button>
                </p>
                <p>
                    <button onClick={(e) => {
                        this.handleClick(e)
                    }}>年齡加一
                    </button>
                </p>
                <p><input type="text" onChange={(e) => {
                    this.onValueChange(e)
                }}/></p>
            </div>
        );
    }
}

class App extends React.Component {
    render() {
        return (
            <div className="">
                <h1>APP</h1>
                <hr/>
                <Component/>
            </div>
        );
    }
}

ReactDOM.render(
    <div>
        {/*<Component></Component>*/}
        <App></App>
    </div>,
    document.getElementById('app')
);