Test5_Event.cshtml

@{
    ViewBag.Title = "Test5_Event";
}

<h2>Test5_Event</h2>
<div id="app1"> </div>

@* React *@
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>

<script type="text/babel">


   
    class ReactComponent1 extends React.Component {

        constructor(props) {
            super(props);
            this.state = { counter: 0 };

            @* Прикрепление текущего объекта к this в функции обработки *@
            this.onMouseOver = this.onMouseOver.bind(this);
        }

        onMouseOver(e){
            console.log(e);
            this.setState({counter: this.state.counter+1});
        }
    
        render() {
            return (
            <div>
                <p>Counter: { this.state.counter } </p>

                <div onMouseOver={this.onMouseOver}>Move To Me</div>
            </div>
            );
        }
    }


    ReactDOM.render(
    <ReactComponent1 />,
    document.getElementById("app1")
    )

</script>