Lesson 4 - Create Footer Component

Layout Structure of Footer Componet

// Layout Design of Footer Component
Footer Component
│
└── Render Structure
    └── <footer> (bg-dark text-light py-4 mt-5)
        └── <div> (container text-center)
            ├── <p> - Copyright text
            │   └── "© 2025, KOIDA BookShelf"
            │
            └── <div> (d-flex justify-content-center) - Social Media Links
                ├── <a> (text-light mx-3) - Instagram Link
                │   ├── href="https://www.instagram.com"
                │   ├── target="_blank"
                │   ├── rel="noopener noreferrer"
                │   └── Content: <i className="fab fa-instagram"></i> Instagram
                │
                ├── <a> (text-light mx-3) - YouTube Link
                │   ├── href="https://www.youtube.com"
                │   ├── target="_blank"
                │   ├── rel="noopener noreferrer"
                │   └── Content: <i className="fab fa-youtube"></i> YouTube
                │
                ├── <a> (text-light mx-3) - Facebook Link
                │   ├── href="https://www.facebook.com"
                │   ├── target="_blank"
                │   ├── rel="noopener noreferrer"
                │   └── Content: <i className="fab fa-facebook"></i> Facebook
                │
                └── <a> (text-light mx-3) - Twitter/X Link
                    ├── href="https://www.twitter.com"
                    ├── target="_blank"
                    ├── rel="noopener noreferrer"
                    └── Content: <i className="fab fa-twitter"></i> X

/* Footer.jsx */
/** @format */
// Import necessary libraries
import React from 'react';

const Footer = () => {
  return (
    <footer className="bg-dark text-light py-4 mt-5">
      <div className="container text-center">
        {/* Copyright Information */}
        <p>&copy; 2025, KOIDA BookShelf</p>

        {/* Social Media Links */}
        <div className="d-flex justify-content-center">
          <a
            href="https://www.instagram.com"
            className="text-light mx-3"
            target="_blank"
            rel="noopener noreferrer"
          >
            <i className="fab fa-instagram"></i> Instagram
          </a>
          <a
            href="https://www.youtube.com"
            className="text-light mx-3"
            target="_blank"
            rel="noopener noreferrer"
          >
            <i className="fab fa-youtube"></i> YouTube
          </a>
          <a
            href="https://www.facebook.com"
            className="text-light mx-3"
            target="_blank"
            rel="noopener noreferrer"
          >
            <i className="fab fa-facebook"></i> Facebook
          </a>
          <a
            href="https://www.twitter.com"
            className="text-light mx-3"
            target="_blank"
            rel="noopener noreferrer"
          >
            <i className="fab fa-twitter"></i> X
          </a>
        </div>
      </div>
    </footer>
  );
};

export default Footer;

/* index.css */
/** @format */
html,
body {
  height: 100%;
  margin: 0;
}

#root {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

Explanation of Footer.jsx Code Structure

The Footer component provides the footer section of the app, including copyright information and links to social media platforms. Here's a step-by-step breakdown:

---

1. Importing Libraries

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';

• React: Required to build the component.

• Bootstrap: Used for styling the footer and ensuring responsiveness.

---

2. Component Declaration

const Footer = () => {...}

• Purpose:

  • Define the Footer as a stateless functional component.

  • No props are required since the content is static.

---

3. Footer Layout

<footer className="bg-dark text-light py-4 mt-5">
  <div className="container text-center">
    {/* Content goes here */}
  </div>
</footer>

• footer Tag:

  • Represents the footer of the page.

  • Styled with bg-dark (dark background) and text-light (light text) classes.

  • py-4: Adds vertical padding for spacing.

  • mt-5: Adds top margin to separate it from the main content.

---

4. Copyright Information

<p>&copy; 2025, KOIDA BookShelf</p>

• Displays copyright information:

  • ©: HTML entity for the copyright symbol.

  • 2025, KOIDA BookShelf: Static text representing the app name and copyright year.

---

5. Social Media Links

<div className="d-flex justify-content-center">
  <a href="https://www.instagram.com" className="text-light mx-3" target="_blank" rel="noopener noreferrer">
    <i className="fab fa-instagram"></i> Instagram
  </a>
  <a href="https://www.youtube.com" className="text-light mx-3" target="_blank" rel="noopener noreferrer">
    <i className="fab fa-youtube"></i> YouTube
  </a>
  <a href="https://www.facebook.com" className="text-light mx-3" target="_blank" rel="noopener noreferrer">
    <i className="fab fa-facebook"></i> Facebook
  </a>
  <a href="https://www.twitter.com" className="text-light mx-3" target="_blank" rel="noopener noreferrer">
    <i className="fab fa-twitter"></i> X
  </a>
</div>

• d-flex justify-content-center:

  • Creates a flexbox layout to horizontally align the links.

• Links:

  • Each link directs users to a social media platform (Instagram, YouTube, Facebook, and X).

  • target="_blank": Opens the link in a new tab.

  • rel="noopener noreferrer": Improves security for external links.

• Font Awesome Icons:

  • Each link uses an icon (fab fa-[platform]) for a better visual experience.

  • Ensure Font Awesome is included in your project to render icons.

---

6. Exporting the Component

export default Footer;

• Purpose:

  • Makes the Footer component reusable in the parent application.

---

Key Takeaways for Students:

1. Bootstrap Styling:

   • Use classes like bg-dark and text-light for predefined styles.

   • Utilize flexbox utilities (d-flex justify-content-center) for alignment.

2. Social Media Links:

   • Ensure links are secure with target="_blank" and rel="noopener noreferrer".

   • Enhance visual appeal with icons from libraries like Font Awesome.

3. Static Content:

   • Learn how to create a component with static, non-dynamic data.

4. Component Integration:

   • The Footer component is standalone and ready to be included in AppBookShelf.jsx.