Search⌘ K
AI Features
Home
Courses
Building Web Applications with React and ASP.NET Core

Adding Elements to the Header Component

Explore how to build a React Header component by adding key elements such as the app name in a link, a search input field, and a sign-in link featuring a user icon. Learn to create and use an icon component and integrate it within the header. Also, create a simple HomePage component with a title and button to practice component creation and rendering.

We'll cover the following...

We’re going to work on the Header component a little more so that it eventually looks as follows:

All the elements in the Header component
All the elements in the Header component

So, the Header component will contain the app name, which will be “Q & A”, a search input, and a “Sign In” link.

With the app still running, carry out the following steps to modify the Header component:

  1. Add the app name inside an anchor tag inside the div tag by replacing the word header, which was previously used inside div:

JavaScript (JSX)
export const Header = () => ( 
    <div>
     <a href="./">Q & A</a>
    </div> );

Notice that the implicit return ...