Test2_Components.cshtml

@{
    ViewBag.Title = "Test2_Components";
}

<h2>Test2_Components</h2>
<div id="app1"> </div>
<div id="app2"> </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">

    function ReactComponent1() {
        return <p>React Component 1, from function</p>;
    }


    class ReactComponent2 extends React.Component {
        render() {
            return <p>React Component 2, from class</p>;
        }
    }


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

    ReactDOM.render(
    <ReactComponent2 />,
    document.getElementById("app2")
    )

</script>