Step 6

Let's update the App.js:

function App() {
  return (
    <div>
      <p>If you go to bed NOW, you should wake up at...</p>
      <button>zzz</button>
      <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 App;

Save the file and reload the app:

Notice how easy it is to mix HTML and JavaScript! This is possible due to JSX.

JSX is a syntax extension to JavaScript that allows us to mix JavaScript with HTML.

Good reads: Introducing JSX on React Docs, and What the heck is JSX and why you should use it to build your React apps by freeCodeCamp.

We will use JSX with React to describe what the UI should look like.

JSX is, in many ways, like a template language (such as Nunjucks), but it is more versatile as it comes with the full power of JavaScript. (Besides, you don't need to learn a new syntax specifically designed for a template language).

Template languages such as Nunjucks are closer to HTML than JavaScript. JSX, on the other hand, is closer to JavaScript than HTML.

There is a lot that can be done with JSX. There are some gotchas and nuances too! We will explore these as we build React applications. For an impatient reader, I recommend reading JSX in-depth on React Docs.