Componente de insignias ReactJS Reactstrap

Reactstrap es una biblioteca de interfaz de usuario de reacción basada en 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 Badges en Reactstrap. Las insignias se utilizan para crear etiquetas. Las insignias se escalan para coincidir con el tamaño del elemento principal inmediato mediante el uso de tamaños de fuente relativos.

Sintaxis:

<badge>Content</badge>

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 , acceda a ella con el siguiente comando:

  cd foldername

• Paso 3: Después de crear la aplicación ReactJS, instale el módulo requerido usando el siguiente comando:

  npm install reactstrap bootstrap

Estructura del proyecto : Se verá como lo siguiente.

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 Badge.

import React from 'react';
import { Badge } from 'reactstrap';
  
  
const Example = (props) => {
  return (
    <div>
      <h1>GeeksforGeeks <Badge color="secondary">10</Badge></h1>
    </div>
  );
}
  
export default Example;

Producción: 

Ejemplo 2: En este ejemplo, haremos chapas tipo pastilla.

import React from 'react';
import { Badge } from 'reactstrap';
  
  
const Example = (props) => {
  return (
    <div>
      <h1>GeeksforGeeks <Badge color="secondary" pill>10</Badge></h1>
    </div>
  );
}
  
export default Example;

Producción: 

Ejemplo 3: En este ejemplo, estamos usando una insignia que se muestra en el efecto de desplazamiento.

• Aplicación.js

import React from 'react';
import { Badge, Button } from 'reactstrap';
  
const gfg = (props) => {
  return (
    <div>
      <br/>
      <Button color="primary" outline>
        GeeksforGeek <Badge color="secondary" pill>reactstrap</Badge>
      </Button>
    </div>
  );
};
  
export default gfg;

Producción: 

Referencia:  https://reactstrap.github.io/components/badge/