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

    In addition, one advantage of still splitting Header and Footer, even with a Layout, is you can make them optional props to App with what you have as the defaults so they can be overriden.

    It could still be the same file, but the typical convention is one exported component per file where the filename matches the component name. This is just a style guide for recommended best practices and readability.