CODEWITHSUNDEEP
htmlreactjs
wftico
wftico

Reputation: 73

Create 'global' header and footer with react

I'm not sure If I can accomplish with react what I have in mind. I read multiple introductions to react and feel that it should work. However, I would appreciate some reassurance by people familiar with react.

What I want: Global header and footers, as they do not change on any of the pages I have. I could solve it with php... however I want to start with react and feel it would be fitting to solve it that way. An example of what I mean: Global header and footer in HTML (that's basically the functionality I need from react)

My Footer contains certain divs and ULs. eg:

<div>
    <ul>
      <li></li>
    </ul>
</div>

I feel that a component in react could be the footer/header. Is this doable or reasonable to try with react? Thank you! (I don't necessarily wish for code examples but rather opinions if it would work out generally)

Upvotes: 3

Views: 4503

Answers (3)

Hassan Nemir
Hassan Nemir

Reputation: 502

There are different implementations to share Header/Footer all over your project components:

1- importing Header & Footer Component where you want to use them:

const HomePage = (props) => {
    return (
        <>
            <Header />
            /** Content **/
            <Footer />
        <>
    );
}

2- Using Higher Order Components (HOC):

by importing header and footer once in a Layout HOC

Layout.js

import Header from "./Header";
import Footer from "./Footer";

const withLayout = Page => {
  return () => (
    <div>
      <Header />
      <Page />
      <Footer />
    </div>
  );
};

export default withLayout;

HomePage.js

import withLayout from "./Layout"
const HomePage = (props) => {
    return (
        <div>
            /** Content **/
        </div>
    );
}
export default withLayout(HomePage);

Note that Layout.js is not a react component, it's a wrapper function for react components where it embeds the header and footer components.

Upvotes: 2

Jake Worth
Jake Worth

Reputation: 5852

Why not put them in App, the parent to every component?

const App = () => {
  return (
    <div className="App">
      <Header />
      <EntryPointComponentToPages />
      <Footer />
    </div>
  );
}

Or, if they're just unchanging HTML tags, you could put them in index.js surrounding your div that renders React:

<body>
  <div>Header HTML here!</div>
  <div id="root"></div>
  <div>Footer HTML here!</div>
</body>

I'd base my decision on: does this seem like something React/JavaScript needs to or should handle? Is this code I plan to change often?

Upvotes: 2

Hayk Aghabekyan
Hayk Aghabekyan

Reputation: 1087

you can have one layout component

const Layout = (props) => {
    return (
        <>
            <header />
            { props.children }
            <footer />
        <>
    );
}

where <> is a fragment, header and footer can be components or whatever. Later you can use it like example abovce

<Layout>
    <div>Content goes here</div>
</Layout>

Upvotes: 4

Related Questions