Now that you understand class components and JSX, implement the header component by following the next steps:

1. Create a new folder called /src/components/common/Header.
2. Create a new file called /src/components/common/Header/Header.css.
3. Write the following CSS in Header.css:

    .app-header {
      height: 200px;
      border-bottom: 1px solid black;
    }
 
    .app-header::after {
      content: "";
      height: 200px;
      opacity: 0.5;
      background: url('../../../assets/herobg.jpg');
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      z-index: -1;   
    }
 
    .app-logo {
      height: 80px;
      margin-left: 50px;
    }
 
    .app-slogan {
      font-family: 'Comic Sans MS', 'Comic Sans', cursive;
      font-weight: bold;
      margin-left: 5px;
    }

4. Create a new file called /src/components/common/Header/Header.js.
5. Write the following code in Header.js:

    import React from 'react';
    import './Header.css';
    import headerLogo from '../../../assets/logo.png';
 
    class Header extends React.Component {
      render() {
        return (
          <header className="app-header app-bg">
            <div className="maxHeight flex flex-align-items--
              center">
              <img src={headerLogo} className="app-logo" alt="logo" 
               />
              <span className="app-slogan">Shop 'till you
                Drop</span>
            </div>
          </header>
        );
      }
    }
 
    export default Header;

6. Create a new file called /src/components/common/index.js.
7. Re-export the header in index.js:

    import Header from './Header/Header';
 
    export {
      Header
    };

8. Use the new Header component in App.js by replacing the content of App.js with the following:

    import React from 'react';
    import {Header} from './components/common';
    import './App.css';
 
    class App extends React.Component {
      render() {
        return (
          <div>
            <Header />
          </div>
        );
      }
    }
 
    export default App;

9. Replace the CSS content of index.css with the following:

    html {
      box-sizing: border-box;
      font-size: 62.5%;  /* =10px */
    }
     
    *, *:before, *:after {
      box-sizing: inherit;
    }
 
    html, body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }
 
    body {
      font-size: 1.4rem;
    }
 
    .hidden {
      display: none !important;
    }
 
    .maxHeight {
      height: 100%;
    }
 
    .maxWidth {
      width: 100%;
    }
 
    .flex {
      display: flex;
    }
 
    .flex-justify-content--center {
      justify-content: center;
    }
 
    .flex-align-items--center {
      align-items: center;
    }

10. Add static image assets:
    1. Create a folder called /src/assets.
    2. Place the referenced images, herobg.png and logo.png, inside the folder.

That's it! You can now run the project and see the app with the header in place. It should look similar to this:

Before proceeding to the products section, let's learn about props, state, and functional components.