title: How to make a component loads above header on reactJS
body: <p>I would like to make a component ( banner ) pop up above my header when the page is done loading. </p>
  
  <p>I've got some help from our fantastic community but this code make the header as the whole loads and I cannot find a way to make it pop above my header component nor a way to implement it.</p>
  
  <p>I would like some help from our community. Here is the code that make the whole header pops after two seconds :  </p>
  
  <pre><code>class Banner extends React.Component {
      constructor() {
         super();
         this.state = {
            showHeader: false
         }
      }
  
      componentDidMount() {
         setTimeout(() =&gt; this.setState({showHeader: true}), 2000);
      }
  
        render() {
         return (
           this.state.showHeader &amp;&amp; &lt;div className="test"&gt;test&lt;/div&gt;
         );
       }
  }
  
  ReactDOM.render(&lt;Banner/&gt;, document.getElementById('banner'))
  </code></pre>
  
  <p>and html </p>
  
  <pre><code>&lt;style&gt;
  .test {
    width: 100%;
    height: 50px;
    background-color: yellow;
  }
  
  body {
    margin: 0;
  }
  
  .test2{
     width: 100%;
    height: 80px;
    background-color: red;
  }
  &lt;/style&gt;
  
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"&gt;&lt;/script&gt;
  
  &lt;div id='banner'&gt;&lt;/div&gt;
  &lt;div id='header'&gt;&lt;/div&gt;
  </code></pre>
  
  <p>How to make a banner that will load above the header after the page fully loads ? </p>