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?

  • @pinchyEnglish
    3•1 day ago

    Split the file if it feels like to much code to read comfortably. Most often I have a Layout component in a single file that receives its contents as children. Header and Footer are most often their own file in my case but if they are just a few lines of code I leave them in the Layout.

  • @[email protected]English
    4•2 days ago

    No. I usually have a Layout.tsx that looks like this. Then I make App a higher-order component (hoc), so I can reuse the layout on every page by just passing in a content component.

      • @[email protected]English
        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.

    • @[email protected]English
      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.

      • @finitebanjoOPEnglish
        2•2 days ago

        Aight, that’s enough justification for me. I’ll go get to work.