Aprende a implementar el Bootstrap de Twitter de la vieja escuela en su aplicación ReactJS.

Cómo usar componentes de Bootstrap 3 en ReactJS

Bootstrap es (y lo será durante mucho tiempo) sin duda uno de los frameworks HTML, CSS y JavaScript más impresionantes y conocidos que puede utilizar como base para crear sitios web o aplicaciones web. Entre otras características, incluye CSS y HTML base para tipografía, iconos, formularios, botones, tablas, cuadrículas de diseño y navegación, junto con complementos de jquery personalizados y compatibilidad con diseños receptivos.

Con la introducción de ReactJS, muchos desarrolladores la adoptaron como herramienta predeterminada en su proceso de desarrollo diario. Eso significa que jQuery estaba y se está poniendo un lado al menos para el desarrollo de aplicaciones web muy dinámicas. Pero, ¿qué tiene que ver jQuery con Bootstrap? Bueno, se requiere jQuery para que los componentes de Bootstrap funcionen correctamente y ese es el otro problema, la biblioteca Bootstrap original usa el DOM nativo del navegador y React implementa un DOM virtual. Es por eso que, para resolver todos estos inconvenientes y mantener la sencilla tradición de usar Bootstrap como base para la interfaz de usuario, se escribió una biblioteca React de bootstrap.

Esta biblioteca puede ayudarlo a trabajar de la manera React mientras usa las increíbles y fáciles funciones de Bootstrap.

1. Instale React Bootstrap

El módulo React Bootstrap implementa todos los componentes Bootstrap 3 como componentes React, por lo que pueden integrarse fácilmente en su aplicación. No depende de jQuery, por lo que su código se mantendrá lo más limpio posible.

Para instalarlo, cambie al directorio de su proyecto con el terminal e instálelo ejecutando el siguiente comando:

npm install react-bootstrap

Después de la instalación, podrá solicitar cualquiera de los componentes que ofrece la biblioteca Bootstrap original. Para obtener más información sobre esta biblioteca, visite el repositorio oficial en Github aquí.

2. Define tu tema Bootstrap

Como sabes, todo el mundo crea su propio tema de boostrap o simplemente usa un tema predeterminado. Siguiendo esta sencilla guía, React-Bootstrap no depende de ninguna versión de Bootstrap CSS ni implementa su propia versión. Es obvio que necesita agregar algo de CSS para que el componente se vea bien, sin embargo, eso depende totalmente de usted. La forma más sencilla es utilizar cualquier versión de Bootstrap CSS desde un CDN gratuito (el tema de arranque básico predeterminado y ampliamente conocido):

<!-- The default CSS of Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

O puede usar un tema de la impresionante colección gratuita de temas Bootstrap de Bootswatch como "United" que se ve mucho mejor que el tema predeterminado de Bootstrap:

React Bootstrap Ubuntu Theme

El procedimiento es realmente simple, solo incluya un archivo CSS dentro de la etiqueta principal de su documento y estará listo para comenzar:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>My Awesome React App</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Include some Bootstrap CSS Theme -->
        <link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/united/bootstrap.min.css" rel="stylesheet" integrity="sha384-pVJelSCJ58Og1XDc2E95RVYHZDPb9AVyXsI8NoVpB2xmtxoZKJePbMfE4mlXw7BJ" crossorigin="anonymous">
    </head>

    <body>
        <div class="container">
            <div id="app">Loading...</div>
        </div>

        <script type="text/javascript" src="bundle.js"></script>
    </body>
</html>

Con esto, ahora sus componentes en React se verán como deberían. Alternativamente, puede configurar el paquete web para incluir y transpilar los archivos fuente SASS de bootstrap para que pueda configurar y modificar los estilos de Bootstrap como desee.

3. Uso de componentes de Bootstrap en React

Como enfoque típico en React, todos los componentes de Bootstrap se pueden importar desde la biblioteca:

Diseño

Una de las características más impresionantes de Bootstrap, fue su revolucionario sistema de cuadrícula de diseño. Los sistemas de cuadrícula se utilizan para crear diseños de página a través de una serie de filas y columnas que albergan su contenido. Típicamente, cada fila de bootstrap está envuelta dentro de un archivo containernormal o container-fluid. En la versión React, estos componentes se denominan Grid y se pueden usar de la siguiente manera:

import Grid from 'react-bootstrap/lib/Grid';

const Container = (
    {/* Normal BS would be: <div class="container"></div>*/}
    <Grid>

    </Grid>
);

const ContainerFluid = (
    {/* Normal BS would be: <div class="container-fluid"></div>*/}
    <Grid fluid={true}>

    </Grid>
);

A continuación, viene el componente Fila que define un div horizontal donde puede colocar algunas columnas:

import Row from 'react-bootstrap/lib/Row';

const MyRow = (
    {/* Normal BS would be: <div class="row"></div>*/}
    <Row>

    </Row>
);

Y finalmente las columnas responsive ampliamente conocidas de bootstrap

import Grid from 'react-bootstrap/lib/Grid';
import Row from 'react-bootstrap/lib/Row';
import Col from 'react-bootstrap/lib/Col';

const MyAwesomeLayout = (
    <Grid>
        <Row>
            <Col xs={12} md={8}>
                {/* Some content */}
            </Col>
            <Col xs={6} md={4}>
                {/* Some content */}
            </Col>
        </Row>

        <Row>
            <Col xs={6} md={4}>
                {/* Some content */}
            </Col>
            <Col xs={6} md={4}>
                {/* Some content */}
            </Col>
            <Col xsHidden md={4}>
                {/* Some content */}
            </Col>
        </Row>

        <Row>
            <Col xs={6} xsOffset={6}>
                {/* Some content */}
            </Col>
        </Row>

        <Row>
            <Col md={6} mdPush={6}>
                {/* Some content */}
            </Col>
            <Col md={6} mdPull={6}>
                {/* Some content */}
            </Col>
        </Row>
    </Grid>
);

Botones

Bootstrap proporciona diferentes estilos de botones que se pueden usar fácilmente de la misma manera con React. Con bootstrap simple, solo necesita proporcionar una clase para definir el estilo del botón, ahora en ReactJS puede establecer su tipo con la bsStyle propiedad:

import ButtonToolbar from 'react-bootstrap/lib/ButtonToolbar';
import Button from 'react-bootstrap/lib/Button';

const buttonsInstance = (
    <ButtonToolbar>
        {/* Standard button */}
        <Button>Default</Button>

        {/* Provides extra visual weight and identifies the primary action in a set of buttons */}
        <Button bsStyle="primary">Primary</Button>

        {/* Indicates a successful or positive action */}
        <Button bsStyle="success">Success</Button>

        {/* Contextual button for informational alert messages */}
        <Button bsStyle="info">Info</Button>

        {/* Indicates caution should be taken with this action */}
        <Button bsStyle="warning">Warning</Button>

        {/* Indicates a dangerous or potentially negative action */}
        <Button bsStyle="danger">Danger</Button>

        {/* Deemphasize a button by making it look like a link while maintaining button behavior */}
        <Button bsStyle="link">Link</Button>
    </ButtonToolbar>
);

Modales

El siguiente componente crea un botón que muestra un modal cuando se hace clic en él. Una vez que haga clic en el botón cerrar, el cuadro de diálogo se cerrará automáticamente:

import React from 'react';
 
import Modal from 'react-bootstrap/lib/Modal';
import Button from 'react-bootstrap/lib/Button';

export default class App extends React.Component {
    constructor(props, context) {
        super(props, context);

        // Handle state
        this.state = {
            show: false
        };
    }

    render() {
        // Close the dialog
        let close = () => {
            this.setState({ show: false});
        };

        return (
            <div className="modal-container" style={{ height: 200 }}>
                <Button
                    bsStyle="primary"
                    bsSize="large"
                    onClick={() => this.setState({ show: true })}
                >
                    Launch contained modal
                </Button>

                <Modal
                    show={this.state.show}
                    onHide={close}
                    container={this}
                    aria-labelledby="contained-modal-title"
                >
                    <Modal.Header closeButton>
                        <Modal.Title id="contained-modal-title">Contained Modal</Modal.Title>
                    </Modal.Header>

                    <Modal.Body>
                        Elit est explicabo ipsum eaque dolorem blanditiis doloribus sed id ipsam, beatae, rem fuga id earum? Inventore et facilis obcaecati.
                    </Modal.Body>

                    <Modal.Footer>
                        <Button onClick={close}>Close</Button>
                    </Modal.Footer>
                </Modal>
            </div>
        );
    }
}

Como no queríamos enumerar todos los componentes de bootstrap, pero sí los más utilizados, encontrará todos los componentes en la documentación del sitio web oficial de React Bootstrap aquí .

Que te diviertas ❤️!


Interesado en la programación desde los 14 años, Carlos es un programador autodidacta, fundador y autor de la mayoría de los artículos de Our Code World.

Conviertete en un programador más sociable

Patrocinadores