直接在 HTML 中使用 React

在 <head> 中引入 CDN


html source case
html
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<body> 中加入 root


html source case
html
<div id="root"></div>

在 </body> 前增加 <script></script> 區塊


html source case
html
<script type="text/babel">
    // React 邏輯寫在這裡
</script>

在 script 中快樂的寫 React


html source case
html
<script type="text/babel">
    const { useState } = React;

    function MyComponent() {
        const [status, setStatus] = useState("正在學習 React");

        return (
            <div>
                <h1>狀態：{status}</h1>
                <button onClick={() => setStatus("已經學會了！")}>
                    點我更新
                </button>
            </div>
        );
    }

    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(<MyComponent />);
</script>

直接在 HTML 中使用 React (CDN 版)

直接在 HTML 中使用 React

分享這篇技術心得 / Share

React Router 核心指南

延伸閱讀 / Related Cases

useEffect：與外部世界互動的橋樑

useRef：掌握 React 的「儲物櫃」與 DOM 操控