Building Web Applications with React and ASP.NET Core/

...

/

Adding Elements to the Header Component

Adding Elements to the Header Component

Learn to add elements to the Header component.

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:

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

Notice that the implicit return statement containing the JSX is now in parentheses.

Note: ...