Componente de pie de página ReactJS MDBootstrap

MDBootstrap es una biblioteca de interfaz de usuario de reacción basada en diseño de materiales y bootstrap que se utiliza para crear páginas web atractivas con su componente sencillo y fácil de usar. En este artículo, sabremos cómo usar el componente de pie de página en ReactJS MDBootstrap. El componente de pie de página se utiliza para agregar el pie de página en el elemento.

Propiedades:

• tag: Se utiliza para definir la etiqueta del elemento MDBFooter.
• className: se utiliza para agregar clases personalizadas a MDBFooter.
• backgroundColor: Se utiliza para cambiar el color del pie de página.
• textColor: Se utiliza para cambiar el color del texto en el pie de página.

Sintaxis:

<MDBFooter>
    GeeksforGeeks
</MDBFooter>

Creación de la aplicación React e instalación del módulo:

Paso 1: Cree una aplicación React usando el siguiente comando.

npx create-react-app foldername

Paso 2 : después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, muévase a ella con el siguiente comando.

cd foldername

Paso 3: Instale ReactJS MDBootstrap en su directorio dado.

npm i mdb-ui-kit
npm i mdb-react-ui-kit

Estructura del proyecto: Tendrá el siguiente aspecto.

Paso para ejecutar la aplicación: ejecute la aplicación desde el directorio raíz del proyecto, utilizando el siguiente comando.

npm start

Ejemplo 1: Este es el ejemplo básico que muestra cómo usar el componente de pie de página.

import React from "react";
import { MDBFooter } from 'mdb-react-ui-kit';
  
export default function App() {
  
    return (
        <div id="gfg">
            <h2>GeeksforGeeks</h2>
            <h4>ReactJS MDBootstrap Footer Component</h4>
  
            <MDBFooter color="primary" bgColor='light'
                className='text-center text-lg-left'>
                Footer Component
            </MDBFooter>
        </div>
    );
}

Producción:

Ejemplo 2: En este ejemplo, sabremos cómo agregar un Párrafo en un Componente de pie de página.

import React from "react";
import { MDBFooter } from 'mdb-react-ui-kit';
  
export default function App() {
  
    return (
        <div id="gfg">
            <h2>GeeksforGeeks</h2>
            <h4>ReactJS MDBootstrap Footer Component</h4>
  
            <MDBFooter color="primary" bgColor='light' 
            className='text-center text-lg-left'>
                <h5 className='text-uppercase'>
                Footer Heading</h5>
                <p>
                    MDBootstrap is a Material Design and 
                    bootstrap-based react UI library that 
                    is used to make good looking webpages 
                    with its seamless and easy-to-use component.
                </p>
  
            </MDBFooter>
        </div>
    );
}

Producción:

Referencia: https://mdbootstrap.com/docs/b5/react/navigation/footer/