Creating a Layout Component

Demonstrate how to create a common layout component that wraps around the application's page content with a consistent header and footer across different pages.
import React from 'react';

// Header component
const Header = () => (
        <h1>My App</h1>
        {/* Add other header elements here */}

// Footer component
const Footer = () => (
        <p>Copyright © My Company 2023</p>
        {/* Add other footer elements here */}

// Layout component
const Layout = ({ children }) => (
        <Header />
        <Footer />

export default Layout;
This code defines a functional Layout component using React, which includes a Header and a Footer component. Within the Layout, a 'children' prop is used to render the page content passed to it. This layout can be used to wrap around other page components to maintain a consistent structure across the application.
import React from 'react';
import Layout from './Layout'; // Import Layout component

// Example page component
const HomePage = () => (
      <h2>Welcome to the Home Page!</h2>
      {/* Page-specific content goes here */}

export default HomePage;
This code shows how to use the previously defined Layout component in a specific page component, like a home page. The page content is placed within the Layout tags, which will be passed as 'children' to the Layout component, thereby incorporating the common header and footer.