Step 10

Let's update the index.html to link to the Bulma CSS file. While at it, also update the app title.

  <!DOCTYPE html>
  <html lang="en">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link
+      href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"
+      rel="stylesheet"
+    />
-    <title>React App</title>
+    <title>Dictionary App</title>
   </head>
   <body>
     <div id="root"></div>
   </body>
  </html>

Next, update the Header.js file: 

function Header() {
  return (
    <header className="hero is-info">
      <div className="hero-body">
        <p className="title has-text-centered">
          Free English Dictionary
        </p>
      </div>
    </header>
  );
}

I copied this content from the index.html of the original (vanilla JS) dictionary app. Notice how the class attribute is renamed to className. This renaming is due to class being a keyword in JavaScript. We are writing HTML inside JavaScript, and some modifications are needed to make this mix work!