Normally, you can use stateless components for layout components, such as headers, content, or footers, since you just need to render static markup.

Let's create a new application with create-react-app. If you run your project with npm start you will see something like this:

If you open the file located in src/App.js you will see this code:

  import React, { Component } from 'react';
  import logo from './logo.svg';
  import './App.css';

  class App extends Component {
    render() {
      return (
        <div className="App">
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <p>
              Edit <code>src/App.js</code> and save to reload.
            </p>
            <a
              className="App-link"
              href="https://reactjs.org"
              target="_blank"
              rel="noopener noreferrer"
            >
              Learn React
            </a>
          </header>
        </div>
      );
    }
  }

  export default App;

Now, let's break our code into layout files – that means we will create the Header, Content, and Footer components to simplify our code.

The first component is the Header component; let's look at the code we need:

  import React from 'react';
  import { string } from 'prop-types';

  const Header = ({ title }) => (
    <header className="App-header">
      <h1>{title}</h1>
    </header>
  );

  Header.propTypes = {
    title: string.isRequired
  };

  export default Header;

As you can see, I created a new directory called components to separate our components, and inside another one called layout to group our layout components. Also, we are destructuring our props to pass a title in the component and just render it, after we created this component we need to change App.js to import and render the Header component:

  import React, { Component } from 'react';
  import Header from './components/layout/Header';
  import './App.css';

  class App extends Component {
    render() {
      return (
        <div className="App">
          <Header title="Dev Education" />
        </div>
      );
    }
  }

  export default App;

I changed a little bit the styles – I moved the gray background to the body, and I removed min-height: 100vh; from the .App-header class, and this is the result:

Now, let's create a new component to add the Content component of the site:

  import React from 'react';
  import { node } from 'prop-types';

  const Content = ({ children }) => (
    <div className="Content">
      {children}
    </div>
  );

  Content.propTypes = {
    children: node.isRequired
  };

  export default Content;

For this component, we need to pass the special prop children to include the injected HTML inside the Content component, if we look at App.js it should now look like this:

  import React, { Component } from 'react';
  import Header from './components/layout/Header';
  import Content from './components/layout/Content';
  import './App.css';

  class App extends Component {
    render() {
      return (
        <div className="App">
          <Header title="Dev Education" />

          <Content>
            {/* This content is sending as the children prop */}
            <p>
              This is our <strong> <Content></strong> component
            </p>
          </Content>
        </div>
      );
    }
  }

  export default App;

The result is as follows:

Finally, let's create a Footer component:

  import React from 'react';
  import { string } from 'prop-types';

  const Footer = ({ copyright }) => (
    <div className="Footer">
      <p>&copy; {copyright}</p>
    </div>
  );

  Footer.propTypes = {
    copyright: string.isRequired
  };

  export default Footer;

We also need to render our Footer component in App.js:

  import React, { Component } from 'react';
  import Header from './components/layout/Header';
  import Content from './components/layout/Content';
  import Footer from './components/layout/Footer';
  import './App.css';

  class App extends Component {
    render() {
      return (
        <div className="App">
          <Header title="Dev Education" />

          <Content>
            {/* This content is received with the children prop */}
            <p>
              This is our <strong> <Content></strong> component
            </p>
          </Content>

          <Footer 
            copyright={`Dev.education ${new Date().getFullYear()}`} 
          />
        </div>
      );
    }
  }

  export default App;

As you can see, breaking our components in this way help us to create clean and modular components. The final result with the Footer component is this one: