How to do it...

Taking the same of the React application we created before, let's create first our Header component. 

1. At this point, our current header is placed on App.js:

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

  class App extends Component {
    render() {
      return (
        <div className="App">
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <h1 className="App-title">Welcome to React</h1>
          </header>

          <Home />
        </div>
      );
    }
  }

  export default App;

2. Let's move that header to our new Header component and then import it into the App component. Because the layout components are global or shared, we need to create a layout directory in our shared components directory (src/shared/components/layout).
3. Before you continue, you must install a package called prop-types to use the PropTypes validation:

npm install prop-types

4. PropTypes was initially released as part of the React core module and is commonly used with React components. PropTypes is used to document the intended types of properties passed to components. React will check the props passed to your components against those definitions, and it will send a warning in development if they don't match: 
   

    import React, { Component } from 'react';
    import PropTypes from 'prop-types';
    import logo from '../../images/logo.svg';

    class Header extends Component {
      // Here you can define your PropTypes.
      static propTypes = {
        title: PropTypes.string.isRequired,
        url: PropTypes.string
      };

      render() {
        const { 
          title = 'Welcome to React', 
          url = 'http://localhost:3000' 
        } = this.props;

        return (
          <header className="App-header">
            <a href={url}>
              <img src={logo} className="App-logo" alt="logo" />
            </a>
            <h1 className="App-title">{title}</h1>
          </header>
        );
      }
    }

    export default Header;

5. The static PropTypes property is basically an object where you need to define the types of prop you will pass. array, bool, func, number, object, string, and symbol are primitive types, but there are also particular types, such as node, element, instanceOf, oneOf, oneOfType, arrayOf, objectOf, shape and any. There is an optional property called isRequired that can be added to any type if the prop must be required and will produce a React warning if is not defined.
6. Import and render our Header component:

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

    class App extends Component {
      render() {
        return (
          <div className="App">
            <Header title="Welcome to Codejobs" />
            <Home />
          </div>
        );
      }
    }

    export default App;

7. All the properties passed to our components are contained in this props. You may have noticed that we are only sending the title prop because it is the only one that is required. The url prop is optional and also has a default value in the destructuring (http://localhost:3000). If we don't pass the title prop, even if we have a default value Welcome to React in the destructuring we are going to get a warning like this:

8. Create our Footer component:

    import React, { Component } from 'react';

    class Footer extends Component {
      render() {
        return (
       <footer>&copy; Codejobs {(new Date()).getFullYear()}</footer>
        );
      }
    }

    export default Footer;

9. So far, we only have passed props as attributes (with self-closed components <Component />), but there is another way to pass props as children (<Component>Children Content</Component>). Let's create a Content component and send our Home component as a child of content:

  import React, { Component } from 'react';
  import PropTypes from 'prop-types';

  class Content extends Component {
    static propTypes = {
      children: PropTypes.element.isRequired
    };

    render() {
      const { children } = this.props;

      return (
        <main>
          {children}
        </main>
      );
    }
  }

  export default Content;

10. With those changes, our App.js file should now look like this:

  import React, { Component } from 'react';
  import Home from './Home/Home';

  // Layout Components
  import Header from '../shared/components/layout/Header';
  import Content from '../shared/components/layout/Content';
  import Footer from '../shared/components/layout/Footer';

  import './App.css';

  class App extends Component {
    render() {
      return (
        <div className="App">
          <Header title="Welcome to Codejobs" />

          <Content>
            <Home />
          </Content>
        
          <Footer />
        </div>
      );
    }
  }

  export default App;