COVIDiary pt. 10 - Our First Component
Published: 2020-06-26 22:22:26

---
title: COVIDiary pt. 10 - Our First Component
published: true
date: 2020-06-11 21:37:41 UTC
tags: 
canonical_url: https://www.codewitch.dev/covidiary_pt_10_-_our_first_component
---

Welcome to Part 10 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-325k-temp-slug-13698)

This week, we’re FINALLY writing code that will actually render in our browser! Today, we’re going to build our `Footer` component. Though it’s a relatively simple piece of our application, I decided to start with it for a few reasons. First, the `Footer` is the only page element that will be consistent throughout our entire application. It also gives us the opportunity to practice using a few tools that will be used extensively in the coming weeks. Finally, its simplicity allows us to focus on some React basics without having to worry about the more nuanced aspects.

## Stub the Component

Create a new file in your `src/components` folder called `Footer.js`. Because our component doesn’t need to hold state, we can keep it simple as a functional component. Let’s stub that out really quick:

```

import React from 'react';

const Footer = () => {
	return (
		<div>
			Hello World!
		</div>
    );
};

export default Footer;

```

## Import the Footer

Let’s add our `Footer` to `App.js` so we can actually see our work in the browser.

In `src/App.js`

```

import Footer from './components/Footer';

```

Just before the closing `</div>` In the `render()` section, add our component:

```

<Footer />

```

In your terminal, run `yarn start`. This will open your application in the browser. Right now, it should look something like this:

![Footer with Hello World](https://www.codewitch.dev/uploads/footer1.png "Footer")

## Fill in the Details

Now that we’ve got our server up and running, let’s change that “Hello World” to something we actually want, shall we? From here on out, we’re working in `components/Footer.js`

First, let’s replace the `<div>` in our `render()` with `<footer>`. Then, we’ll add our logo and copyright information:

```

<footer>
  {/*Logo link to CodeWitch blog*/}
  <a href={'[http://codewitch.dev](http://codewitch.dev "http://codewitch.dev")'}
  /*Opens link in new tab*/
  target={'_blank'}
  rel={'noopener noreferrer'}>
  	<img src={'./CodeWitchLogo.png'} alt="AudTheCodeWitch Logo" height='50px' />
  </a>

  {/*Copyright information*/}
  <p>©2020 Audrea Cook</p>

</footer>

```

Let’s also add links to our social media profiles. We’ll use free icons from [fontAwesome](https://fontawesome.com/). To do this, we need to install some more packages. In your terminal, run the following:

```
$ yarn add @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome @fortawesome/free-brands-svg-icons @fortawesome/free-regular-svg-icons

```

When that is complete, import the icons by adding the following two lines to the top of your page:

```

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faGithub, faTwitter, faLinkedin } from '@fortawesome/free-brands-svg-icons'

```

While we’re adding imports, let’s also bring in the react-bootstrap components we’ll be using:

```

import ListGroup from "react-bootstrap/ListGroup";
import ListGroupItem from "react-bootstrap/ListGroupItem";

```

Now, we’re ready to add some more code to our `<footer>` element:

```

{/*Using a ListGroup to create buttons for external links*/}
<ListGroup horizontal={"sm"} /*Will display horizontally vs vertically for screens size sm and up*/>
  <ListGroupItem action /*turns item into link button*/ href='https://github.com/AudTheCodeWitch' target="_blank" rel={'noopener noreferrer'} >
    {/*icon + text description*/}
    <FontAwesomeIcon icon={faGithub} /> GitHub
  </ListGroupItem>

  <ListGroupItem action href='https://twitter.com/AudTheCodeWitch' target="_blank" rel={'noopener noreferrer'} >
    <FontAwesomeIcon icon={faTwitter} /> @audTheCodeWitch
  </ListGroupItem>

  <ListGroupItem action href='https://www.linkedin.com/in/audreacook/' target="_blank" rel={'noopener noreferrer'} >
	  <FontAwesomeIcon icon={faLinkedin} /> LinkedIn
  </ListGroupItem>
</ListGroup>

```

If you save and refresh your browser, the footer should now look something like this:

![Footer with external links and logo](https://www.codewitch.dev/uploads/footer2.png "Finished footer")

## Coming Up

Now that we’ve got our `Footer` component, we’re ready to keep building our application! Next week, we’ll tackle the `Header`, another component that will be shared on every page! From there, we’ll really start to bring our project to life!