Componente de botón ReactJS Reactstrap

Reactstrap es una biblioteca front-end popular que es fácil de usar con componentes React Bootstrap 4. Esta biblioteca contiene los componentes React sin estado para Bootstrap 4. El componente Button permite al usuario tomar medidas y tomar decisiones con un solo toque. Podemos usar el siguiente enfoque en ReactJS para usar el componente de botón ReactJS Reactstrap.

Accesorios de botones:

• activo: los accesorios activos en Reactstrap se utilizan para configurar manualmente el botón en un estado activo.
• aria-label: Esta propiedad aria-label se usa para indicar la string que marca el elemento actual. Se utiliza donde la pantalla no es visible.
• bloque: los accesorios de botón se utilizan para indicar si el botón debe tener un estilo de bloque o no.
• color: los accesorios de color en reactStrap se utilizan para establecer el color del elemento en el componente.
• disabled : los accesorios deshabilitados se utilizan para configurar los botones deshabilitados. Transfiere el botón a un estado inactivo.
• contorno: los accesorios de contorno se utilizan para indicar si el botón debe tener un estilo de contorno o no.
• innerRef: esta propiedad se utiliza para indicar la referencia interna del elemento. La referencia interna es una propiedad personalizada que usan los desarrolladores en el proyecto.
• onClick: la propiedad onClick se invoca cuando se activa la función de devolución de llamada y se hace clic en un botón.
• tamaño: estos accesorios se utilizan para especificar el tamaño del botón
• cssModule: este accesorio de botón se usa para indicar el módulo CSS para diseñar el componente.

Sintaxis para crear la aplicación React e instalar módulos:

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: Después de crear la aplicación ReactJS, instale el módulo requerido usando el siguiente comando:

npm install reactstrap bootstrap

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

Ejemplo 1: ahora escriba el siguiente código en el archivo App.js. Aquí, aquí hemos mostrado botones sin un estado deshabilitado.

Nombre de archivo: App.js

import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css';
import { Button } from "reactstrap"
 
function App() {
    return (
        <div style={{
            display: 'block', width: 700, padding: 30
        }}>
            <h4>ReactJS Reactstrap Button Component</h4>
            <Button color="success">Success Color Button</Button> <br></br>
            <Button color="danger">Danger Color Button</Button> <br></br>
            <Button color="warning">Warning Color Button</Button> <br></br>
            <Button color="primary">Primary Color Button</Button> <br></br>
            <Button color="secondary">Secondary Color Button</Button> <br></br>
            <Button color="info">Info Color Button</Button> <br></br>
            <Button color="link">Link Color Button</Button>
        </div>
    );
}
 
export default App;

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

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

Ejemplo 2: ahora escriba el siguiente código en el archivo App.js. Aquí, aquí hemos mostrado botones con los estados deshabilitados.

Nombre de archivo: App.js

import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css';
import { Button } from "reactstrap"
 
function App() {
    return (
        <div style={{
            display: 'block', width: 700, padding: 30
        }}>
            <h4>ReactJS Reactstrap Button Component</h4>
            <Button color="success"
                disabled>Disabled Success Color Button</Button> <br></br>
            <Button color="danger"
                disabled>Disabled Danger Color Button</Button> <br></br>
            <Button color="info"
                disabled>Disabled Info Color Button</Button> <br></br>
            <Button color="link"
                disabled>Disabled Link Color Button</Button>
        </div>
    );
}
 
export default App;

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

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

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