如何在 React JS 中创建一个简单的响应式页脚？

页脚是网站设计的一个重要元素，因为它向用户发出信号，表明他们已经到达网页的末尾，并提供指向用户可能想要访问的网站其他区域的有用链接。

问题陈述：使用 React 样式组件和复合组件创建响应式页脚。

先决条件：

• npm & create-react-app命令的基础知识。
• 样式组件的基本知识。

基本设置：您将使用create-react-app启动一个新项目，因此打开终端并输入：

npx create-react-app react-footer

现在通过在终端中键入给定的命令转到您的react-footer文件夹：

cd react-footer

所需模块：通过在终端中键入给定命令来安装此项目所需的依赖项。

npm install --save styled-components

现在在 src 中创建components文件夹，然后转到 components 文件夹并创建两个名为Footer.js和FooterStyles.js的文件

项目结构：项目中的文件结构将如下所示。

示例：在此示例中，我们将设计一个页脚，为此我们需要操作 App.js 文件和其他创建的组件文件。

Footer.js

import React from "react";
import {
  Box,
  Container,
  Row,
  Column,
  FooterLink,
  Heading,
} from "./FooterStyles";
  
const Footer = () => {
  return (
    
      

        GeeksforGeeks: A Computer Science Portal for Geeks
      
      
        
          
            About Us
            Aim
            Vision
            Testimonials
          
          
            Services
            Writing
            Internships
            Coding
            Teaching
          
          
            Contact Us
            Uttar Pradesh
            Ahemdabad
            Indore
            Mumbai
          
          
            Social Media
            
              
                
                  Facebook
                
              
            
            
              
                
                  Instagram
                
              
            
            
              
                
                  Twitter
                
              
            
            
              
                
                  Youtube
                
              
            
          
        
      
    
  );
};
export default Footer;

页脚样式.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;
`;

应用程序.js

import React from 'react';
import Footer from './components/Footer';
function App() {
  return (
     

  );
}
  
export default App;

运行应用程序的步骤：使用以下命令从项目的根目录运行应用程序。

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出：