DEV Community

Audrea Cook
Audrea Cook

Posted on • Originally published at on

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:

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 (

export default Header;

Enter fullscreen mode Exit fullscreen mode

Import the Header

Let’s add our Header to App.js.

In src/App.js:

import Header from './components/Header';

Enter fullscreen mode Exit fullscreen mode

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

<Header />

Enter fullscreen mode Exit fullscreen mode

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.

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

Enter fullscreen mode Exit fullscreen mode

Right now, your project will look something like this:

COVIDiary with the stubbed header component

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 and Nav components. To begin, import the components at the top of your file:

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

Enter fullscreen mode Exit fullscreen mode

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*/}

Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

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"/>

Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

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

Header on medium and larger screens

Here is the hamburger menu on small screens:

Header with hamburger menu

And here is the expanded hamburger menu:

Header with expanded hamburger menu

Coming Up

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

Top comments (0)