Add the Header Component

We’ll add our name in the Header component. Here, we use John Doe as our demo name.

Add the name

We use the HTML semantic element header to wrap our code. The following snippet shows us how to use the semantic element and add our name:

const Header = () => {
  return (
    <header>
      <h1>
          John Doe
      </h1>
      <p>Web Developer</p>
    </header>
  )
}

export default Header

Import the Header component

Let’s import the Header component into the App.js file to display the component. The Header component displays our name and designation.

// App.js
import Header from "./Header."

Combining all the code above produces the following: