React script not loading onto webpage?-CodePudding

My react script won't upload onto my webpage, it doesn't show up at all. When I check the console, it says Uncaught ReferenceError: require is not defined but I don't have require() anywhere in my script. Additionally, this isn't the only webpage where my react script won't upload (and that other webpages console didn't show that message). Am I missing something? I did it the same way for my footer and that worked, but this isn't.

import React, { useState } from "react";

function TicketCounter() {

    const [counter, setCounter] = useState(0);

    const incrementCounter = () => {
        setCounter(counter   1);
    };

    const decrementCounter = () => {
        if (counter !== 0) {
            setCounter(counter - 1);
        }
    };
    
    return (
        <div className="ticket-options">
            <div className="option-adult">
                <p>Adult Tickets (16 )</p>
                <div className="ticket-amount">
                    <button
                        className="arrow-up"
                        onClick={incrementCounter}>
                        <img src="images/arrowup.png" alt="arrow pointing upwards"/>
                    </button>
                    <span className="number">
                        textContent = {counter}
                    </span>
                    <button
                        className="arrow-down"
                        onClick={decrementCounter}>
                        <img src="images/arrowdown" alt="arrow pointing downwards"/>
                    </button>
                </div>
            </div>
    
            <div className="option-minor"> 
                <p>Minor Tickets (15-)</p>
                <div className="ticket-amount">
                    <img 
                        src={'../images/arrow.png'} 
                        alt="arrow up"
                        className="arrow-up"
                        onClick={incrementCounter}
                    />
                    <span className="number">
                        textContent = {counter}
                    </span>
                    <img 
                        src={'../images/arrow.png'} 
                        alt="arrow down"
                        className="arrow-down"
                        onClick={decrementCounter}
                    />
                </div>
            </div>
        </div>
    )
}

ReactDOM.render(<TicketCounter />, document.querySelector(".react-insert"));

And just in case, this is what I have in the html head:

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

And what I have in the html, end of body:

<script src="/scripts/footer.js" type="text/babel"></script>
<script src="/scripts/tickets.js" type="text/babel"></script>

And I have <div ></div> in my main.

CodePudding user response：

In this case, you do not need this:

import React, { useState } from "react";

you can get useState by destructuring React directly;

const { useState } = React;

By including react dev script in the HTML, you can access React directly/globally even from the developer console.

But just keep in mind that Babel Standalone is meant to be a convenient tool for debugging and discussing code online (such as on Stack Overflow in Stack Snippets) not for production purposes. You can read the documentation here.