Unable to import JS files with a project using CDN links (react, reactDOM)

I want to import subfiles (Header.js; Footer.js, MainContent.js) into index.js instead of coding similar subfunctions in index.js file. I put the functions in index.js and it worked but splitting the file and importing it didn't. When I write the import, it doesn't work and doesn't show the elements. There ara list of my folders and code.

(index.js)

  import Header from "./Header";
    import Footer from "./Footer";
    import MainContent from "./MainContent";
    
    function App() {
      return (
        <div>
          <Header />
          <MainContent />
          <Footer />
        </div>
      );
    }
    
    ReactDOM.render(<App />, document.getElementById("root"));

(index.html)

  <html>
      <head>
        <link rel="stylesheet" href="style.css" />
        <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>
        <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
      </head>
      <body>
        <div id="root"></div>
        <script src="index.js" type="text/babel"></script>
      </body>
    </html>

(Header.js)

 export default function Header() {
      return (
        <header>
          <nav className="nav">
            <img src="./react-logo.png" className="nav-logo" />
            <ul className="nav-items">
              <li>Pricing</li>
              <li>About</li>
              <li>Contact</li>
            </ul>
          </nav>
        </header>
      );
    }

(MainContent.js)

 export default function MainContent() {
      return (
        <div>
          <h1>Reasons I'm excited to learn React</h1>
          <ol>
            <li>
              It's a popular library, so I'll be able to fit in with the cool kids!
            </li>
            <li>I'm more likely to get a job as a developer if I know React</li>
          </ol>
        </div>
      );
    }

(Footer.js)

export default function Footer() {
  return (
    <footer>
      <small>© 2021 Ziroll development. All rights reserved.</small>
    </footer>
  );
}

Please help me with the answer, thanks

Recommended topics

Hot tags