COVIDiary pt. 11 - Basic Header
Published: 2020-06-26 22:26:28

---
title: COVIDiary pt. 11 - Basic Header
published: true
date: 2020-06-26 21:29:46 UTC
tags: 
canonical_url: https://www.codewitch.dev/covidiary_pt_11_-_basic_header
---

Welcome to Part 11 of the COVIDiary project! If you’re just joining us or missed a post, here’s what we’ve done so far:

- [Part 1: Project Introduction](https://dev.to/audthecodewitch/covidiary-a-rails-react-project-2gl6)
- [Part 2: Initial Setup](https://dev.to/audthecodewitch/covidiary-part-2-initial-setup-2g2d)
- [Part 3: Building the Database](https://dev.to/audthecodewitch/covidiary-pt-3-building-the-database-4o04)
- [Part 4: Frontend Setup](https://dev.to/audthecodewitch/covidiary-pt-4-frontend-setup-3cp1)
- [Part 4.5: Database Fixes](https://dev.to/audthecodewitch/covidiary-pt-4-5-database-fixes-21ga)
- [Part 5: Backend Routing](https://dev.to/audthecodewitch/covidiary-pt-5-backend-routing-39hf)
- [Part 6: Formatting Data](https://dev.to/audthecodewitch/covidiary-pt-6-formatting-data-of2)
- [Part 7: A Little More Action](https://dev.to/audthecodewitch/covidiary-pt-7-a-little-more-action-34me)
- [Part 8: Make the Connection](https://dev.to/audthecodewitch/covidiary-pt-8-make-the-connection-1p06)
- [Part 9: UX Design](https://dev.to/audthecodewitch/covidiary-pt-9-ux-design-l5j)
- [Part 10: Our First Component](https://dev.to/audthecodewitch/covidiary-pt-10-our-first-component-3883)

This week, we’re creating a simple `Header` component. We aren’t getting into the nitty-gritty of adding auth just yet. Today’s goal is to get the basic layout of our `Header`. Before we begin, run `yarn start` in your terminal to open your application in the browser.

## Stub the Component

Create a new file in your `src/components` folder called `Header.js`. Add a simple functional component.

```
import React from 'react';

const Header = () => {
  return (
    <div>
      COVIDiary
    </div>
  );
};

export default Header;

```

## Import the Header

Let’s add our `Header` to `App.js`.

In `src/App.js`:

```
import Header from './components/Header';

```

Just after the opening `<div>` In the `render()` section, add our component:

```
<Header />

```

You can remove all the default React code if you’d like. I moved it into a `main` tag so I had a placeholder between my header and footer.

```

<main>
  <img src={logo} className="App-logo" alt="logo" />
  <p>
    Edit <code>src/App.js</code> and save to reload.
  </p>
  <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer">
    Learn React
  </a>
</main>

```

Right now, your project will look something like this:

![COVIDiary with the stubbed header component](https://www.codewitch.dev/uploads/basic-header.jpg "Basic Header")

## Fill in the Details

Let’s start to format our header to match our wireframe sketch. From here on out, we’re working in `components/Header.js`.

For our header, we will be using React-Bootstrap’s [`NavBar`](https://react-bootstrap.github.io/components/navbar/ "NavBar") and [`Nav`](https://react-bootstrap.github.io/components/navs/ "Navs") components. To begin, import the components at the top of your file:

```
import Navbar from "react-bootstrap/Navbar";
import Nav from "react-bootstrap/Nav";

```

Now, let’s replace our `div` with `NavBar`. We’ll pass it props to adjust the styling.

```
<Navbar expand='md' bg='dark' variant='dark' as='header'>
  {/*expand - breakpoint at which hamburger menu expands*/}
  {/*bg - sets background color*/}
  {/*variant - use dark color scheme for dark bg*/}
  {/*as - converts default <div> tag to <header> tag*/}
</Navbar>

```

Within our `Navbar`, let’s put our site’s name on the left. You could also use a logo here, if you had one. We’ll have this element link to our root page.

```
  <Navbar.Brand href="/">COVIDiary</Navbar.Brand>

```

We also want to make sure our `Navbar` is responsive so it will adapt when users adjust their screen sizes.

```
<Navbar.Toggle aria-controls="responsive-navbar-nav"/>

```

Finally, let’s add the main navigation links. We want them to collapse into a hamburger menu on smaller screens, so we will wrap them in a `<Navbar.Collapse>` component. Note the id and className come straight from the React-Bootstrap documentation.

```
<Navbar.Collapse id="responsive-navbar-nav">
  <Nav className="ml-auto" as='nav'>
  {/*ml-auto - aligns nav links to the right of the container*/}
    <Nav.Link href="/about">About</Nav.Link>
    <Nav.Link href="/register">Register</Nav.Link>
  </Nav>
</Navbar.Collapse>

```

Our basic header is complete! Here it is on medium and larger screens:

![Header on medium and larger screens](https://www.codewitch.dev/uploads/medium-header.jpg "Medium Header")

Here is the hamburger menu on small screens:

![Header with hamburger menu](https://www.codewitch.dev/uploads/collapsed-header.jpg "Small Header")

And here is the expanded hamburger menu:

![Header with expanded hamburger menu](https://www.codewitch.dev/uploads/expanded-small-header.jpg "Expanded Small Header")

## Coming Up

Now that we’ve got our `Header` component, we’re ready to get into some more complicated aspects of our front end!