Как создать простой адаптивный футер в React JS?

Опубликовано: 8 Августа, 2022

Нижний колонтитул является важным элементом дизайна веб-сайта, поскольку он сигнализирует пользователю о том, что он достиг конца веб-страницы, и предоставляет полезные ссылки на другие области веб-сайта, которые пользователь может захотеть посетить.

Постановка задачи : создайте адаптивный нижний колонтитул, используя стилизованные компоненты React и составные компоненты.

Условие:

Базовые знания npm и команды create-react-app .
Базовые знания о styled-components.

Базовая настройка: вы начнете новый проект, используя приложение create-react-app, поэтому откройте свой терминал и введите:

npx create-react-app react-footer

Теперь перейдите в папку с нижним колонтитулом реакции , введя данную команду в терминале:

cd react-footer

Требуемый модуль: Установите зависимости, необходимые в этом проекте, введя данную команду в терминале.

npm install --save styled-components

Теперь создайте папку компонентов в src, затем перейдите в папку компонентов и создайте два файла с именами Footer.js и FooterStyles.js.

Структура проекта: файловая структура проекта будет выглядеть следующим образом.

Пример: в этом примере мы создадим нижний колонтитул, для этого нам нужно будет манипулировать файлом App.js и другим файлом созданных компонентов.

Footer.js

import React from "react";
import {
  Box,
  Container,
  Row,
  Column,
  FooterLink,
  Heading,
} from "./FooterStyles";
  
const Footer = () => {
  return (
    <Box>
      <h1 style={{ color: "green", 
                   textAlign: "center", 
                   marginTop: "-50px" }}>
        GeeksforGeeks: A Computer Science Portal for Geeks
      </h1>
      <Container>
        <Row>
          <Column>
            <Heading>About Us</Heading>
            <FooterLink href="#">Aim</FooterLink>
            <FooterLink href="#">Vision</FooterLink>
            <FooterLink href="#">Testimonials</FooterLink>
          </Column>
          <Column>
            <Heading>Services</Heading>
            <FooterLink href="#">Writing</FooterLink>
            <FooterLink href="#">Internships</FooterLink>
            <FooterLink href="#">Coding</FooterLink>
            <FooterLink href="#">Teaching</FooterLink>
          </Column>
          <Column>
            <Heading>Contact Us</Heading>
            <FooterLink href="#">Uttar Pradesh</FooterLink>
            <FooterLink href="#">Ahemdabad</FooterLink>
            <FooterLink href="#">Indore</FooterLink>
            <FooterLink href="#">Mumbai</FooterLink>
          </Column>
          <Column>
            <Heading>Social Media</Heading>
            <FooterLink href="#">
              <i className="fab fa-facebook-f">
                <span style={{ marginLeft: "10px" }}>
                  Facebook
                </span>
              </i>
            </FooterLink>
            <FooterLink href="#">
              <i className="fab fa-instagram">
                <span style={{ marginLeft: "10px" }}>
                  Instagram
                </span>
              </i>
            </FooterLink>
            <FooterLink href="#">
              <i className="fab fa-twitter">
                <span style={{ marginLeft: "10px" }}>
                  Twitter
                </span>
              </i>
            </FooterLink>
            <FooterLink href="#">
              <i className="fab fa-youtube">
                <span style={{ marginLeft: "10px" }}>
                  Youtube
                </span>
              </i>
            </FooterLink>
          </Column>
        </Row>
      </Container>
    </Box>
  );
};
export default Footer;

FooterStyles.js

import styled from "styled-components";
   
export const Box = styled.div`
  padding: 80px 60px;
  background: black;
  position: absolute;
  bottom: 0;
  width: 100%;
  
   
  @media (max-width: 1000px) {
    padding: 70px 30px;
  }
`;
   
export const Container = styled.div`
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 1000px;
    margin: 0 auto;
    /* background: red; */
`
   
export const Column = styled.div`
  display: flex;
  flex-direction: column;
  text-align: left;
  margin-left: 60px;
`;
   
export const Row = styled.div`
  display: grid;
  grid-template-columns: repeat(auto-fill, 
                         minmax(185px, 1fr));
  grid-gap: 20px;
   
  @media (max-width: 1000px) {
    grid-template-columns: repeat(auto-fill, 
                           minmax(200px, 1fr));
  }
`;
   
export const FooterLink = styled.a`
  color: #fff;
  margin-bottom: 20px;
  font-size: 18px;
  text-decoration: none;
   
  &:hover {
      color: green;
      transition: 200ms ease-in;
  }
`;
   
export const Heading = styled.p`
  font-size: 24px;
  color: #fff;
  margin-bottom: 40px;
  font-weight: bold;
`;

App.js

import React from "react";
import Footer from "./components/Footer";
function App() {
  return (
     <Footer />
  );
}
  
export default App;

Шаг для запуска приложения: Запустите приложение с помощью следующей команды из корневого каталога проекта.

npm start

Вывод: теперь откройте браузер и перейдите по адресу http://localhost:3000/ , вы увидите следующий вывод:

Technical Scripter

Как создать простой адаптивный футер в React JS?

Footer.js

FooterStyles.js

App.js

РЕКОМЕНДУЕМЫЕ СТАТЬИ