Aprende a implementar la última versión (4) de Twitter Bootstrap en tu aplicación ReactJS.

Cómo usar componentes de Bootstrap 4 en ReactJS

Twitter Bootstrap CSS Framework es y será durante mucho tiempo uno de los frameworks HTML, CSS y JavaScript más impresionantes y conocidos que puede utilizar como modelo estándar para crear sitios web o aplicaciones web. Las características principales de los marcos son 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. Si estás trabajando en algún proyecto de React y quieres facilitarte la vida al diseñar la interfaz de usuario usando Bootstrap, tenemos buenas noticias para ti. Hoy en día, es posible utilizar la última versión de Bootstrap como componentes de React. Estamos hablando de Reactstrap. Esta biblioteca puede ayudarlo a trabajar de la manera React mientras usa las funciones asombrosas, más recientes y fáciles de usar de Bootstrap 4.

Nota

Si está buscando los componentes de Bootstrap 3 en ReactJS, consulta este otro artículo.

1. Instale Reactstrap

El módulo Reactstrap implementa todos los componentes de Bootstrap 4 como componentes de 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. Sin embargo, se basa en Tether (una dependencia de Bootstrap) para producir información sobre herramientas eficiente y agradable. Para instalarlo, cambie al directorio de su proyecto con el terminal e instale como primer paso Bootstrap 4 ejecutando el siguiente comando:

npm install bootstrap@4.0.0-alpha.6 --save

Luego instale el módulo Reactstrap que le permite usar bootstrap 4 como componentes de reacción:

npm install --save reactstrap react-addons-transition-group react-addons-css-transition-group react react-dom

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

2. Defina su tema Bootstrap 4

Deberá incluir una hoja de estilo con las clases de bootstrap 4, por lo que hay 2 opciones según su forma de trabajar. Si está utilizando un paquete web y puede configurarlo para incluir archivos CSS importándolo desde JavaScript, simplemente puede importar las hojas de estilo bootstrap 4 predeterminadas en su archivo JS principal como:

// Importar CSS Bootstrap 4 predeterminado
import 'bootstrap/dist/css/bootstrap.css';

De lo contrario, si desea incluir un tema de terceros de Bootstrap 4 (como Bootswatch 4), simplemente puede incluirlo en su documento HTML con una etiqueta de enlace:

<!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">

        <!-- 
           Incluye algún tema CSS de Bootstrap 4, por ejemplo, de Bootswatch CDN
            -->
        <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/thomaspark/bootswatch/gh-pages/4-alpha/cerulean/bootstrap.min.css">
    </head>

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

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

3. Uso de componentes de Bootstrap en React

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

Diseño

Las características ampliamente conocidas de Bootstrap es su revolucionario sistema de cuadrícula de diseño. El uso del sistema Grid de Bootstrap lo ayudará a 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 se envuelve dentro de un contenedor, ya sea normal o contenedor-fluido. En la versión React, este componente también se llama Container y se puede usar de la siguiente manera:

import {Container} from 'reactstrap';

const ContainerComponent = (
    <Container>
        {/* Contenido aquí */}
    </Container>
);

const ContainerFluid = (
    <Container fluid={true}>
        {/* Contenido aquí */}
    </Container>
);

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

import { Row } from 'reactstrap';

const MyRow = (
    <Row>
        {/* Contenido aquí */}
    </Row>
);

Finalmente, las columnas que puede usar en grupo con el contenedor, filas para crear su diseño impresionante:

import React from 'react';
import { Container, Row, Col } from 'reactstrap';

export default class Example extends React.Component {
    render() {
        return (
            <Container>
                <Row>
                    <Col>.col</Col>
                </Row>
                <Row>
                    <Col>.col</Col>
                    <Col>.col</Col>
                    <Col>.col</Col>
                    <Col>.col</Col>
                </Row>
                <Row>
                    <Col xs="3">.col-3</Col>
                    <Col xs="auto">.col-auto - variable width content</Col>
                    <Col xs="3">.col-3</Col>
                </Row>
                <Row>
                    <Col xs="6">.col-6</Col>
                    <Col xs="6">.col-6</Col>
                </Row>
                <Row>
                    <Col xs="6" sm="4">.col-6 .col-sm-4</Col>
                    <Col xs="6" sm="4">.col-6 .col-sm-4</Col>
                    <Col sm="4">.col .col-sm-4</Col>
                </Row>
                <Row>
                    <Col sm={{ size: 6, push: 2, pull: 2, offset: 1 }}>.col .col-sm-6 .col-sm-push-2 .col-sm-pull-2 .col-sm-offset-2</Col>
                </Row>
                <Row>
                    <Col sm="12" md={{ size: 8, offset: 2 }}>.col .col-sm-12 .col-md-6 .col-md-offset-3</Col>
                </Row>
                <Row>
                    <Col sm={{ size: 'auto', offset: 1 }}>.col .col-sm .col-sm-offset-1</Col>
                    <Col sm={{ size: 'auto', offset: 1 }}>.col .col-sm .col-sm-offset-1</Col>
                </Row>
            </Container>
        );
    }
}

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  color propiedad:

import React from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import { Button } from 'reactstrap';

export default class App extends React.Component {

    constructor(props, context) {
        super(props, context);
    }

    render() {
        return (
            <div>
                <Button color="primary">primary</Button>{' '}
                <Button color="secondary">secondary</Button>{' '}
                <Button color="success">success</Button>{' '}
                <Button color="info">info</Button>{' '}
                <Button color="warning">warning</Button>{' '}
                <Button color="danger">danger</Button>{' '}
                <Button color="link">link</Button>
            </div>
        );
    }
}

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 'bootstrap/dist/css/bootstrap.css';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';

export default class App extends React.Component {

    constructor(props, context) {
        super(props, context);

        this.state = {
            modal: false
        };

        this.toggle = this.toggle.bind(this);
    }

    toggle() {
        this.setState({
            modal: !this.state.modal
        });
    }

    render() {
        return (
            <div>
                <Button color="danger" onClick={this.toggle}> Open Modal </Button>
                
                <Modal isOpen={this.state.modal} toggle={this.toggle}>
                    <ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
                    <ModalBody>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    </ModalBody>
                    <ModalFooter>
                        <Button color="primary" onClick={this.toggle}>Do Something</Button>{' '}
                        <Button color="secondary" onClick={this.toggle}>Cancel</Button>
                    </ModalFooter>
                </Modal>
            </div>
        );
    }
}

Como no queríamos enumerar todos los componentes de bootstrap 4, pero sí los más utilizados, encontrará todos los componentes en la documentación del sitio web oficial de Reactstrap 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