Import/Export in VSCode Javascript for React – Blancer.com Tutorials and projects

I’m following a tutorial on React course.

Currently, I’m trying to make a react info website. I’m trying to import a component of react but it does not load on the ‘live’ website. (I have a live server extension added on VSCode)

Code:

HTML:

<html>
    <head>
        <link rel="stylesheet" href="index.css">
        <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>
    </head>
    <body>
        
        <div id="root"></div>
        <div id="root2"></div>
        <script src="index.js" type="text/babel"></script>
    </body>
</html>

JavaScript:

import { Header } from './Header'

function Page() {
    return (
        <div>
            <Header />
            <MainContent />
            <Footer />
        </div>
    )
}

function MainContent() {
    return ( Listed info in HTML format
 )}

function Footer() {
    return (footer tag in HTML format
    )
}

ReactDOM.render(<Page />, document.getElementById("root"))

React/Javascript component:

export function Header() {
    return (
        <header>
            <nav className="nav">
                <img className="nav-logo" src="../React info web/images/react_logo.png" />
                <ul className="nav-items">
                    <li>Pricing </li>
                    <li>About</li>
                    <li>Contact</li>
                </ul>
            </nav>
        </header>
    )
}

I’ve noticed that when I remove ‘import’ and ” in ‘Javascript’. The website loads up perfectly.
I’m utterly confused and need assistance. I tried combing through the documentation and
still can’t figure out what wrong