Componente de barra de navegación 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 Navbar en ReactJS MDBootstrap. El componente Navbar se utiliza en todos los sitios web para que sea más fácil de usar, de modo que la navegación a través del sitio web sea fácil y el usuario pueda buscar directamente el tema de su interés.

Propiedades:

• etiqueta: Define la etiqueta del elemento MDBNavbar.
• className: agrega una clase personalizada a MDBNavbar.
• color: agrega color de texto a todos los elementos.
• expandir: establezca el tipo de barra de navegación expandida al elemento.
• bgColor: establece el color de fondo de la barra de navegación.
• luz: el color de luz establecido para el fondo de la barra de navegación.
• oscuro: El color oscuro establecido para el fondo de la barra de navegación.

Sintaxis:

<MDBNavbar>
    GeeksforGeeks
</MDBNavbar>

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 { MDBNavbar, MDBContainer, MDBNavbarBrand, } 
    from 'mdb-react-ui-kit';
  
export default function App() {
    return (
        <div id='gfg'>
            <h2>GeeksforGeeks</h2>
            <h4>ReactJS MDBootstrap Navbar Component</h4>
            <MDBNavbar bgColor='warning'>
                <MDBContainer>
                    <MDBNavbarBrand href=
'https://www.geeksforgeeks.org/'>GeeksforGeeks</MDBNavbarBrand>
                </MDBContainer>
            </MDBNavbar>
        </div>
    );
}

Producción:

Ejemplo 2: En este ejemplo, sabremos cómo hacer un componente de barra de navegación.

import React from "react";
import { MDBNavbar, MDBContainer, MDBNavbarBrand, } 
    from 'mdb-react-ui-kit';
  
export default function App() {
    return (
        <div id='gfg'>
            <h2>GeeksforGeeks</h2>
            <h4>ReactJS MDBootstrap Navbar Component</h4>
            <MDBNavbar bgColor='danger'>
                <MDBContainer>
                    <MDBNavbarBrand>React</MDBNavbarBrand>
                    <MDBNavbarBrand>MDBootstrap</MDBNavbarBrand>
                    <MDBNavbarBrand>Navbar</MDBNavbarBrand>
                    <MDBNavbarBrand>GeeksforGeeks</MDBNavbarBrand>
                </MDBContainer>
            </MDBNavbar>
        </div>
    );
}

Producción:

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