簡單使用: 2025年12月4日星期四

2025年12月4日星期四

筆記使用Babel開發測試React

僅測試時使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用babel測試開發React</title>
    <!-- React 和 ReactDOM（開發版本） -->
    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <!-- Babel Standalone：讓瀏覽器即時編譯 JSX -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <!-- axios -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <!-- bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
</head>
<body>
    <div id="root"></div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
        crossorigin="anonymous"></script>
    <script type="text/babel">
        const App = () => {
            const { useState } = React;
            const [count, setCount] = useState(0);
            const handleClick = () => {
                setCount(count + 1);
            }
            return (
                <>
                    <h5>{count}</h5>
                    <button className="btn btn-primary" onClick={handleClick}>+1</button>
                </>
            )
        }
        ReactDOM.createRoot(document.querySelector('#root')).render(<App />);
    </script>
</body>
</html>

2025年12月4日 星期四

筆記 使用Babel開發測試React

2025年12月4日星期四

筆記使用Babel開發測試React