Step 7

A great mindset to have when building React apps is to think in Components.

Components represent the modularity and reusability of React.

Let's break out the SleepTime App into two components:

• The main app, in App.js (including the logic to compute sleep cycles).
• The output, in Output.js

Create a file Output.js with this content:

function Output() {
  return (
    <div>
      <p>It takes the average human fourteen minutes to fall asleep.</p>
      <p>
        If you head to bed right now, you should try to wake up at one of the
        following times:
      </p>
      <p>11:44 PM or 1:14 AM or 2:44 AM or 4:14 AM or 5:44 AM or 7:14 AM</p>
      <p>A good night's sleep consists of 5-6 complete sleep cycles.</p>
    </div>
  );
}

export default Output;

Notice that we must wrap the output elements in a single element (the outer div). Each React component returns a single React element.

Now update App.js as follows:

import Output from "./Output.js";

function App() {
  return (
    <div>
      <p>If you go to bed NOW, you should wake up at...</p>
      <button>zzz</button>
      <Output />
    </div>
  );
}

export default App;