Cannot import react custom components-CodePudding

I am learning react and currently using CDNs. I have been trying to import a header component but am unable to do so. I have been trying to see what is wrong in the code but can't find any. I am getting a blank page if I try to import.

react1.js

import Header from "./Header";

function MainContent(){
    return (
        <div>
            <h1>Reasons why I'm excited to learn React</h1>
            <ol>
                <li>By knowing React, my chances of getting hired increases</li>
                <li>It is easy to write and understand</li>
            </ol>
        </div>
    );
}

function Footer(){
    return (
        <footer className="Footer">
            <small>2022 Naik development. All Rights Reserved.</small>
        </footer>
    );
}

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

Header.js

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

CodePudding user response：

rename your file to .jsx instead of js
check if folder structure is correct or not!

CodePudding user response：

Since you are using functional component,Try to import react on top of the header.js file to make it work . new code looks like below.

import React from 'react';

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

CodePudding user response：

Its working, Please check this codesandbox link!