index.html

<!DOCTYPE html> 
<html>
    <head>
        <meta charset="UTF-8" />
        <title>React Tutorial</title>
        <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
        <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    </head>
    <body>
        <div id="app">
        </div>
        <script type="text/babel">
            class App extends React.Component{
                state = {
                    name: 'Ceci',
                    age: 25
                }
                handleClick = (e) => {
                    //arrow funtions takes the value of this to be the component it is in and bind it
                    //this will also let you change the state inside these type of functions
                    // console.log(e.target);
                    this.setState({
                        name: 'yoshi'
                    });
                    console.log(this.state);
                }
                handleMouseOver = (e) =>{
                    console.log(e.target, e.pageX);
                }
                handleCopy = (e) =>{
                    console.log('Try being original for once');
                }

                render(){
                    return (
                        <div className="app-content">
                            <h1>Hi</h1>    
                            <p>My name is: { this.state.name }</p>
                            <button onClick={this.handleClick}>click me </button>
                            <button onMouseOver={this.handleMouseOver}>hover me</button>
                            <p onCopy={this.handleCopy}>What we think, we become</p>
                        </div>
                    )
                }
            }

            ReactDOM.render(
                <App />, document.getElementById("app")
            )
        </script>
    </body>
</html>