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?

    • sloppy_diffuserEnglish
      2·
      2 days ago

      Is there any issue with this sort of design

      I was answering this question. No, no issue. A HoC is just an enhancement to reuse the layout. See my self reply with more info on file splitting by single export convention. It is just for ease of navigating a repo and human-readability. Is it needed for a small project? No. My personal preference is to be consistent so I usually follow the same conventions regardless of project size.