To create a layout for your application and create a template theme with a header and footer in React you can follow this code to make a basic template layout. I just found out how to do this. For example:

[HEADER] - Layout.jsx

[CONTENT] -> App.jsx

[FOOTER] - Layout.jsx

The above example, will use the Layout.jsx component to add the App.jsx content in between the heaer the the footer by using the children prop. Here is the code. You will need to create a Layout Component:

App.jsx

import React from 'react';
import Layout from './Layout';
function App () {
    const LayoutSettings = {
        showHeader: false,
        showFooter: false,
        bgImage: bgImage,
        button: false
    };
  return (
    <Layout layoutSettings={LayoutSettings}>
      <h1>App Component</h1>
      <p>Content from App.jsx</p>
    </Layout>
  )
}

export default App

 

Layout.jsx

import React from 'react';
function Layout ({layoutSettings,children}) {

  return (
    <div>
      <header style={{bgImage:layoutSettings.bgImage}}>HEADER</header>
      <div>{children}</div>
      <footer>FOOTER</footer>
    </div>
  )
}

export default Layout