Componente de barra de navegación React Rebass

React Rebass es un framework front-end que fue diseñado teniendo en cuenta a React. En este artículo, sabremos cómo usar el componente de la barra de navegación en React Rebass. La barra de navegación es un componente importante que se requiere en cada desarrollo. Entonces, para crear un componente de barra de navegación, podemos importar el componente de barra de navegación Rebass.

Nav Bar es un contenedor simple para posicionar la marca, la navegación y otros elementos en un encabezado de navegación conciso.

Sintaxis:

<Flex flexWrap='wrap'>
 <Text>Text</Text>
<Box />
<Link href='link'>Link</Link>
</Flex>

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 React Rebass en su directorio dado.

npm i rebass

Estructura del proyecto: Tendrá el siguiente aspecto.

Ejemplo: Este es el ejemplo básico que muestra cómo usar el componente Barra de navegación.

import React from "react";
import { Flex, Box, Text, Link } from "rebass";
  
const gfg = () => {
  return (
  
    <div id='gfg'>
      <h2>GeeksforGeeks</h2>
      <h4>React Rebass Nav Bar Component</h4>
      <Flex
        px={3}
        color='green'
        bg='red'
        alignItems='center'>
        <Text p={2} fontWeight='bold'>GeeksforGeeks</Text>
        <Box mx='auto' />
        <Link variant='nav' href='https://www.geeksforgeeks.org/'>
          GeeksforGeeks
        </Link> 
      </Flex>
  
    </div>
  );
};
  
export default gfg;

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

npm start

Producción:

Componente de la barra de navegación Rebass

Referencia: https://rebassjs.org/recipes/nav-bar