React Cookbook

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;

File: src/components/App.js

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, ...