'How to import child component into parent when using React with CDN?

I have created a simple HTML file, and added React into it through the CDN links.

    <html>
    <head>
        <title>React App</title>

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

        <script type="text/babel" src="App.js"></script>
        <script type="text/babel" src="Button.js"></script>   <-- I don't want to include this in the HTML file, rather it should be included in App.js
    </head>
    <body>
    <div id="root"></div>

        <script type="text/babel">
            ReactDOM.render(<App />, document.getElementById('root'));
        </script>

    </body>
    </html>

I have created two React components:

App.js

const App = () => {
    return (
        <Button/>
        );
}

Button.js

const Button = () => {
    return (
        <input type="button" value="Click Me" />
    );
}

This works perfectly fine. However, I don't want to include <script type="text/babel" src="Button.js"></script> into the HTML file, rather I am trying to find a way to include Button.js component in the App.js and I should only add <script type="text/babel" src="App.js"></script> in the HTML file.

I tried various options like using import/export, require, but seems non of them are working. Appreciate any help around this.

javascripthtmlreactjsbabeljs


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions