# Lesson 4 - Create Footer Component

Layout Structure of Footer Componet

```graphql
// 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

```

```jsx
/* 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;

```

{% code lineNumbers="true" %}

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

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

{% endcode %}

### 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**

```jsx
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**

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

* **Purpose**:
  * Define the `Footer` as a stateless functional component.
  * No props are required since the content is static.

***

#### **3. Footer Layout**

```jsx
<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**

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

* Displays copyright information:
  * `&copy;`: HTML entity for the copyright symbol.
  * `2025, KOIDA BookShelf`: Static text representing the app name and copyright year.

***

#### **5. Social Media Links**

```jsx
<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**

```jsx
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`.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://reactjs.koida.tech/restful-apis-build-a-booksearch-app-ver-2.0/lesson-4-create-footer-component.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.