title: How to create a Layout with React
body: <pre><code>// components/Layout/Layout.tsx
  const Layout = () =&gt; {
    return (
      &lt;div&gt;
  
      &lt;/div&gt;
    )
  }
  
  export default Layout
  
  // components/Layout/Header/Header.tsx
  const Header = () =&gt; {
    return (
      &lt;header&gt;
        &lt;h2&gt;This is Header&lt;/h2&gt;
      &lt;/header&gt;
    )
  }
  
  export default Header
  
  // components/Layout/Footer/Footer.tsx
  const Footer = () =&gt; {
    return (
      &lt;footer&gt;
        &lt;h2&gt;This is Footer&lt;/h2&gt;
      &lt;/footer&gt;
    )
  }
  
  export default Footer
  
  // pages/index.tsx
  import Layout from &quot;../components/Layout/Layout&quot;
  import HomeContainer from &quot;../containers/Home/HomeContainer&quot;
  
  const HomePage = () =&gt; {
    return (
      &lt;Layout&gt;
        &lt;HomeContainer /&gt;
      &lt;/Layout&gt;
    )
  }
  
  export default HomePage
  </code></pre>
  <p>I am making a simple webpage with React. This time, I am trying to write with the HTML structure in mind, but I have a difficult question.</p>
  <p>How to implement a page that should not have other headers or footers when the page is rendered by creating a layout component and wrapping it with a route?</p>
  <p>※Additional question: Is it possible to create a mobile responsive web by using useMediaQuery in the Layout component?</p>