this post was submitted on 24 Dec 2024
5 points (85.7% liked)

WebDev

1161 readers
2 users here now

Community for all things Web Development related.

founded 2 years ago
MODERATORS
 

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?

you are viewing a single comment's thread
view the rest of the comments
[โ€“] sloppy_diffuser 2 points 1 day ago (1 children)

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.

[โ€“] [email protected] 2 points 1 day ago

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