A couple of weeks ago I decided to put together a website in my spare time, and it went absolutely terribly.

Then I scrapped that project and started over in React JS.

Anyways, what are the pros and cons of defining the Header and Footer like so:

const Header = () => {
  return (
    <div>
      This is where I'd put my Nav Bar
    </div>
  )
}

const Footer = () => {
  return (
    <div>
      
      copyright 2024

    </div>
  )
}

const App = () => {
  return (
    <div>
      <Header />
      
         The Entire Bee Movie Script might go here for example

      <Footer />
    </div>
  )
}

Is there any issue with this sort of design versus storing the navbar and footer in a separate file and calling them as needed when pages load?