ブラウザだけで動作するReactのサンプル

サンプル

以下のドキュメントの サンプル を参考に作成したサンプル

Reactをブラウザだけで動作させるサンプルは、このページになります。 また、このソースは以下になります。 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>React test</title>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

    <!-- Don't use this in production: -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>

<body>
    <div id="app"></div>
    <div id="basic-event"></div>
    <div id="event-with-method"></div>
    <div id="multiple-event"></div>

    <script type="text/babel">
        ReactDOM.render(
            <h1>Reactのテスト</h1>,
            document.getElementById('app')
        );

        const Button1 = function() {
            const [ counter, setCounter ] = React.useState(0);
            return (
                <>
                    <button onClick={() => setCounter(counter + 1)} >ボタン1</button>
                    <p>ボタン1のクリック数 {counter} 回</p>
                </>
            );
        }
        ReactDOM.render(
          <Button1 />,
          document.getElementById('basic-event')
        );

        const Button2 = function() {
            const handleClick = (event) => {
                alert('Hello ' + '!')
                if (event) {
                    alert(event.target.tagName)
                }
            }
            return (
                <>
                    <button onClick={handleClick} >ボタン2</button>
                    <br /><br />
                </>
           )
        }
        ReactDOM.render(
            <Button2 />,
            document.getElementById('event-with-method')
        );
    
        const Button3 = function() {
            const [ counter, setCounter ] = React.useState(0);
            const [ sum, setSum ] = React.useState(0);

            const one = () => {
                setCounter(counter + 1);
            }
            const two = () => {
                setSum(sum + 3);
            }
            const handleClick = () => {
                one();
                two();
            }
            return (
                <>
                    <button onClick={handleClick} >ボタン3 (+3)</button>
                    <p>ボタン3のクリック数 { counter } 回。 合計は { sum }</p>
                </>
            );
        }
        ReactDOM.render(
            <Button3 />,
            document.getElementById('multiple-event')
        );
    </script>
</body>

</html>

Vue 3 で同じ機能を実装したサンプルは、以下になります。