lecture source code/src6/counter.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
        <script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>
        <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
        <title>Counter</title>
    </head>
    <body>
        <div id="app"></div>

        <script type="text/babel">

            function App() {

                const [count, setCount] = React.useState(0);

                function updateCount() {
                    setCount(count + 1);
                }

                return (
                    <div>
                        <h1>{count}</h1>
                        <button onClick={updateCount}>Count</button>
                    </div>
                );
            }

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