Making a reusable footer in React

freeCodeCamp's new front-end technologies content is still under construction, but they have released a few lessons for their React fundamentals. You can click here to find the referenced lab activity from this blog post.

React is a JavaScript library that focuses on the UI of a website. To put it another way, it is concerned with the "View" of a page. It is component-based, and the components can be written in two ways: (1) Class-based components, and (2) Functional components. The first way is an older style that apparently is no longer used as much. Functional components is the current "in" way to create components. Instead of using JavaScript classes, you instead use a JavaScript function.

I've created a few React applications in the past, but this was my first using the newer Functional components. freeCodeCamp provided the index.html file already, however the CSS and React code was all up to me. Here is the completed code in a Github Gist page.

I started with the React part and made sure to finish the bones of the page before writing up the CSS. You really do not get a lot of leeway on the "how" here, as freeCodeCamp's user stories specifically ask for a certain setup.

Index.jsx uses one functional component to return a <footer> element. JSX only lets you return one top-level element. While I used <footer> here, most of the time you can use <Fragment> or simply < >. Inside the <footer> is an unordered list. I added a quick <div> there so I could separate the list from the copywrite paragraph below. The entire component is exported with the keyword at the top of the component.

With that code in place, technically I would pass the challenge (it does not check for styles). But where is the fun in that! So I added some CSS code. In order of how the selectors are written:

• I gave the footer a calming light blue background
• I removed the bullet points and default padding for all list items in my list
• I gave each specific list item some extra padding to spread out the items
• I centered my copywrite and made sure there was some bottom padding between it and the footer border
• I turned the list container into a Flexbox and gave it space around each unordered list

After all that, it looked good! Below is a picture of the final product:

It's basic but functional. Below the copywrite, I can include social media links in the future as well as remove some of the default browser styling for links (the blue color and underlines). Overall though, I'm pretty happy with how it turned out! I did a project a few years ago which involved a footer and it was very cumbersome to put together. Having a reusable component with this CSS will make it easier to include the same footer on every page of a future site.