Now, let's open the sample project from Chapter 1, Getting Started with Isomorphic Web Apps, and start hacking. First, we are going to drop the App component, because it was used solely for demonstration purposes and won't be used down the road in our app.

Then move Html.js into the Html subfolder for consistency with the other components we are going to create and add the components/Html/package.json file with the following contents:

{ 
  "private": true, 
  "name": "Html", 
  "main": "./Html.js" 
} 

Now, let's create the Header component (components/Header/Header.js, components/Header/package.json), which will looks similar to this:

import React from 'react'; 
import PropTypes from 'prop-types';

function Header({ children }) { 
  return ( 
    <header> 
      <div> 
        <span>My App</span> 
        { 
          !children && 
          <form><input type="search" /></form> 
        } 
      <div>...